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

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

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

A967476c5855d593710a9a580f6b2aed?s=128

Yuichi Maekawa

November 13, 2020
Tweet

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