エディタ、リンタ、組織の設定

開発のワークフローには関係なく、コンポーネントの動作を見るためにはコードエディタ、リンティング、そして組織を設定する必要があります。

Lightning Web コンポーネントの開発には、好きなコードエディタを使用できます。

Visual Studio Code の Salesforce Extension Pack には、Salesforce CLI、Lightning コンポーネントフレームワーク、Apex、そして Visualforce との連携用に強力な機能が用意されていますので、このエディタの使用をお勧めします。

Visual Studio Code を使用する場合は、Salesforce Extension Pack と一緒にインストールしてください。

• Visual Studio Code (VS Code)
• Salesforce Extension Pack for Visual Studio Code (Visual Studio Code 向け Salesforce 拡張パック)

コードの書式設定には Prettier もお勧めします。VS Code では Prettier を拡張機能としてインストールできます。他のエディタについては、Prettier のドキュメントを参照してください。

リンティングとは、コンパイル前の編集中のコードからエラーを見つけるプロセスです。リンティングは単なるスペルチェックではなく、アンチパターンから適切なパターンへと導いてくれます。Salesforce では、Lightning Web Components のプログラミングにおけるミスを最小限に抑えるような ESLint ルールを作成しています。

Salesforce DX プロジェクトを使用している場合は、手動でリンティングを設定する必要はありません。「スクラッチ組織での開発」および「スクラッチ組織以外の組織での開発」を参照してください。

Salesforce DX プロジェクトを使用していない場合は、コマンドラインから ESLint ルールをインストールします。手順は github/salesforce/eslint-plugin-lwc リポジトリと github/salesforce/eslint-config-lwc リポジトリを参照してください。

Lightning Web セキュリティで実行するコンポーネントを開発する場合は、「Lightning Web セキュリティ用 ESLint ルールのインストール」を参照してください。

Developer Edition 組織にサインアップします。

• Developer Edition のサインアップフォーム

Lightning Web コンポーネントは、スクラッチ組織でもそれ以外の組織でも開発できます。スクラッチ組織を作成するには、組織を Dev Hub として設定します。ローカル開発ではスクラッチ組織が必要です。

Salesforce CLI の動作は、スクラッチ組織とそれ以外の組織では若干変わります。プロジェクトを作成して「Salesforce DX ツールを使用した開発」のワークフローを調べます。

JavaScript コードのデバッグを容易にするため、組織でデバッグモードを有効化します。デバッグモードを有効化すると、フレームワークの JavaScript コードは縮小されないため、容易にコードを読んでデバッグを行えるようになります。また、デバッグモードでは、一部の警告やエラーでより詳細な出力が追加されます。

デバッグモードは、JavaScript を積極的に開発またはデバッグするユーザに対してのみ有効にします。デバッグモードを有効にしたユーザの Salesforce のパフォーマンスは低下します。

1. Salesforce で、[設定] の [クイック検索] ボックスに「Debug Mode」と入力し、[デバッグモード] を選択します。
2. ユーザリストで、デバッグモードを有効にする必要のあるユーザを特定します。必要に応じて、標準リストビューコントロールを使用して組織のユーザを絞り込みます。
3. デバッグモードを有効にするユーザの横にある選択チェックボックスをオンにします。
4. [有効化] をクリックします。

関連トピック

• HTML テンプレートエラー
• Lightning Web コンポーネントのデバッグ