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.1k
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
やらないことを決める
kaelaela
1
1.1k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
730
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.7k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
460
Zap Your DX!
kaelaela
1
540
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
570
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.9k
こんなに違う!ScalaとKotlin
kaelaela
2
2.1k
Share apk via Bitrise
kaelaela
4
3.6k
Other Decks in Programming
See All in Programming
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.8k
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
110
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
200
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
140
By the way Google Cloud Next 2025に行ってみてどうだった
ymd65536
0
120
LRパーサーはいいぞ
ydah
6
1.2k
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
1
130
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.5k
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
120
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
API for docs
soutaro
4
1.7k
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
410
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Automating Front-end Workflow
addyosmani
1370
200k
Producing Creativity
orderedlist
PRO
344
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
840
Bash Introduction
62gerente
612
210k
4 Signs Your Business is Dying
shpigford
183
22k
Embracing the Ebb and Flow
colly
85
4.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Faster Mobile Websites
deanohume
306
31k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
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>で使うだけ!