Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
9
5k
やらないことを決める
kaelaela
1
1.1k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
790
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.7k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
470
Zap Your DX!
kaelaela
1
560
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
590
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
4k
こんなに違う!ScalaとKotlin
kaelaela
2
2.1k
Other Decks in Programming
See All in Programming
Porting a visionOS App to Android XR
akkeylab
0
460
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
Goで作る、開発・CI環境
sin392
0
230
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
NPOでのDevinの活用
codeforeveryone
0
830
PicoRuby on Rails
makicamel
2
130
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
AIともっと楽するE2Eテスト
myohei
6
2.6k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
KATA
mclloyd
30
14k
Code Reviewing Like a Champion
maltzj
524
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to train your dragon (web standard)
notwaldorf
95
6.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Designing for Performance
lara
610
69k
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>で使うだけ!