LWC Local Development を試してみました

December 6, 2019 Naoki Kitaarashi

こんにちは、アピリオ北嵐です。昨年の暮れに Lightning Web Components が発表されてからしばらくの間は大きな動きはなかったのですが、ここに来て新しい開発プラットフォームである Local Development が発表されました。まだベータ版ではあるものの、基本的な機能はきちんとサポートされていて十分に実用的なレベルにはなっていますので、この Local Development を使った Web Components の開発方法についてご紹介します。

1. Web Components の開発

最初に Lightning Web Components の実装方法についておさらいしておきましょう。従来の Aura コンポーネントは以下の2つの方法で実装することができました。

A. 開発者コンソール上で開発する

B. ローカルエディタ(Sublime Text, Atom, VS Codeなど)で開発し、MavensMate (※1) などのツールを使ってメタデータをデプロイする 

※1 MavensMate のサポートは既に終了しており、現在は利用できません

一方、Web Components は開発者コンソールではサポートされておらず、設定画面でソースコードを確認することもできません(Winter'20 時点)。コンポーネントを実装するには Salesforce DX を使用する必要があり、ローカル環境で実装して、サーバー上にデプロイして実行確認するというスタイルを取ります。図にすると下記のようなイメージになります。

 

例えば、Scratch 組織を使用する場合は下記のような手順になります。

1. DevHub 組織を準備する

2. DevHub 組織から開発用の Scratch 組織を作成する

3. ローカルPC上にSFDXプロジェクトを作成する(VS Codeを利用)

4. SFDX プロジェクト上で、Web Components を開発する(この時点ではコンパイルチェックはできない)

5. Salesforce CLI コマンドを使ってサーバー上にソースコードを push する
(リリースと同時にコンパイルチェックも実施される)

6. サーバー上で稼働確認を行う

Salesforce DX はローカル環境で開発を行い、ソースコードを別途管理することを狙いとしているため、このような手順になっているのでしょうが、従来の Salesforce の開発と比べると Web Components の開発は少し面倒に感じられます。この点を改善するために Local Development は提供されたのだと思います。

2. LWC Local Development

Local Development は Web components をローカルPC環境で実行するためのSFDX CLIのプラグインとして提供されます。サーバーにソースコードを push することなく、ローカル環境でコードのコンパイルおよび実行ができることが最大の特徴です。これまで Salesforce の全てのリソースはサーバー側でないとコンパイルすることができなかったので、このようなツールが提供されたことは Salesforce の開発スタイルを変えていく大きな変換点かもしれません。

下記は Local Development の実行イメージとなります。Sandbox 組織と連携することはできず、実行には Scratch 組織が必要になります。

ローカル環境への導入は簡単で、下記の手順で実施してください。

1.  Web Components を開発できる環境をセットアップする
(Salesforce CLI、VS Code の導入、SFDX プロジェクト作成)

2 . DevHub 組織から Scratch 組織を作成する

3.  Lightning Local Development Plugin を導入する

sfdx plugins:install @salesforce/lwc-dev-server

4. ローカルサーバーを実行する (SFDXプロジェクトのルートフォルダから)

sfdx force:lightning:lwc:start

5.  ブラウザから http://localhost:3333  を開く

ブラウザには下記のようなTop画面が表示されます。コンポーネントはローカルの SFDX プロジェクトのソースコードを参照しています。

コンポーネントをクリックすると、ローカルプロジェクトのソースコードが読み込まれ、コンポーネントが表示されます。

コンパイルに失敗するとその場でエラーメッセージが表示されます。これまでサーバーに push しないと文法的なエラーは分からなかったので、これはとても便利な機能だと思いました。ソースコードは常時 watch されているため、VS Code 上でコードを修正すると、ブラウザの表示を明示的に Refresh することなくすぐに結果が反映されます。

Local Development では Data Service や Apex 呼出による Salesforce 組織への API コールは、Mock や Stub ではなくProxy 経由で Scratch 組織に直接アクセスされることに注意してください。そのため Apex クラスに関しては、ローカル環境のファイルは使用されず、事前に Scratch 組織に push しておく必要があります。

また  Chrome 上での JS コードのデバッグも問題なく実行できます。

 

3. β版の制約

2019年11月時点で Local Development はベータ版であり、いくつかの制約があります。その抜粋を紹介します。詳細はドキュメントの「Working With Modules and Components」を参照してください。

・サポートされている@Salesforceモジュールは下記の4つになる

@Salesforce/resourceUrl

@Salesforce/label

@Salesforce/apex

@Salesforce/schema

・Auraコンポーネントはサポートされない

・設計プロパティ(ビルダー上で設定するプロパティ)を変更することはできず、デフォルト値でコンポーネントは動作する

・Locker サービスはサポートされない

・Design トークンはサポートされない

・トーストメッセージは表示されない

マニュアルには記載されていませんが、トーストメッセージを表示する下記のコードを正常に実行できなかったので、dispatchEvent 系はまだ実装されていないのかもしれません。

/*
 *トーストによるメッセージ表示
 */
showToast(message) {
    const event = new ShowToastEvent({
        title: 'Sending Toasts is a Blast!',
        message: message,
        variant: 'error', //info/success/warning/error
        mode: 'sticky'  //sticky クローズボタンを押すまで表示
                        //pester 3秒間表示
                        //dismissable sticky+pester
    });
    this.dispatchEvent(event);
}

・HTML の表示が崩れることがある

スタイルシートの解釈がLEX環境と一部異なるようで、HTMLの表示が崩れることがありました。今回試したケースでは、slds-dropdown クラスの position=absolute をうまく解釈できませんでした。

.slds-dropdown {
    position: absolute; <-- ここ
    z-index: var(--lwc-zIndexDropdown,7000);
    left: 50%;
    float: left;
・・・
    transform: translateX(-50%)
}

まとめ

Local Development は Web Components のローカル PC 環境での開発を効率化するために提供される SFDX CLIの pluginです。2019年11月時点ではベータ版であり、いくつかの制約のため完全にサーバー上での実行を代替できるわけではありません。また、利用には Scratch 組織が必要になります。

このような制約はあるものの、現時点でも利用する価値は十分にあると思います。サーバー上に push する必要がなく、コードを変更するとその場でコンパイル結果をチェックできることは、テンポよくコーディングしていくための重要な要素だと改めて感じました。

今後、正式リリースに向けてどんどんと機能拡張されていくと思いますので、皆さんも是非このコンポーネント開発の新しい流れをご自分の環境で試してみて下さい。

Visualforce Page から Lightning コンポーネントへ。Enjoy コンポーネントライフ!!

 

 

 

著者について

Naoki Kitaarashi

アピリオのシニアコンサルとしてクラウドの世界に身を投じてはや5年あまり。プロジェクトでの立場に応じて、アーキテクト、リーダー、デベロッパーと様々なロールの仕事に携わっています。続々と新しいサービスと技術が登場するSalesforceの世界はエンジニアとして常に刺激を持ち続けられるエリアであり、2019年からはMuleSoftソリューションの起ち上げに関わっています。しばらくはAPI-ledなシステム連携を広めることに全力投球!!

Naoki Kitaarashi のコンテンツをもっと見る
戻る
MuleSoft 入門(1)MuleSoft による API-led なアプリケーションネットワーク
MuleSoft 入門(1)MuleSoft による API-led なアプリケーションネットワーク

今回から MuleSoft 入門編ブログをシリーズに渡ってお届けします。このシリーズでは MuleSoft が提唱する API 主導のシステム連携、MuleSoft Anypoint Platform の紹介、An...

次へ
Lightning Web Components入門(1)Aura Components からLightning Web Componentsへ
Lightning Web Components入門(1)Aura Components からLightning Web Componentsへ

従来のLightning Aura Componentsの課題を根本的に解決するために、よりモダンな技術をベースとした新しいLightning Web ComponentsがSrping'19から提供されることにな...

アピリオまでお気軽にお問合せください

ご質問はこちら