スクラッチ組織での開発

スクラッチ組織で Lightning Web コンポーネントを開発できます。スクラッチ組織とは、特定の機能を使用するために作成できる短期的な Salesforce 環境です。スクラッチ組織へのリリースには、変更されたファイルのみが含まれます。

スクラッチ組織のコンポーネントを作成する前に、「エディター、リンター、組織の設定」「Salesforce CLI のインストール」を参照してください。

Salesforce DX プロジェクトには特定の構造と設定ファイルがあります。設定ファイルは、ディレクトリを Salesforce DX プロジェクトとして指定します。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: プロジェクトの作成] を選択します。

このコマンドはコマンドラインでも実行できます。

ESLint は、バックグラウンドで動作し、コーディング中に問題を探すプログラムです。一連のルールに対してコードを分析します。これらのサーバーレスルールには、ベストプラクティス、ガードレール、エラーを含めることができます。プロジェクトのサーバーレスルールを設定できます。コードがルールに違反すると、波線がそのコードの下に表示されます。コードの上にマウスポインターを置くと、そのルールと修正案が表示されます。

  1. Lightning Web Components の ESLint ルールをインストールするには、Salesforce DX プロジェクトで直接次のコマンドを実行します。

    問題が発生した場合は、プロジェクトの package.json ファイルが salesforcedx-templates package.json ファイルと一致することを確認してください。たとえば、.eslintignore ファイルは不要になり、package.json"lint": "eslint **/{aura,lwc}/**/*.js" スクリプトに置き換えられました。このスクリプトは lwc および aura フォルダー内にある JS ファイルに対してのみ lint を実行します。

  2. サーバーレスには 3 つの設定レベルがあります。eslint-config-lwc の README ファイルを読んで、自分のコーディングニーズに適したレベルを選んでください。プロジェクトの /force-app/main/default/lwc/.eslintrc.json ファイルで、設定レベルを設定します。

    プロジェクトにこのファイルがない場合は、salesforcedx-templates からこのファイルをコピーし、/force-app/main/default/lwc フォルダーに貼り付けます。

  3. サーバーレスを実行するには、プロジェクトに少なくとも 1 つの Lightning Web コンポーネントが必要です。

Lightning Web セキュリティは、追加の ESLint ルールを提供します。詳細は、「Lightning Web セキュリティ用の ESLint ルールのインストール」を参照してください。

Dev Hub は、あなたとチームがスクラッチ組織を作成および管理するために使用するメインの Salesforce 組織です。

  1. [設定] から、[クイック検索] ボックスに「Dev Hub」と入力し、[Dev Hub] を選択します。

    [設定] メニューに Dev Hub が表示されない場合、組織がサポート対象のエディションのいずれかであることを確認してください。

  2. Dev Hub を有効にするには、[有効化] をクリックします。Dev Hub は一度有効化すると、無効化できません。

詳細は、「Salesforce DX 設定ガイド: 組織での Dev Hub の有効化」を参照してください。

スクラッチ組織を作成するには、Dev Hub 組織の認証が必要です。このコマンドを実行すると、Salesforce ログインページがブラウザーで開きます。Dev Hub のユーザー名とパスワードを入力します。認証は 1 回だけでよく、プロジェクトの作業を行うたびに認証する必要はありません。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: Dev Hub の認証] を選択します。

このコマンドはコマンドラインでも実行できます。

"LWC-Hub" は、Dev Hub の別名で、他の Salesforce CLI コマンドで使用できます。好きな別名を作成できます。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織の作成] を選択します。

このコマンドはコマンドラインでも実行できます。

"LWC" は、スクラッチ組織の別名で、他の Salesforce CLI コマンドで使用できます。好きな別名を作成できます。

スクラッチ組織を作成するには、スクラッチ組織定義ファイルを指定します。この例では、デフォルトのスクラッチ組織定義ファイル project-scratch-def.json を使用します。

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

force-app/main/default/lwc フォルダー内に Lightning Web コンポーネントを作成します。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: Lightning Web コンポーネントの作成] を選択します。

このコマンドはコマンドラインでも実行できます。

Lightning Web コンポーネントを含む新しいソースコードをスクラッチ組織に転送してテストする準備ができました。転送前に必ず作業内容を保存してください。

ソースコードをスクラッチ組織に転送すると、変更されたファイルのみが転送されます。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織へのソースの転送] を選択します。

このコマンドはコマンドラインでも実行できます。

このコマンドはコマンドラインでも実行できます。

VS Code で Command + Shift P を押し、「sfdx」と入力して [SFDX: デフォルトスクラッチ組織を開く] を選択します。

このコマンドはコマンドラインでも実行できます。

変更内容を Salesforce で見るには、ソースコードを組織に転送してブラウザーをハード更新します。

関連トピック