tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Salesforce Extensions for Visual Studio Codeを試してみました

MavensMateのサポートが終了した後も意外とそのまま使えていたので利用していたのですが、先日の最後のアップデートでご利用ありがとうございましたメッセージが表示されるようになりました。

f:id:tyoshikawa1106:20190717204450p:plain


ということでやろうと思いつつできていなかったVS Codeをつかった開発環境構築を試してみました。次の専用サイトが用意されているみたいです。
f:id:tyoshikawa1106:20190717204816p:plain

Salesforce Extensions for Visual Studio Code


リンク先からVisual Studio CodeとSalesforce Extensionsをインストールできます。

Visual Studio Code

f:id:tyoshikawa1106:20190717205305p:plain

Salesforce Extensions

f:id:tyoshikawa1106:20190719073356p:plain


Get Startedのページに環境構築に必要な情報が記載されています。下記を用意すれば良いみたいです。

  • Visual Studio Code
  • Java Platform, Standard Edition Development Kit
  • Salesforce CLI
  • Salesforce Extensions for Visual Studio Code


Java Platform, Standard Edition Development KitについてはJava Setupページに詳細が記載されていました。
f:id:tyoshikawa1106:20190717205949p:plain

Javaの環境構築はいくつか種類があるみたいですが、データローダでも必要になったZuluを利用すればいいのかなと思います。
f:id:tyoshikawa1106:20190717210345p:plain


データローダでインストールしたときの記事はこちら。

SFDC:データローダv.46.0のインストールを試してみました - tyoshikawa1106のブログ

インストール後のバージョン確認は『java --version』でできます。
f:id:tyoshikawa1106:20190717210619p:plain


Javaの準備ができたので続いてSalesforce CLIの準備です。専用のダウンロードサイトが用意されています。
f:id:tyoshikawa1106:20190719074412p:plain

https://developer.salesforce.com/ja/tools/sfdxcli

Node.jsからインストール

専用のインストーラからインストールできますが、npmコマンドでインストールすることも可能です。
f:id:tyoshikawa1106:20190717211135p:plain

npmでやる場合はNode.jsのサイトからインストールできます。
f:id:tyoshikawa1106:20190717211458p:plain

Node.js

インストーラからインストールするとnodeとnpmの環境が用意できます。
f:id:tyoshikawa1106:20190717212115p:plain:w300


Node.jsのバージョン指定やバージョンアップなどはnodebrewを使うと良いと思います。

Node:nodebrewでv4.2.1にアップデートしてみました - tyoshikawa1106のブログ


nodebrewからnode.jsをインストールすることもできます。コマンドはこちら。

$ nodebrew install-binary v10.16.0

f:id:tyoshikawa1106:20190717211750p:plain

f:id:tyoshikawa1106:20190717211917p:plain


Node経由でSalesforce CLIをインストールするとこんな感じ。salesforce-almというプラグインがインストールできなかったとWARNINGがでました。自分で追加でインストールできましたが、これが必要なのかはちょっと不明。
f:id:tyoshikawa1106:20190717212933p:plain

f:id:tyoshikawa1106:20190717213606p:plain


実際に手探りで試していたときは下記の手順で進めました。

  1. npmコマンドでsalesforce cliをインストール
  2. warningなどのメッセージがでたので追加でプラグインをインストール
  3. そもそもインストーラ自体が用意されていたことに気づく。
  4. 念の為インストーラからもインストール実行


Salesforce CLIのインストールはこんな感じ。下記のコマンドでインストールができているか確認できます。

$ sfdx --version

f:id:tyoshikawa1106:20190722075318p:plain


同じくプラグインのインストールも確認します。

$ sfdx plugins --core

f:id:tyoshikawa1106:20190722075527p:plain


詳細は開発者ガイドに記載されています。
f:id:tyoshikawa1106:20190722075234p:plain

Salesforce Developers


これでSalesforce CLIのインストールができました。環境構築で必要なものは用意できたと思います。次は実際にプロジェクト作成です。


Force.com IDEやMavensMateと同じように開発する方法は「Org Development Model with VS Code」のページに記載されているようです。VSCodeで下記のコマンドを実行してプロジェクトを作成すればいいようです。(コマンド実行のボックスはCmd+Shift+Pで表示できます。)

> SFDX: Create Project with Manifest

f:id:tyoshikawa1106:20190722080148p:plain

Org Development Model with VS Code


実際に実行してみると・・・コマンドが見つかりませんでした。。何かしらの設定手順が漏れているみたいです。
f:id:tyoshikawa1106:20190722080357p:plain

Salesforce CLIが適用されていない気がする。
f:id:tyoshikawa1106:20190722080606p:plain:w300


検索してみたところ下記の情報がみつかりました。VS Codeのバージョンや拡張機能の問題の可能性がありました。。
f:id:tyoshikawa1106:20190722080817p:plain

salesforcedx - SFDX: create project using manifest not available - Salesforce Stack Exchange

試したこと

①VS Codeの初期化
VS Codeの再インストールを行いました。インストールした拡張機能も下記のコマンドで削除してみました。

※.vscodeフォルダを削除するコマンド。気軽に実行しないほうがいいやつ
$ rm -rf .vscode

ENABLEDにSalesforce Extensions Packの機能だけがインストールされた状態。
f:id:tyoshikawa1106:20190723075924p:plain


VS Codeを一旦終了して再起動。これで確認してみました結果、無事「SFDX: Create Project with Manifest」コマンドが選択できるようになりました。過去にインストールしていた拡張機能の影響で最新版のSalesforce Extensionsが適用されていなかったみたいです。
f:id:tyoshikawa1106:20190723080108p:plain


ひとまずこれで環境構築に成功しました。

