Skip to main content
TrailblazerDX, the ultimate AI learning event is heading back to San Francisco March 6-7, 2024. Register Now and save 35% with code T24DEYE424.

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

学習の目的

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

  • 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 はいくつかのプラグインで構成されています。これらのプラグインは、重要な特定の機能を提供します。たとえば、plugin-org プラグインでは、スクラッチ組織の作成など、Salesforce 組織を管理する機能が提供されます。

メモ

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

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

インストールの説明の詳細は、『Salesforce CLI Setup Guide (Salesforce CLI 設定ガイド)』を参照してください。

  1. https://developer.salesforce.com/tools/salesforcecli から CLI をインストールします。 
  2. CLI が正しくインストールされていることを確認し、最新版でコマンドラインから次のコマンドを実行して確認します。
    sf update
    @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 をインストールしてください。 

  1. 使用しているオペレーティングシステム用の Visual Studio Code の最新バージョンをダウンロードしてインストールします。すでに Visual Studio Code がインストールされている場合は、再インストールする必要はありません。
  2. Visual Studio Code を起動します。
  3. サイドバーにある拡張機能を表す Visual Studio Code の左サイドバーの拡張機能セレクター アイコンをクリックします。
  4. Salesforce Extension Pack を検索し、[Install (インストール)] をクリックします。すでにインストールされている場合は、[Reload (再読み込み)] ボタンをクリックしてください。
    Visual Studio Code での Salesforce Extension Pack の検索。
  5. 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 (ステップを確認)] をクリックして、次のステップに進みます。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる