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
840
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
850
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
0
420
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.2k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
410
Zap Your DX!
kaelaela
1
440
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
470
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.7k
こんなに違う!ScalaとKotlin
kaelaela
2
1.8k
Share apk via Bitrise
kaelaela
4
3.2k
Other Decks in Programming
See All in Programming
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
Git Rebase
bkuhlmann
11
1.6k
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Let's learn code review
riofujimon
1
260
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
100
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
310
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Docker and Python
trallard
34
2.7k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Become a Pro
speakerdeck
PRO
11
4.5k
Designing for humans not robots
tammielis
248
25k
Statistics for Hackers
jakevdp
789
220k
A designer walks into a library…
pauljervisheath
200
23k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Ruby is Unlike a Banana
tanoku
96
10k
Six Lessons from altMBA
skipperchong
21
3k
Product Roadmaps are Hard
iamctodd
44
9.7k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
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>で使うだけ!