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

学習の目的

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

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

エキスパートから直接学べることをご存知でしたか? この動画で、このプロジェクトのトピックについての詳細をご覧ください。

Lightning Web コンポーネントと呼ばれる、この最新のプログラミングモデルについて学習したので、次は独自の Web コンポーネントを構築します。まずツールがいつくか必要です。木の梁に釘を打つために金槌が必要であるように (あなたに超人的な力があり、金槌がなくても釘を打てるのではない限り)、Lightning Web コンポーネントを記述するにはツールが必要です。 

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

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

Salesforce CLI

他の多くのプログラミング言語やモデルと同様に、Salesforce にはコマンドラインインーターフェース (CLI) が含まれています。npm や yarn、gradle、または maven を使用したことがあれば、Salesforce CLI には見覚えがあることでしょう。単に Salesforce の開発タスク用にカスタマイズされているだけです (これらの略語がアルファベットパスタ入りのスープのように見えたとしても問題ありません)。

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

Salesforce CLI がすでにインストールされている場合は、このセクションをスキップできます。

  1. 該当するオペレーティングシステムのリンクを使用して Salesforce CLI をダウンロードします。
    OS
    インストーラへのリンク
    macOS
    https://sfdc.co/sfdx_cli_osx
    Windows 32-bit
    https://sfdc.co/sfdx_cli_win
    Windows 64-bit
    https://sfdc.co/sfdx_cli_win64
    Debian/Ubuntu 64
    https://sfdc.co/sfdx_cli_linux
    マニフェストにあるいずれかの URL からアーカイブをダウンロードして抽出し、./install スクリプトを実行します。
    Debian/Ubuntu x86
    https://sfdc.co/sfdx_cli_linux_x86
    マニフェストにあるいずれかの URL からアーカイブをダウンロードして抽出し、./install スクリプトを実行します。
  2. ダウンロードしたインストーラを実行します。
  3. インストール後、コマンドラインプロンプトを開きます (Windows または Linux では cmd、MacOS では Terminal)。
  4. 次のコマンドを実行して正しくインストールされたことを確認します。
    sfdx plugins --core
    次のように表示されます。

Salesforce CLI プラグインのターミナル出力。

salesforcedx プラグインは、バージョン 45.x.x 以降として表示されます。

これで 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 をインストールしてください。 

  1. 使用しているオペレーティングシステム用の Visual Studio Code の最新バージョンをダウンロードしてインストールします。すでに Visual Studio Code がインストールされている場合は、再インストールする必要はありません。
  2. Visual Studio Code を起動します。
  3. サイドバーにある拡張機能を表す Visual Studio Code の左サイドバーの拡張機能セレクタ アイコンをクリックします。
  4. 検索ボックスに「lightning web components」と入力します。利用可能な拡張機能のリストが表示されます。
    Visual Studio Code 内の Salesforce 拡張機能のリスト
  5. [Lightning Web Components (Lightning Web コンポーネント)] 拡張機能の横にある [Install (インストール)] をクリックします。
  6. 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 を有効にしたら、無効にすることはできません。

  1. Trailhead Playground を起動します。
  2. 設定ギアアイコン をクリックして、[Setup (設定)] を選択します。
  3. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに「Dev Hub」と入力し、[Dev Hub] を選択します。
  4. Dev Hub を有効にするには、[Enable (有効化)] をクリックします。

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

設定の確認は行いません。[Verify Step (ステップを確認)] をクリックして、次のステップに進みます。