Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LWCでローカルコンポーネント開発 / Local development on LWC
Search
Yuichi Maekawa
November 13, 2020
Programming
1
1.2k
LWCでローカルコンポーネント開発 / Local development on LWC
Salesforce Developers Meetup #24
Yuichi Maekawa
November 13, 2020
Tweet
Share
More Decks by Yuichi Maekawa
See All by Yuichi Maekawa
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
16
9.1k
やらないことを決める
kaelaela
1
1.2k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
860
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.9k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
490
Zap Your DX!
kaelaela
1
580
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
640
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
4.1k
こんなに違う!ScalaとKotlin
kaelaela
2
2.2k
Other Decks in Programming
See All in Programming
connect-python: convenient protobuf RPC for Python
anuraaga
0
350
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
110
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
techtver
PRO
3
1.4k
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
xpromx
0
260
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
230
20251127_ぼっちのための懇親会対策会議
kokamoto01_metaps
2
400
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
tosuri13
5
260
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
24
21k
DSPy Meetup Tokyo #1 - はじめてのDSPy
masahiro_nishimi
1
150
宅宅自以為的浪漫:跟 AI 一起為自己辦的研討會寫一個售票系統
eddie
0
470
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
180
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
6
1.9k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.9k
Scaling GitHub
holman
464
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Context Engineering - Making Every Token Count
addyosmani
9
460
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Done Done
chrislema
186
16k
Transcript
LWCで ローカルコンポーネント開発 Salesforce Developers Meetup #24 2020/11/13 Maekawa Yuichi
Maekawa Yuichi Twitter: @_kaelaela Software Engineer@ サブスクリプションビジネスの効率化 収益最大化プラットフォーム https://scalebase.com/
Webアプリ開発での一般的な問題 - 画面の複雑化 - 状態管理の複雑化 - 依存関係の複雑化 ↓ ソースコードの肥大化、保守性の低下 これらはSalesforceのパッケージ開発でも同じことが起こる
Lightning Web Component Web Components - 再利用可能でカプセル化された独自HTMLタグ作成のためのWeb標準API コンポーネント開発により、カプセル化、関心の分離、再利用性を高める システムの複雑化をコンポーネントで減速させ、開発を加速させる Web
Components x Salesforce = LWC
Salesforce開発の困るところ... ソースコードをSalesforce上にデプロイしないと見れない deployが長いとTwitterを見てしまうのが人の性 手元でsave & buildしてチェックして開発速度を上げたい
local dev server
Local development(Beta) Local開発環境にサーバーを立ててdeployし、即座に変更を反映、確認ができる 導入 - Sfdxプラグインをインストール - ローカルサーバーを起動 - 開発後保存すると即座にlwcフォルダ内コードがデプロイされる
これだけ!
@salesforce/lwc-dev-serverプラグイン プラグインをinstall $ sfdx plugins:install @salesforce/lwc-dev-server ローカルサーバーの起動 $ sfdx force:lightning:lwc:start
tips package.jsonにscriptを追加しておくと楽
tips
open http://localhost:3333
コンポーネント作成手順 - lwcフォルダの下にフォルダ作成 - HTMLで<templace>を使ってレイアウト作成 - jsでコンポーネントロジックを書く - Local dev
serverで動作チェック - Sandboxとか用意するといい - 使いたいページで<c-XXX>で導入 以上
HTML
JS
使うページのHTML
localhost:3333
Thank you! アプリケーション開発に起こりがちなコードの肥大化 - コンポーネント開発で乗り切ろう Salesforce開発のスピードをあげたい - Local dev serverを使おう
Component開発 - HTML/JSを書いて<c-xxx>で使うだけ!