Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
LWCでローカルコンポーネント開発 / Local development on LWC
Yuichi Maekawa
November 13, 2020
Programming
1
480
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
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
910
ApexでPofEAA / PofEAA by Apex
kaelaela
2
190
Zap Your DX!
kaelaela
1
260
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
260
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.1k
こんなに違う!ScalaとKotlin
kaelaela
2
1.3k
Share apk via Bitrise
kaelaela
4
2.5k
What I Talk About When I Talk About Ktlint
kaelaela
1
230
AbemaTVのAndroidTV対応
kaelaela
1
520
Other Decks in Programming
See All in Programming
JGS594 Lecture 23
javiergs
PRO
0
400
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
patrickjahr
0
150
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
370
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
240
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
2
370
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
0
240
Managing gRPC with Wire
oldergod
2
150
脱オブジェクト指向講座(5分LT資料)
kishida
8
9.9k
スクラムの窓から眺めてみた エンジニアリングマネジメント / em-meetup#10 scrum with em
shinden
1
400
コードの解析と言語習得の心得
jinjin33333
0
110
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
260
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-systems
grapecity_dev
0
110
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
303
40k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
Unsuck your backbone
ammeep
659
55k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
A better future with KSS
kneath
225
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
420
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Bash Introduction
62gerente
596
210k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
KATA
mclloyd
7
8.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
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>で使うだけ!