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
1k
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
1k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
660
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.6k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
440
Zap Your DX!
kaelaela
1
520
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
550
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.9k
こんなに違う!ScalaとKotlin
kaelaela
2
2k
Share apk via Bitrise
kaelaela
4
3.5k
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Domain-Driven Transformation
hschwentner
2
1.9k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A better future with KSS
kneath
238
17k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Site-Speed That Sticks
csswizardry
3
370
4 Signs Your Business is Dying
shpigford
182
22k
A Tale of Four Properties
chriscoyier
158
23k
Writing Fast Ruby
sferik
628
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
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>で使うだけ!