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
940
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
930
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
0
570
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.4k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
420
Zap Your DX!
kaelaela
1
480
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
520
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
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
What is Parser
yui_knk
9
4.1k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Agile that works and the tools we love
rasmusluckow
327
20k
Code Reviewing Like a Champion
maltzj
517
39k
Web Components: a chance to create the future
zenorocha
308
42k
Navigating Team Friction
lara
183
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Unsuck your backbone
ammeep
667
57k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
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>で使うだけ!