LWC ローカル開発サーバ(ベータ)を使ってみる

# はじめに

https://developer.salesforce.com/tools/vscode/ja/localdev/lwclocaldev

LWCの開発体験を上げる`LWC ローカル開発サーバ`について試してみます。

:::note warn
2022年12/10 現在ベータ版機能です。
:::

# LWC ローカル開発サーバってなに？

ローカルの開発サーバを立てることができ、LWCをデスクトップブラウザ・仮想モバイルデバイス上で確認できるようになります。ホットリロードにも対応していますのでエディタで編集→即座に変更を確認することができます。いままで変更のたびにSalesforceにアップロードして確認をしていてめんどう！！みたいに思っていた人にはお勧めです。

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/28c0f9ea-97b5-5a3a-74a6-58d52661a1e6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/57dd6c16-74fc-b24c-7d7c-cd57b825b0d0.png)
https://developer.salesforce.com/tools/vscode/ja/localdev/lwclocaldev

# この記事で書かないこと
- SalesforceDXの環境ができている前提なので、SalesforceDXの環境構築については記載しません

# セットアップ

## デスクトップブラウザ用： インストール

https://developer.salesforce.com/tools/vscode/ja/localdev/set-up-lwc-local-dev

```bash
$ sfdx plugins:install @salesforce/lwc-dev-server
```

## モバイルデバイス用： インストール

https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.mobile_extensions_get_started

```bash
$ sfdx plugins:install @salesforce/lwc-dev-mobile
```

モバイルデバイスで確認したい場合は、`Android Studio`もしくは`Xcode`の設定が完了している必要があります。

### Androidで確認したい場合

以下のコマンドで`PASSED`と出ればOKです。`FAILED`と出た場合は
[Android Studio の設定](https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.mobile_extensions_setup_android_studio )をしてください


```bash
$ sfdx force:lightning:local:setup -p android
```

### iOSで確認したい場合

以下のコマンドで`PASSED`と出ればOKです。`FAILED`と出た場合は
[Xcode の設定](https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.mobile_extensions_setup_ios_xcode)をしてください


```bash
$ sfdx force:lightning:local:setup -p ios
```

# 使ってみる

## 使用するLWC

https://developer.salesforce.com/docs/component-library/bundle/lightning-carousel/example

公式の`lightning-carousel`のサンプルコードを使わせてもらいます。

```html: lwcServerTest.html
<template>
    <div class="slds-size_3-of-4">
        <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">Basic Carousel
            <lightning-carousel>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg"
                    header = "First Card"
                    description = "First card description."
                    alternative-text = "First card accessible description."
                    href = "javascript:void(0);">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-02.jpg"
                    header = "Second Card"
                    description = "Second card description."
                    alternative-text = "Second card accessible description."
                    href = "javascript:void(0);">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-03.jpg"
                    header = "Third Card"
                    description = "Third card description."
                    alternative-text = "Third card accessible description."
                    href = "javascript:void(0);">
                </lightning-carousel-image>
            </lightning-carousel>
        </div>
    </div>
</template>
```

## デスクトップブラウザで検証する

## 1. サーバーを起動する

### Visual Studio Codeで起動する

command + shift + p（Windowsの場合は、ctrl + shift + p）でコマンドパレットを開き
`ローカルの開発サーバを起動`を選択

![スクリーンショット 2022-12-10 2.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7ff1e2fa-d59b-e0e2-479f-be919304d9ff.png)

### コマンドで起動する

```bash
$ sfdx force:lightning:lwc:start
```

## 2. 確認する

`localhost:3333`にアクセス！または、Visual Studio Codeのコマンドパレットで`ローカルの開発サーバを開く`で`localhost:3333`が開かれます。

開くと用意したLWCのリンクがあるのでクリックします

![Local Development Server.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/4dd3202a-b25f-3013-aa3f-6bc2acf28ad0.png)

サンプルコードのカルセールが確認できますね。

![Local Development Server (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/d0aad143-ef20-9885-42c5-627de32d43c8.png)

1枚目のカルーセル画像を別の画像に差し替えてみます

![画面収録_2022-12-10_3_24_46_AdobeExpress (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/8cb0e623-5e7b-4513-0157-0e793619953b.gif)


ローカル開発サーバーにも反映されました

## モバイルデバイスで検証する

## 1. サーバーを起動する

### Visual Studio Codeで起動する

command + shift + p（Windowsの場合は、ctrl + shift + p）でコマンドパレットを開き
`ローカルの開発サーバを起動`を選択

![スクリーンショット 2022-12-10 2.53.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/7ff1e2fa-d59b-e0e2-479f-be919304d9ff.png)

### コマンドで起動する

```bash
$ sfdx force:lightning:lwc:start
```
## 2. iOSシミュレータ/Androidエミュレータを起動する

今回はiOSで検証しています。

### Visual Studio Codeで起動する

command + shift + p（Windowsの場合は、ctrl + shift + p）でコマンドパレットを開き
`コンポーネントをローカルでプレビュー`を選択

![スクリーンショット 2022-12-10 3.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/6d8e8dca-8e72-9438-df48-76d46add416d.png)

Android/iOSを選択

![スクリーンショット 2022-12-10 3.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/19a098c5-d04c-33f3-ae47-a3e8c8911f20.png)

利用したいデバイスを選択すればOKです。

![スクリーンショット 2022-12-10 3.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/4e2cac20-cc30-f8ab-c11e-bf3046027abc.png)




### コマンドで起動する

-nの後ろはコンポーネント名を入れてください
-t で利用するiOSシミュレータ/Androidエミュレータを選択できます。未指定でデフォルトのものが起動します。

```bash
# iOSの場合
$ sfdx force:lightning:lwc:preview -p iOS -n c/lwcServerTest
# Androidの場合
$ sfdx force:lightning:lwc:preview -p Android -n c/lwcServerTest -t "Pixel XL API 29"
```

## 2. 確認する

サンプルコードのカルセールが確認できますね。

![スクリーンショット 2022-12-10 3.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/71a91ebb-39b7-8bd6-a656-bc41c1b9f706.png)

1枚目のカルーセル画像を別の画像に差し替えてみます


![名称未設定_AdobeExpress (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445600/cb600b91-aee6-6f51-930a-139481e37a1f.gif)


iOSシミュレータにも反映されました。

# 最後に

LWC ローカル開発サーバ(ベータ)を使ってみました！
LWCを開発するのであれば、効率upのためにも必須な機能なのではないのでしょうか？
初回の公開から結構経っているので早くベータから正式になってほしいですね。

https://www.npmjs.com/package/@salesforce/lwc-dev-server?activeTab=versions

# 参考

https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.mobile_extensions

https://developer.salesforce.com/tools/vscode/ja/localdev/set-up-lwc-local-dev