開発ツールのインストール
学習の目的
このプロジェクトでは、次のことを行います。
- Lightning Web コンポーネントを作成して使用するために、推奨される開発者ツールをインストールする。
- Lightning Web コンポーネントを作成する。
- 提供された開発者ツールを使用してコード内のエラーを修正する。
- レコードレイアウトを設定して Lightning Web コンポーネントを表示する。
メモ
日本語で受講されている方へ
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 設定ガイド』の詳細な説明を参照してください。
-
https://developer.salesforce.com/tools/salesforcecli から CLI をインストールします。
- コマンドラインから
sf updateというコマンドを実行して、CLI が適切にインストールされていて最新バージョンであることを確認します。
-
@salesforce/cli:Updating CLI…のように出力が表示されます。
これで Salesforce CLI が設定されました。簡単でしたね。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 向け拡張機能を無料で提供しています。
次の手順に従って、Visual Studio Code をインストールしてください。
- 使用しているオペレーティングシステム用の Visual Studio Code の最新バージョンをダウンロードしてインストールします。すでに Visual Studio Code がインストールされている場合は、再インストールする必要はありません。
- Visual Studio Code を起動します。
- サイドバーの [Extensions (拡張機能)] (
) をクリックします。
- Salesforce Extension Pack を検索し、[Install (インストール)] をクリックします。すでにインストールされている場合は、[Reload (再読み込み)] ボタンをクリックするだけです。
- macOS の場合は Command+Shift+P、Windows または Linux の場合は Ctrl+Shift+P を押して、コマンドパレットを開きます。コマンドパレットで
sfdxと入力し、使用可能なコマンドの初期リストを表示します。
これで終わりです! 最初の Lightning Web コンポーネントを開発するために必要なツールをすべてインストールしました。
Salesforce Extension Pack も提供しました。この拡張機能パックは Lightning Platform での開発用に優れたツールを提供し、Apex、Visualforce、さらに Replay Debugger を使用するためのツールが含まれています。
開発者ハブを有効化する
このプロジェクトでは、開発者ハブとして Trailhead Playground を使用し、スクラッチ組織で Lightning Web コンポーネントを作成します。でもその前に、開発者ハブとスクラッチ組織について説明しておきます。
スクラッチ組織は、新しいプロジェクト、新しい機能ブランチ、または機能テストを開始するときに素早く準備できる、専用の設定可能な短期の Salesforce 環境です。
開発者ハブ (Dev Hub) は、あなたとチームがスクラッチ組織を作成および管理するために使用するメインの Salesforce 組織です。
組織で Dev Hub を有効にしたら、無効にすることはできません。
- Trailhead Playground を起動します。
- [Setup (設定)] (
) をクリックして、[Setup (設定)] を選択します。
- [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに「Dev Hub」と入力し、[Dev Hub] を選択します。
- スライダーをクリックして Dev Hub を有効にします。
これで終わりです。Lightning Web コンポーネントを有効にした Dev Hub を設定しました。また必要なツールをダウンロードしてインストールし、設定しました。次のステップではこれらのツールを使用して最初の Lightning Web コンポーネントを作成します。