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.3k
1
Share
LWCでローカルコンポーネント開発 / Local development on LWC
Salesforce Developers Meetup #24
Yuichi Maekawa
November 13, 2020
More Decks by Yuichi Maekawa
See All by Yuichi Maekawa
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
16
9.5k
やらないことを決める
kaelaela
1
1.3k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
920
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
3k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
510
Zap Your DX!
kaelaela
1
600
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
660
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
4.2k
こんなに違う!ScalaとKotlin
kaelaela
2
2.3k
Other Decks in Programming
See All in Programming
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
250
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
210
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
510
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
760
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.2k
RailsのValidatesをSwift Macrosで再現してみた
hokuron
0
150
へんな働き方
yusukebe
6
2.9k
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
130
今年もTECHSCOREブログを書き続けます!
hiraoku101
0
220
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
280
条件判定に名前、つけてますか? #phperkaigi #c
77web
2
910
Geminiをパートナーに神社DXシステムを個人開発した話(いなめぐDX 開発振り返り)
fujiba
0
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Documentation Writing (for coders)
carmenintech
77
5.3k
Deep Space Network (abreviated)
tonyrice
0
100
Joys of Absence: A Defence of Solitary Play
codingconduct
1
330
Are puppies a ranking factor?
jonoalderson
1
3.2k
Building the Perfect Custom Keyboard
takai
2
720
GraphQLとの向き合い方2022年版
quramy
50
14k
Typedesign – Prime Four
hannesfritz
42
3k
Why Our Code Smells
bkeepers
PRO
340
58k
How STYLIGHT went responsive
nonsquared
100
6k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
780
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
460
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>で使うだけ!