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
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
680
アルプのロードマップ変遷 / 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
2.1k
Share apk via Bitrise
kaelaela
4
3.5k
Other Decks in Programming
See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
790
Rubyと自由とAIと
yotii23
6
1.8k
PRレビューのお供にDanger
stoticdev
1
240
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
230
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
27
6.6k
Jakarta EE meets AI
ivargrimstad
0
520
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
220
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
260
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
1
420
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Done Done
chrislema
182
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6k
Statistics for Hackers
jakevdp
797
220k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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>で使うだけ!