Zenn
🦘

Salesforce のローカル開発(ベータ)を試してみよう！

2021/01/07に公開
Android
iOS
Salesforce
LWC
#
sfdx
tech

Salesforce のローカル開発では、Lightning Web Components で開発した Lightning コンポーネントをローカルホスト上で動作させることができるようになります。これによって、コンポーネントの開発においてコードを変更する度に Salesforce 組織にデプロイして確認するという作業が必要なくなるので、開発イテレーションの効率化が期待されています。ローカルでホストされた Lightning コンポーネントは、PC のブラウザの他、iOS/Android シミュレータ上のブラウザからアクセスする事もできます。

事前準備

ローカル開発を行うには、Salesforce CLI に lwc-dev-server プログインを追加します。モバイルシミュレータでの確認が必要な場合は、lwc-dev-mobile もインストールしておきます。

$ sfdx plugins:install @salesforce/lwc-dev-server
Successfully validated digital signature for @salesforce/lwc-dev-server.
Finished digital signature check.
Installing plugin @salesforce/lwc-dev-server... installed v2.9.0

$ sfdx plugins:install @salesforce/lwc-dev-mobile
This plugin is not digitally signed and its authenticity cannot be verified. Continue installation y/n?: y
Finished digital signature check.
Installing plugin @salesforce/lwc-dev-mobile... installed v0.4.1

これに加えて、iOS シミュレータを利用する場合は Xcode、Android シミュレータを利用する場合は Android Studio をインストールしておきます。そして、Android シミュレータを起動するための環境変数を設定します。

$ export ANDROID_HOME=/Users/<ユーザー名>/Library/Android/sdk/
$ export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

ローカル開発の動作を確認

ローカル開発の動作を確認するために、デフォルトのプロジェクトディレクトリ内に簡単なコンポーネントを作成しました。このコンポーネントは画面に Hello Local Development と表示するだけです。

force-app/main/default/lwc/helloLocalDevelopment.html
<template>
    <p>Hello Local Development</p>
</template>

コンポーネントの準備ができたら sfdx コマンドでローカルサーバーを起動してみます。

$ sfdx force:lightning:lwc:start
Server up on http://localhost:3333

ローカルサーバーが起動したら http://localhost:3333 にアクセスしてみます。すると以下の画面が表示され、プロジェクト内の Lightning コンポーネントがリストされます。今回はコンポーネントを一つだけ作成したので c-hello-local-development だけが表示されています。

c-hello-local-development をクリックするとコンポーネントが表示され、画面中央に Hello Local Development と表示されます。
また、この状態でソースコードを変更すると、画面上に表示されたコンポーネントにも即座に反映されるので便利ですね！

モバイルシミュレータで動作を確認

モバイルシミュレータ上でコンポーネントを確認するには、上の手順でローカルサーバを起動したまま、sfdx force:lightning:lwc:preview コマンドを実行します。モバイルシミュレータの起動には、モバイルの種類(iOS/Android)と対象のコンポーネント名の指定が必要です。
また、コマンドを実行するとはじめに必要な環境が整っているかのチェックが実行されます。

# iOS の場合
sfdx force:lightning:lwc:preview -p iOS -n c/helloLocalDevelopment
└─ Setup
   ├─ Passed: @salesforce/lwc-dev-server plugin is installed.
   ├─ Passed: Running macOS.
   ├─ Passed: Xcode installed. XCode library path: /Applications/Xcode.app/Contents/Developer
   └─ Passed: One or more supported simulator runtimes are configured for iOS: [ 'iOS-14-3' ]
Launching... done

# Android の場合
$ sfdx force:lightning:lwc:preview -p Android -t Pixel_3a_API_30_x86 -n c/helloLocalDevelopment
└─ Setup
   ├─ Passed: @salesforce/lwc-dev-server plugin is installed.
   ├─ Passed: ANDROID_HOME is set to /Users/XXXXXX/Library/Android/sdk/.
   ├─ Passed: Android SDK prerequisites are met.
   ├─ Passed: Android SDK tools were detected at /Users/h.tanaka/Library/Android/sdk/tools/bin.
   ├─ Passed: Android Platform tools were detected at /Users/h.tanaka/Library/Android/sdk/platform-tools.
   ├─ Passed: android-30 API package was detected.
   └─ Passed: Android emulator image (system-images;android-30;google_apis;x86) was detected.
Launching... Opening Browser with url http://10.0.2.2:3333/lwc/preview/c/helloLocalDevelopment

無事起動すると、起動したシミュレータ内のブラウザでコンポーネントが表示されます。PC 版と同様にソースコードへの変更も即座に反映されます。

VS Code でローカル開発を快適に

VS Code では、cmd + shit + p でコマンドパレット開き、SFDX: Preview Component Locally すると簡単にローカル開発を開始できるので便利ですよ！

参考

Discussion