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
980
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
960
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
600
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.5k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
420
Zap Your DX!
kaelaela
1
490
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
530
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.8k
こんなに違う!ScalaとKotlin
kaelaela
2
2k
Share apk via Bitrise
kaelaela
4
3.4k
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
flutterkaigi_2024.pdf
kyoheig3
0
150
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
イベント駆動で成長して委員会
happymana
1
330
受け取る人から提供する人になるということ
little_rubyist
0
250
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Docker and Python
trallard
40
3.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Done Done
chrislema
181
16k
GraphQLとの向き合い方2022年版
quramy
43
13k
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>で使うだけ!