LWC最初の1歩と+α

9473 ワード
Salesforce lwc Salesforce テキストリンク

この記事は Salesforce Platform Advent Calendar 2020 - Qiita 第19日目の投稿および
Salesforce 開発者向けブログ投稿キャンペーンへのエントリー記事です。

最初の1歩

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

とりあえずLWCに触ってみたい

LWC Playground

なにはともあれ開発環境構築

クイックスタート: Lightning Web コンポーネント | Salesforce Trailhead

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

$ sfdx update

やっぱりリファレンスの確認は大事だよね

Lightning Web Components Dev Guide - リファレンス

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

+α

prettier

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

前提条件

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

インストール

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

$ npm install -D prettier

設定

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

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

利用方法

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

$ npm run fmt

カスタマイズ

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

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

詳細な設定値はPrettier公式サイトをご確認ください

jest

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

インストール

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

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

設定

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

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 テストの記述- リファレンス

利用方法

もちろんコマンド一発！

$ npm run test

コードカバレッジ付き

$ 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年のニュース以来、音沙汰がないような...