LWC最初の1歩と+α

この記事は [Salesforce Platform Advent Calendar 2020 - Qiita](https://qiita.com/advent-calendar/2020/salesforce-platform) 第19日目の投稿および
[Salesforce 開発者向けブログ投稿キャンペーン](https://developer.salesforce.com/jpblogs/2020/11/salesforce-developers-blog-4th/)へのエントリー記事です。

## 最初の1歩
書きたいことはほぼ全て私が書くよりも優れたドキュメントがあるのでリンクを載せておきます
本当に書きたいことは+α

### とりあえずLWCに触ってみたい
[LWC Playground](https://developer.salesforce.com/docs/component-library/tools/playground)

### なにはともあれ開発環境構築
[クイックスタート: Lightning Web コンポーネント \| Salesforce Trailhead](https://trailhead.salesforce.com/ja/content/learn/projects/quick-start-lightning-web-components?trail_id=build-lightning-web-components)

LWCクイックスタートではCLIのインストールにインストーラーへのリンクが載っていますが、個人的には非推奨です
sfdx cliは頻繁にアップデートされるためアップデートの度にインストーラーのダウンロード→インストールを繰り返すのはめんどくさいです
なので、[Homebrew](https://brew.sh/index_ja)またはnpmを利用したインストールをおすすめします
CLIのバージョンアップがコマンド一発でできるので積極的に利用するべきです

```bash
$ sfdx update
```

### やっぱりリファレンスの確認は大事だよね
[Lightning Web Components Dev Guide - リファレンス](https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.reference)

LWCでできることのすべてが載っている日本語リファレンスです
これさえ見ておけばほぼOKなページです

## +α
### prettier
フォーマッタです
おおよその人が複数人で開発していると思います
そんなとき、ifと()の間にはスペースを入れる or 入れない、インデントはスペースで○文字等のコーディング規則を人力で揃えることは全くの無駄です
機械的にできることは機械にまかせてしまいましょう。というのが **prettier** です
prettierはJavaScriptだけでなくHTML,Json,CSS,Apex(要プラグイン)等々に対応しているので積極的に導入しましょう

**前提条件**

- node.jsのインストール
- package.jsonの作成

**インストール**

npmからインストールします
`-D` は開発時のみに利用するオプション

```bash
$ npm install -D prettier
```

**設定**

package.jsonのscriptsセクションに下記を追記
`**/*.js`部分を`**/*.{js,html,json,css,cls}`へ変更するればそれぞれの拡張子に合わせてフォーマットしてくれます

```json:package.json
...
"scripts": {
  "fmt": "prettier --write **/*.js"
},
...
```

**利用方法**

コマンド一発でフォーマットしてくれます
便利:relaxed:

```bash
$ npm run fmt
```

**カスタマイズ**

チームによっては標準では使いにくい、標準がオカシクね？と思うところは必ずあります
設定ファイルを配置することでprettierではその部分を柔軟に対応できます
プロジェクトのルートに`.prettierrc`ファイルを作成
Windows環境ではファイル名を`.prettierrc.`とすれば作成できるハズ
例えば下記のように記入することでカスタマイズできます

```json:.prettierrc
{
		"printWidth": 100,
		"trailingComma": "es5",
		"tabWidth": 2,
		"semi": true,
		"singleQuote": true,
    "endOfLine": "lf"
}
```

詳細な設定値は[Prettier公式サイト](https://prettier.io/docs/en/options.html)をご確認ください

### jest
テストです
Salesforceのコード開発＝テスト必須ですが、実はLWCに限っては必須ではありません
テストを書かなくてもリリースできてしまいます
しかし、世のSalesforce開発者は気持ち悪くてしかたないですよね
ということで **jest** を使ってテストをしましょう！

**インストール**

お馴染みのnpmからインストールします

```bash
$ npm install -D @salesforce/sfdx-lwc-jest
```

**設定**

prettier同様にpackage.jsonに追記します
今回は`test:cov`も追加しました
これを実行するとコードカバレッジが表示されるためどこがテストできていないかがよくわかり便利です

```json:package.json
...
"scripts": {
    "test": "sfdx-lwc-jest",
    "test:cov": "sfdx-lwc-jest --coverage",
}
...
```

**テストファイル**

手動での追加は間違うことが多々あるのでコマンドで追加します

```
$ sfdx force:lightning:lwc:test:create -f force-app/main/default/lwc/fooComponent/fooComponent.js
```

コマンド実行後は下記のようなディレクトリ構成になります
dataディレクトリにはテストで利用するサンプルデータ等を配置します

```
fooComponent
├── __tests__
│  ├── data
│  │  └── getAcountList.json
│  └── fooComponent.test.js
├── fooComponent.html
├── fooComponent.js
└── fooComponent.js-meta.xml
```

**テストの書き方**

基本的には従来のApexのテストと同様です
テストデータを読み込み、コンポーネントを実行し、アサートで検証する流れになります
具体的な書き方は下記URLをご参加ください
~~参照ばっかじゃねーかとは言わないで~~
[Lightning Web コンポーネント用の Jest テストの記述- リファレンス](https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.unit_testing_using_jest_create_tests)

**利用方法**

もちろんコマンド一発！:runner_tone5:

```bash
$ npm run test
```

コードカバレッジ付き

```bash
$ npm run test:cov
```

### Visual Studio Code(VSCode)
エディタです
一昔前はEclipseでしか開発できなかったSalesforceですが、少し前から(2018年ぐらい？)は **Visual Studio Code(VSCode)** での開発が推奨されています
それにともない便利な拡張機能が提供されています
また、入れておくと便利な拡張機能を紹介します

**Salesforce Extension Pack**
Salesforce開発においては必須の拡張機能です

**prettier**
上記のprettierをVSCode上で便利に使う拡張機能です
コード保存時に自動実行など設定が可能です
実行を忘れてコミット等を防ぐことができます

**Live Share**
例のウィルスでリモートワークが進んでいますが、反面、ペアプロやみんなで集まってコードレビューがし難くなりました
画面共有でエディタを写してしていても「○行目の〜をxxにして」「あと3行下」「xxっていうメソッドがあって〜」等、手間がかかります
Live Shareを利用すれば複数人で同じコードを一斉に閲覧・編集できるのでコードレビューの効率が爆上げできます

**Bracket Pair Colorizer 2**
JSはどうしても括弧が増えるので対応を追うのが大変になります
この拡張機能は対応する括弧を色付けしてくれるため脳内メモリが節約できます

---
**余談**
Salesforceの案件から外れて半年が立ちましたが、振りかってみるとLWCの開発はやっぱり楽しいですね
LWCを利用したAppExchangeも作ってみようかな
ところで **Evergreen** はいつリリースされるのでしょうか？
2019年のニュース以来、音沙汰がないような...