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

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

A967476c5855d593710a9a580f6b2aed?s=47 Yuichi Maekawa
November 13, 2020
Programming
1
480

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

Salesforce Developers Meetup #24

A967476c5855d593710a9a580f6b2aed?s=128

Yuichi Maekawa

November 13, 2020
Tweet

More Decks by Yuichi Maekawa

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

Other Decks in Programming

See All in Programming
JGS594 Lecture 23
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
400
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
150
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
370
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
0
240
よりUXに近いSLI・SLOの運用による可用性の再設計
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
2
370
Micro Frontends with Module Federation: Beyond the Basics @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
240
Managing gRPC with Wire
05162bc961c3654218bf1839974a4f35?s=48 oldergod
2
150
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
9.9k
スクラムの窓から眺めてみた エンジニアリングマネジメント / em-meetup#10 scrum with em
B0e91e85741c1c629c07a794c02841cf?s=48 shinden
1
400
コードの解析と言語習得の心得
72dae9d4524988d16990da682116fc8a?s=48 jinjin33333
0
110
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
260
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
110

Featured

See All Featured
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
31
5.8k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
5.5k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
3
420
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
596
210k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.5k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k

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>で使うだけ！