Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LWCでローカルコンポーネント開発 / Local development on LWC

Yuichi Maekawa
November 13, 2020
Programming
1
550

LWCでローカルコンポーネント開発 / Local development on LWC

Salesforce Developers Meetup #24

Yuichi Maekawa

November 13, 2020
Tweet

More Decks by Yuichi Maekawa

See All by Yuichi Maekawa
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
1.2k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
230
Zap Your DX!
kaelaela
1
290
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
290
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
3.2k
こんなに違う！ScalaとKotlin
kaelaela
2
1.4k
Share apk via Bitrise
kaelaela
4
2.6k
What I Talk About When I Talk About Ktlint
kaelaela
1
230
AbemaTVのAndroidTV対応
kaelaela
1
550

Other Decks in Programming

See All in Programming
Laravel を低速化する技術 / how to slow laravel
hanhan1978
PRO
0
660
Swift Concurrency時代のiOSアプリの作り方
koher
13
1k
モバイルアプリのオブザーバビリティを向上させるプラクティス
kazumanagano
5
680
The Lesser-Known Kotlin Features
antonarhipov
0
250
SwiftUI Navigation のすべて
kalupas226
8
3k
YJIT: Dive into Ruby's JIT compiler written in Rust / Rust.Tokyo 2022
k0kubun
1
880
入門SQLi / Introduction of SQLi
satoki
2
820
レガシーなシステムのリファクタリングに取り組んで学んだこと
pbtnhan
0
470
Perl でも GraphQL を使いたい
nakaokat
0
1.2k
治っていくmbstring ㋿時代の文字化け
youkidearitai
0
240
Ruby Pattern Matching
bkuhlmann
0
450
kintoneとMakeを使用したワークショップ U22プログラミングコンテスト2022
kintonegeeks
0
110

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
656
120k
How STYLIGHT went responsive
nonsquared
85
4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
642
53k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
GraphQLの誤解/rethinking-graphql
sonatard
32
7.1k
Navigating Team Friction
lara
175
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
213
20k
Rails Girls Zürich Keynote
gr2m
87
12k

Transcript

  1. LWCで ローカルコンポーネント開発 Salesforce Developers Meetup #24 2020/11/13 Maekawa Yuichi

  2. Maekawa Yuichi Twitter: @_kaelaela Software Engineer@ サブスクリプションビジネスの効率化 収益最大化プラットフォーム https://scalebase.com/

  3. Webアプリ開発での一般的な問題 - 画面の複雑化 - 状態管理の複雑化 - 依存関係の複雑化 ↓ ソースコードの肥大化、保守性の低下 これらはSalesforceのパッケージ開発でも同じことが起こる

  4. Lightning Web Component Web Components - 再利用可能でカプセル化された独自HTMLタグ作成のためのWeb標準API コンポーネント開発により、カプセル化、関心の分離、再利用性を高める システムの複雑化をコンポーネントで減速させ、開発を加速させる Web

    Components x Salesforce = LWC

  5. Salesforce開発の困るところ... ソースコードをSalesforce上にデプロイしないと見れない deployが長いとTwitterを見てしまうのが人の性 手元でsave & buildしてチェックして開発速度を上げたい

  6. local dev server

  7. Local development(Beta) Local開発環境にサーバーを立ててdeployし、即座に変更を反映、確認ができる 導入 - Sfdxプラグインをインストール - ローカルサーバーを起動 - 開発後保存すると即座にlwcフォルダ内コードがデプロイされる

    これだけ！

  8. @salesforce/lwc-dev-serverプラグイン プラグインをinstall $ sfdx plugins:install @salesforce/lwc-dev-server ローカルサーバーの起動 $ sfdx force:lightning:lwc:start

  9. tips package.jsonにscriptを追加しておくと楽

  10. tips

  11. open http://localhost:3333

  12. コンポーネント作成手順 - lwcフォルダの下にフォルダ作成 - HTMLで<templace>を使ってレイアウト作成 - jsでコンポーネントロジックを書く - Local dev

    serverで動作チェック - Sandboxとか用意するといい - 使いたいページで<c-XXX>で導入 以上

  13. HTML

  14. JS

  15. 使うページのHTML

  16. localhost:3333

  17. Thank you! アプリケーション開発に起こりがちなコードの肥大化 - コンポーネント開発で乗り切ろう Salesforce開発のスピードをあげたい - Local dev serverを使おう

    Component開発 - HTML/JSを書いて<c-xxx>で使うだけ！