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

Salesforce Developers Meetup #24

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. local dev server
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. tips
    

    View Slide

11. open http://localhost:3333
    

    View Slide

12. コンポーネント作成手順
    - lwcフォルダの下にフォルダ作成
    - HTMLでを使ってレイアウト作成
    - jsでコンポーネントロジックを書く
    - Local dev serverで動作チェック
    - Sandboxとか用意するといい
    - 使いたいページでで導入
    以上
    

    View Slide

13. HTML
    

    View Slide

14. JS
    

    View Slide

15. 使うページのHTML
    

    View Slide

16. localhost:3333
    

    View Slide

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

    View Slide