Salesforceプロジェクトの作成

環境構築できたところで実際にプロジェクトを作成してみます。VS Codeを起動して下記のコマンドを実行します。

$ SFDX: Create Project with Manifest

f:id:tyoshikawa1106:20190723191303p:plain


コマンドを実行するとプロジェクト名の入力欄が表示されます。
f:id:tyoshikawa1106:20190723191616p:plain


続いてプロジェクトを作成するフォルダが求められます。
f:id:tyoshikawa1106:20190723191749p:plain


フォルダを選択すると以下のように必要なファイルが生成されます。
f:id:tyoshikawa1106:20190723191822p:plain


こんな感じの構成です。
f:id:tyoshikawa1106:20190723191915p:plain


プロジェクトの雛形が作成できたら続いてSalesforce組織と接続します。そのときの手順はこちらが参考になりました。

Salesforceプロジェクトと開発組織を関連付け

下記のコマンドを実行します。

$ SFDX: Authorize an Org

f:id:tyoshikawa1106:20190723192723p:plain


接続先のログインURLが聞かれます。(本番かSandboxかカスタムURLか)
f:id:tyoshikawa1106:20190723193341p:plain


組織の別名を登録できます。(空値で進めてよかったかも)
f:id:tyoshikawa1106:20190723193429p:plain


上記作業の後に自動でログインページに移動します。
f:id:tyoshikawa1106:20190723193557p:plain


接続したい組織のアカウントでログインすると認証ページが表示されます。
f:id:tyoshikawa1106:20190723193635p:plain


認証するとブラウザ側はそのままログイン後のページに移動しますが、VS Code側ではコンソールに接続成功のメッセージが表示されます。
f:id:tyoshikawa1106:20190723193838p:plain

コードの取得

manifestフォルダ内にpackage.xmlファイルがあるのですが、そのファイルに対して右クリックするとデータの取得とデプロイのメニューが追加されています。「SFDX: Retrieve Source from Org」を選択するとソースコードが取得できます。
f:id:tyoshikawa1106:20190723194625p:plain


これでclassやトリガなどpackage.xmlで指定したとおりにソースコードがダウンロードされます。今回試したときにファイル数が多かったためか崇徳したはずのclassファイルがVS Code上で表示されない現象が発生しましたがVS Codeを立ち上げ直したら問題なく表示されました。
f:id:tyoshikawa1106:20190723195128p:plain

コードのデプロイ

デプロイというかコードの保存の方法です。VS Codeでクラスやページなどのソースコードを変更した後は対象ファイルを右クリックして「Deploy Source to Org」から実行します。
f:id:tyoshikawa1106:20190723200719p:plain


実行後にSalesforce組織を確認したところ対象クラスが無事に更新されていました。
f:id:tyoshikawa1106:20190723200829p:plain


変更を組織に反映するのに毎回コマンドを実行するのは少し面倒と思ったのですが下記の手順で自動化できるみたいです。
「.vscode/settings.json」に"salesforcedx-vscode-core.push-or-deploy-on-save.enabled": trueと記述。
※デフォルトはfalseで記載されていました。

f:id:tyoshikawa1106:20190723201320p:plain


上記設定を反映後に試してみたところファイル保存時に自動で組織にアップされることを確認できました。

保存時のエラーチェック

保存時にエラーがある場合はPROBLEMSのタブで原因が表示されました。
f:id:tyoshikawa1106:20190723201651p:plain

その他ハマった話

今回のディレクトリの構成はこんな感じ。
f:id:tyoshikawa1106:20190723202028p:plain

VS Codeを開き直したときにOpen Folderでフォルダを選択するさいに上記のmyappフォルダを選択したところ、右クリックでSFDXメニューが表示されなくなりました。上記の場合はforce-appフォルダなどの一階層上のファイルを選択する必要がありました。

もしSFDXメニューが表示されなくなったりしたときにはOpenFolderで選択したディレクトリを見直すと解決するかもしれないです。

VS Codeの設定

minimap

VS Codeの右側にminimapが表示されますが非表示にしたい場合は「view」→「hide minimap」で非表示にできます。表示する場合は「show」を選択します。
f:id:tyoshikawa1106:20190723202422p:plain

ファイルのクローズ

Open FolderでファイルをEXPLOERに表示できますが、非表示にしたい場合は「File」→「Close Folder」で非表示(クローズ)にできます。
(最初エディタを閉じたら次開いたときにクリアされると思っていたので、残り続けて少し困りました。)
f:id:tyoshikawa1106:20190723202651p:plain

Apexテストについて

Test Focus on Apex Tests Viewでテストモードに切り替えられるみたいです。テストモードに切り替えておくとRun All Testが選択できるようになります。
f:id:tyoshikawa1106:20190723203133p:plain


実行結果はこんな感じで確認できます。
f:id:tyoshikawa1106:20190723203340p:plain


他にも知るべき機能があると思いますがひとまずこれで最低限の利用はできそうです。


Apexコードの作成

Createコマンドで作成できます。
f:id:tyoshikawa1106:20190723203616p:plain

f:id:tyoshikawa1106:20190723203635p:plain

f:id:tyoshikawa1106:20190723203646p:plain

f:id:tyoshikawa1106:20190723203659p:plain


ファイルができた後は一度保存による自動DeployするかDeployコマンドを実行することで組織に反映されます。

さいごに

以上がSalesforce Extensions for Visual Studio CodeによるSalesforceの開発環境の流れです。MavensMateとはだいぶ感覚がことなりますが、基本的には慣れの問題だと思います。プロジェクトのファイル構成は今後のSalesforceプロジェクトの雛形になっていくと思いますのでSalesforce Extensionsによる開発でやっていくのが良さそうです。