開発ツールのインストール

学習の目的

このプロジェクトでは、次のことを行います。

• Lightning Web コンポーネントを作成して使用するために、推奨される開発者ツールをインストールする。
  
• Lightning Web コンポーネントを作成する。
  
• 提供された開発者ツールを使用してコード内のエラーを修正する。
  
• レコードレイアウトを設定して Lightning Web コンポーネントを表示する。
  
• Salesforce 組織でローカル開発を有効にする。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Lightning Web コンポーネントと呼ばれる、このプログラミングモデルについて学習したところで、次は独自の Web コンポーネントを構築します。まず、Lightning Web コンポーネントを記述するツールが必要です。 

Lightning Web コンポーネントはどのテキストエディターでも作成できますが、その場合は特別なツールセットが提供するサポートは得られません。アプリケーションに Lightning Web コンポーネントを組み込もうとしている経験豊富な Salesforce 開発者であれば、ツールチェーンに新しいツールを取り入れると、より一層の成功につながります。Salesforce 開発の経験がなく、Lightning Web コンポーネントを初めて構築しようとしている方は、Salesforce プロジェクトでの作業に適切なツールチェーンに慣れ親しむことをお勧めします。

Lightning Web コンポーネントは、最新の Web 標準に基づいているため、その関連ツールが現在 Web 開発者の間で人気のツールを基盤に構築されているのは理に適っています。

新しい Trailhead Playground を作成する

このプロジェクト用に、新しい Trailhead Playground を作成する必要があります。このページの一番下までスクロールして Playground 名をクリックし、[Create Playground (Playground を作成)] をクリックします。新しい Trailhead Playground を作成するには、通常 3、4 分かかります。

注意: 必ず新しい Trailhead Playground を使用してください。既存の組織または Playground を使用すると、このプロジェクトの手順を正常に完了できない可能性があります。

Salesforce CLI を設定する

他の多くのプログラミング言語やモデルと同様に、Salesforce にはコマンドラインインターフェース (CLI) が含まれています。npm や Yarn、Gradle、または Maven を使用したことがあれば、Salesforce CLI には見覚えがあるのではないでしょうか。唯一の違いは Salesforce の開発タスク用にカスタマイズされているということです。

Salesforce CLI では、コードの取得やプッシュ、データの操作など、さまざまな方法で Salesforce 環境を操作できます。CLI はいくつかのプラグインで構成されています。これらのプラグインは、重要な特定の機能を提供します。たとえば、plugin-org プラグインでは、スクラッチ組織の作成など、Salesforce 組織を管理する機能が提供されます。

豆知識: Salesforce CLI は 100% オープンソースです。ソースコードを表示できるだけでなく、新機能に貢献することもできます。含まれているプラグインやそのリポジトリへのリンクのリストは、Salesforce CLI Status (Salesforce CLI 状況) ページを参照してください。 

インストール

Salesforce CLI がすでにインストールされている場合は、このセクションをスキップできます。インストールについては、次の手順に従うか、『Salesforce CLI 設定ガイド』の詳細な説明を参照してください。

1. https://developer.salesforce.com/tools/salesforcecli から CLI をインストールします。
   
2. コマンドラインから sf update というコマンドを実行して、CLI が適切にインストールされていて最新バージョンであることを確認します。
3. @salesforce/cli:Updating CLI… のように出力が表示されます。
   

これで Salesforce CLI が設定されました。簡単でしたね。

ローカル開発をインストールする

ローカル開発は、ブラウザーで Lightning Web コンポーネントのリアルタイムプレビューを実行できる Salesforce CLI ツールです。コンポーネントをローカルで編集するとプレビューが自動的に更新されるため、コードをリリースしたり、ブラウザーページを手動で更新したりする必要はありません。

この機能は、Lightning Experience アプリケーション (デスクトップと Salesforce モバイルアプリケーション) で正式リリースされています。スクラッチ組織でもローカル開発を有効にできます。現時点では、Experience Cloud Lightning Web Runtime サイトではベータです。

インストール

ローカル開発をインストールする前に、Salesforce CLI をインストールする必要があります。次に、コマンドラインで次のコマンドを実行してスクラッチ組織または Sandbox 組織にローカル開発をインストールします。

sf plugins install @salesforce/plugin-lightning-dev@prerelease

今後のリリースの本番組織を使用する場合は、コマンドラインから次のコマンドを実行してローカル開発の最新のインスタンスをインストールする必要があります。sf plugins install @salesforce/plugin-lightning-dev@latest

ただし、この Trailhead プロジェクトでは、プレリリースバージョンをインストールします。

Lightning Web コンポーネント開発の初心者の方は、ツールボックスの次のツール、IDE に進みます。

Visual Studio Code をダウンロードして設定する

Visual Studio Code は Salesforce 開発者に人気のあるコードエディターで、Windows、Linux、macOS で使用できる無料のオープンソースです。Visual Studio Code は Web 開発者の間で定着している IDE です。これは、Lightning Web コンポーネントの構築にも効果的な IDE なので、Salesforce では開発作業をさらに簡略化する Visual Studio Code 向け拡張機能を無料で提供しています。Salesforce Extension Pack も提供しました。この拡張機能パックは Lightning Platform での開発用に優れたツールを提供し、Apex、Visualforce、さらに Replay Debugger を使用するためのツールが含まれています。 

次の手順に従って Visual Studio Code と Salesforce Extension Pack をインストールします。 

1. 使用しているオペレーティングシステム用の Visual Studio Code の最新バージョンをダウンロードしてインストールします。すでに Visual Studio Code がインストールされている場合は、再インストールする必要はありません。
   
2. Visual Studio Code を起動します。
   
3. サイドバーの [Extensions (拡張機能)] () をクリックします。
   
4. Salesforce Extension Pack を検索し、[Install (インストール)] をクリックします。すでにインストールされている場合は、[Reload (再読み込み)] ボタンをクリックするだけです。
   
   
5. macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押して、コマンドパレットを開きます。コマンドパレットで sfdx と入力し、使用可能なコマンドの初期リストを表示します。
   

これで終わりです! 最初の Lightning Web コンポーネントを開発するために必要なツールをすべてインストールしました。

開発者ハブを有効化する

このプロジェクトでは、開発者ハブとして Trailhead Playground を使用し、スクラッチ組織で Lightning Web コンポーネントを作成します。でもその前に、開発者ハブとスクラッチ組織について説明しておきます。

スクラッチ組織は、新しいプロジェクト、新しい機能ブランチ、または機能テストを開始するときにすばやく準備できる、専用の設定可能な短期の Salesforce 環境です。

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

組織で Dev Hub を有効にしたら、無効にすることはできません。

1. Trailhead Playground を起動します。
   
2. [Setup (設定)] () をクリックして、[Setup (設定)] を選択します。
   
3. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに Dev Hub と入力し、[Dev Hub] を選択します。
   
4. スライダーをクリックして Dev Hub を有効にします。
   

これで終わりです。Lightning Web コンポーネントを有効にした Dev Hub を設定しました。また必要なツールをダウンロードしてインストールし、設定しました。次のステップではこれらのツールを使用して最初の Lightning Web コンポーネントを作成します。