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.5k
やらないことを決める
kaelaela
1
1.2k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
820
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.8k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
480
Zap Your DX!
kaelaela
1
570
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
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
300
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
140
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
970
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
実践 Dev Containers × Claude Code
touyu
1
240
令和最新版手のひらコンピュータ
koba789
14
8k
🔨 小さなビルドシステムを作る
momeemt
1
480
Flutterと Vibe Coding で個人開発!
hyshu
1
260
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
480
CSC305 Summer Lecture 05
javiergs
PRO
0
110
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
RailsConf 2023
tenderlove
30
1.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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>で使うだけ!