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

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

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

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

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

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

Salesforce 開発者コンソールでは Lightning Web コンポーネントを開発できません。

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

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

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

サーバーレスルールには 3 つの設定レベルがあります。eslint-config-lwc の README ファイルを読んで、自分のコーディングニーズに適したレベルを選んでください。

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

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

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

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

Winter ’23 以降、スクラッチ組織では、Lightning Web セキュリティがデフォルトで有効になります。詳細は、「スクラッチ組織での LWS の有効化および無効化」を参照してください。

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

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

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

関連トピック