[Visual Studio Code（VS Code）]という無償版が提供されており、この製品には、コードエディタ、ビルド自動化ツール、デバッガ、コード補完機能など、統合開発環境として必要なものが揃っており、拡張機能をインストールすることも可能となっています。

Salesforceの管理者メニューとして、ブラウザ上で開発が可能な「開発コンソール」が提供されていますが、正直使い勝手はあまり良いとは言えません。

また、2022年1月時点では、Lightning Web Component（LWC）の開発は、「開発コンソール」からは実行できないため、今回ご紹介するVisual studio codeなどの統合開発環境を用意する必要があります。

1.Visual Studio Codeのインストール

では、さっそくVisual Studio Codeをセットアップしていきましょう。今回はWindows10の環境へインストール

まずは、公式サイトへアクセスして、ご利用の端末に応じた実行ファイルをダウンロードします。

一番右のVisual Studio Codeの無料ダウンロードの選択リストから端末のOSに合わせたインストーラやパッケージをダウンロード

1.ダウンロードしたインストーラを実行します。　※Windows以外はOSに合わせたセットアップを実施してください。

2.セットアップウィザードが起動されたら使用許諾契約書の内容を確認し、同意する場合は、同意するにチェックを入れて次へ進みます。

※同意しない場合は、インストールできません。

3.続いて、セットアップオプションを選択します。

必要なものを追加で選択して、次へ進みます。

4.最後に[インストール]のボタンをクリックして、インストールを実行します。

5.インストールが成功したら終了となります。

インストール時にVisual Studio Codeを実行するを選択した場合は、以下の画面が起動されます。

2.Visual Studio Codeの初期セットアップ（Salesforce開発環境設定）

Visual studio codeのインストール後は、以下の作業を実施する必要があります。

1.ご自身のOS環境に対応したCLIインストーラをダウンロードします。以下のサイトから最新版をダウンロードします。

2.ダウンロードしたインストーラを実行します。（以下の画面が起動します）

コンポーネントはすべて選択した状態で[Next]ボタンをクリックしてください。

3.つぎにインストール先のフォルダを指定して、インストールボタンをクリックします。

4.インストールが成功したらウィザードを閉じます。

5.CLIのインストール後に、コマンドプロンプトを起動して、[sfdx update]と入力して実行します。

上記のようなメッセージが出ていればCLIが正常にインストールされ、パスが通って実行可能となっていることが確認できます。

CLIインストール後に、もう一度Visual studio codeを起動しましょう。Salesforceの開発ができるように必要な機能をインストールしていきます。

1.日本語化（Visual studio codeのメニューを日本語化）

以下、赤い枠で囲った拡張メニューをクリックして、検索欄に「japanese」を入れると[Japenese Language Pack for Visual Studio Code]表示されます。

これを選択して、インストールもしくは画面右下にインストールして再起動が表示されたら、それを実行しましょう。

すると以下のようにメニューが日本語化されます。

2.[Salesforce Extension Pack]のインストール

先ほどと同様に拡張メニューから「Salesforce Extension Pack」を選択して、インストールします。

上記パッケージには、以下9個のコンポーネントが含まれています。

• Salesforce CLI Integration
• Apex
• Apex Interactive Debugger
• Apex Replay Debugger
• Lightning Web Components
• Aura Components
• Visualforce
• SOQL
• SLDS Validator：Salesforce Lightning Design System (SLDS) Validator

1.VSCode画面で、Macの場合「Command ＋Shift ＋Pキー」、Windows または Linux の場合「Ctrl ＋Shift ＋Pキー」を押して、コマンドパレットを表示します。以下の画面の中央上部に表示されているのがコマンドパレット

2.コマンドパレット上で>のあとに「SFDX:Create Project」を入力して、Enterキーをクリックして「マニュフェストファイルを使用してプロジェクトを作成」→「標準テンプレート」を選択します。

3.標準のプロジェクトテンプレートを指定します。

4.プロジェクト名を入力します。（例ではNewProjectと入力）

5.最後にプロジェクトを作成するフォルダを指定します。

