LWC Local Developmentを試してみた

概要

SalesforceのLightning Web Component(LWC)をローカルサーバーで動かせる機能がBeta版でリリースされていたので、どんなものかを触って確かめてみました。

準備

Local Dev Server用のCLIをインストール

最終的にはSalesforce CLIのパッケージに含まれるようですが、現在はBeta版なので含まれていないので、個別にインストールする必要があります。

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

組織の認証

Devhub組織と認証して、Scratch組織を作成しておきます。どうやら接続先はSandboxではなくScratch組織である必要があるみたいです。この辺は結構前に書いた記事ですが、下記をご参照ください。

Salesforce DXの基礎の基礎
https://qiita.com/yhayashi30/items/80dd868f2e15aac67072

ローカルサーバーを起動

下記のコマンドを実行することでnode.jsがローカルサーバーを起動してくれます。

sfdx force:lightning:lwc:start

また、VSCodeのコマンドパレットで下記を実行して操作することもできます。

起動して開く
SFDX: Open Local Development Server

起動
SFDX: Start Local Development Server

停止
SFDX: Stop Local Development Server

表示
(選択したLWCのソースコードを右クリック)
Preview Lightning Web Components in VS Code

これで準備ができたので、localhostにアクセスすると画面が表示されるはずです。

http://localhost:3333/

特徴

ローカルのLWCを画面描画

最初、localhostにアクセスすると自分のローカルプロジェクトに含まれているLWCがリンクでリスト表示されます。

リンクをクリックすると、LWCがローカルサーバー上で表示されます。また、画面右上にある”View in VS Code”のボタンを押下すると、画面で表示しているLWCのソースコードをVS Code上で表示してくれます。
VS Code上でLWCのソースを修正すると即時にローカルサーバーにデプロイが行われて画面が最新化されるようになっているようです。

コンパイルチェックしてくれる

今までSalesforceの開発ではSandboxやScratch組織にソースコードをアップロードしないとコンパイルのチェックはできませんでしたが、ローカルサーバーを使う事でLWCの構文チェックを行ってくれて、どこでエラーが発生しているかを表示してくれます。ちなみにエラー画面は下記のようなイメージで、どこでエラーが起きているかやエラーメッセージも表示されます。