開発のワークフローには関係なく、コンポーネントの動作を見るためにはコードエディタ、リンティング、そして組織を設定する必要があります。
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 コンポーネントを開発できません。
Note
リンティングとは、コンパイル前の編集中のコードからエラーを見つけるプロセスです。リンティングは単なるスペルチェックではなく、アンチパターンから適切なパターンへと導いてくれます。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 ファイルを読んで、自分のコーディングニーズに適したレベルを選んでください。
Tip
Lightning Web セキュリティで実行するコンポーネントを開発する場合は、「Lightning Web セキュリティ用 ESLint ルールのインストール」を参照してください。
Developer Edition 組織にサインアップします。
Lightning Web コンポーネントは、スクラッチ組織でもそれ以外の組織でも開発できます。スクラッチ組織を作成するには、組織を Dev Hub として設定します。ローカル開発ではスクラッチ組織が必要です。
Salesforce CLI の動作は、スクラッチ組織とそれ以外の組織では若干変わります。プロジェクトを作成して「Salesforce DX ツールを使用した開発」のワークフローを調べます。
Winter ’23 以降、スクラッチ組織では、Lightning Web セキュリティがデフォルトで有効になります。詳細は、「スクラッチ組織での LWS の有効化および無効化」を参照してください。
Note
JavaScript コードのデバッグを容易にするため、組織でデバッグモードを有効化します。デバッグモードを有効化すると、フレームワークの JavaScript コードは縮小されないため、容易にコードを読んでデバッグを行えるようになります。また、デバッグモードでは、一部の警告やエラーでより詳細な出力が追加されます。
デバッグモードは、JavaScript を積極的に開発またはデバッグするユーザに対してのみ有効にします。デバッグモードを有効にしたユーザの Salesforce のパフォーマンスは低下します。
Debug Mode」と入力し、[デバッグモード] を選択します。関連トピック
The Japanese Summer '24 guide is now live
j