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
16
8.1k
やらないことを決める
kaelaela
1
1.1k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
810
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.8k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
480
Zap Your DX!
kaelaela
1
560
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
600
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
4k
こんなに違う!ScalaとKotlin
kaelaela
2
2.2k
Other Decks in Programming
See All in Programming
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
340
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
740
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
実践!App Intents対応
yuukiw00w
0
110
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
140
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
430
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Building Applications with DynamoDB
mza
95
6.5k
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Gamification - CAS2011
davidbonilla
81
5.4k
Unsuck your backbone
ammeep
671
58k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Become a Pro
speakerdeck
PRO
29
5.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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>で使うだけ!