6.プロジェクトが作成され、Visual studio codeにプロジェクトのフォルダ配下のファイルが表示されます。

1.VSCode画面で、Macの場合「Command ＋Pキー」、Windows または Linux の場合「Ctrl ＋Pキー」を押すと、[検索パレット]が表示されます。

ここで、project-scratch-def.json と入力して実行してみましょう。するとファイルがエディタで表示されます。

2.上記の”OrgName”について、”Demo Company”となっていますが、開発するSalesforce組織に合わせて適切な名前に変更して保存しておきましょう。

つづいては、開発組織のメタデータへアクセスするため組織へ接続します。

3.VSCode画面で、Macの場合「Command ＋Shift ＋Pキー」、Windows または Linux の場合「Ctrl ＋Shift ＋Pキー」を押して、コマンドパレットを表示して、>のあとに「SFDX: Authorize an Org (SFDX: 組織を承認) 」を入力して、Enterキーをクリックします。

4.接続先の組織のURLを選択します。例では、Developerエディションへ接続するためプロジェクトのデフォルトを選択します。

※プロジェクトで利用する環境に合わせて適切なものを選択してください。

5.最後にエイリアスを入力しますが、変更しない場合はそのままEnterキーをクリックします。

6.Salesforce組織へのログイン認証画面が表示されるため、ユーザ名とパスワードを入力してログインします。

7.ログイン後、Visual studio codeからSalesforceへの認証が成功すると以下のメッセージが表示されます。

3.基本操作

Salesforce組織への接続が完了したあとは、Salesforceからメタデータを同期したり、Visual studio codeで作成したプログラムのデプロイやテスト実行、SOQLクエリの発行などが可能となります。

Apexクラス作成

1.VSCode画面で、Macの場合「Command ＋Shift ＋Pキー」、Windows または Linux の場合「Ctrl ＋Shift ＋Pキー」を押して、コマンドパレットを表示し、「Create Apex Class」と入力し、Apexクラスを作成メニューを選択します。

2.クラスのファイル名を入力します。（例では、ContactControllerとしました）

3.続いてApexクラスの保存先を指定します。※基本的には以下のデフォルトの場所で大丈夫です。

4.以下のクラスファイルが作成され、エディタで表示されます。

5.次に作成されたクラスを以下の内容で上書き保存します。

public with sharing class ContactController {
    public static List<Contact> getAllContacts() {
        return [SELECT Id,FirstName FROM Contact];
    }
}

保存して完了します。

SOQLクエリの実行

先ほど作成したContactControllerクラスの中には、以下のSOQLファイルが含まれていますが、開発環境へデプロイする前にSOQLの文法が正しいかどうか以下の手順で実行して確認することができます。

1.クラスファイルの中から、SOQLの構文を選択（強調表示）します。

2.続いて、コマンドパレットを表示して、「Execute SOQL Query with Currently Selected Text」を実行します。

3.次に「RESTAPIでクエリを実行」を選択して実行します。

4.実行した結果は、コンソールの出力（Output）に出力されます。以下のように実行されたSOQLの結果が表示されます。

Apexクラスを開発環境へリリース（デプロイ）

作成したApexクラスを開発環境へデプロイする手順は以下の通りです。

1.リリース対象（ここではさきほど作成したContactController）を選択して、右クリックメニューで「SFDX:組織へソースをデプロイ」を実行します。

2.実行結果はコンソールに出力されます。

補足

sfdx実行時に、CLIのUpdateの警告が表示された場合には、以下のコマンドを実行してCLIを最新化しておきましょう。

Windowsの場合、コマンドプロンプトを実行して以下のコマンドを実行します。

sfdx update

まとめ

今回は、セールスフォースの統合開発環境を構築する手順から簡単な使い方まで一気に説明しました。

今回説明した内容に関連するTrailheadモジュールがあるので、そちらも実施してポイントとモジュールも稼いでおきましょう。

サポーターさん

ブログランキングに参加しましたので、ご支援していただけると幸いです。

にほんブログ村