MavensMateのサポートが終了した後も意外とそのまま使えていたので利用していたのですが、先日の最後のアップデートでご利用ありがとうございましたメッセージが表示されるようになりました。
![f:id:tyoshikawa1106:20190717204450p:plain f:id:tyoshikawa1106:20190717204450p:plain]()
ということでやろうと思いつつできていなかったVS Codeをつかった開発環境構築を試してみました。次の専用サイトが用意されているみたいです。
![f:id:tyoshikawa1106:20190717204816p:plain f:id:tyoshikawa1106:20190717204816p:plain]()
Salesforce Extensions for Visual Studio Code
リンク先からVisual Studio CodeとSalesforce Extensionsをインストールできます。
Visual Studio Code
![f:id:tyoshikawa1106:20190717205305p:plain f:id:tyoshikawa1106:20190717205305p:plain]()
Salesforce Extensions
![f:id:tyoshikawa1106:20190719073356p:plain 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 f:id:tyoshikawa1106:20190717205949p:plain]()
Javaの環境構築はいくつか種類があるみたいですが、データローダでも必要になったZuluを利用すればいいのかなと思います。
![f:id:tyoshikawa1106:20190717210345p:plain f:id:tyoshikawa1106:20190717210345p:plain]()
データローダでインストールしたときの記事はこちら。
SFDC:データローダv.46.0のインストールを試してみました - tyoshikawa1106のブログ
インストール後のバージョン確認は『java --version』でできます。
![f:id:tyoshikawa1106:20190717210619p:plain f:id:tyoshikawa1106:20190717210619p:plain]()
Javaの準備ができたので続いてSalesforce CLIの準備です。専用のダウンロードサイトが用意されています。
![f:id:tyoshikawa1106:20190719074412p:plain f:id:tyoshikawa1106:20190719074412p:plain]()
https://developer.salesforce.com/ja/tools/sfdxcli
Node.jsからインストール
専用のインストーラからインストールできますが、npmコマンドでインストールすることも可能です。
![f:id:tyoshikawa1106:20190717211135p:plain f:id:tyoshikawa1106:20190717211135p:plain]()
npmでやる場合はNode.jsのサイトからインストールできます。
![f:id:tyoshikawa1106:20190717211458p:plain f:id:tyoshikawa1106:20190717211458p:plain]()
Node.js
インストーラからインストールするとnodeとnpmの環境が用意できます。
![f:id:tyoshikawa1106:20190717212115p:plain:w300 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:20190717211750p:plain]()
![f:id:tyoshikawa1106:20190717211917p:plain f:id:tyoshikawa1106:20190717211917p:plain]()
Node経由でSalesforce CLIをインストールするとこんな感じ。salesforce-almというプラグインがインストールできなかったとWARNINGがでました。自分で追加でインストールできましたが、これが必要なのかはちょっと不明。
![f:id:tyoshikawa1106:20190717212933p:plain f:id:tyoshikawa1106:20190717212933p:plain]()
![f:id:tyoshikawa1106:20190717213606p:plain f:id:tyoshikawa1106:20190717213606p:plain]()
実際の検討のときは下記の手順で試していました。
- npmコマンドでsalesforce cliをインストール
- warningなどのメッセージがでたので追加でプラグインをインストール
- そもそもインストーラ自体が用意されていたことに気づく。
- 念の為インストーラからもインストール実行
Salesforce CLIのインストールはこんな感じ。下記のコマンドでインストールができているか確認できます。
$ sfdx --version
![f:id:tyoshikawa1106:20190722075318p:plain f:id:tyoshikawa1106:20190722075318p:plain]()
同じくプラグインのインストールも確認します。
$ sfdx plugins --core
![f:id:tyoshikawa1106:20190722075527p:plain f:id:tyoshikawa1106:20190722075527p:plain]()
詳細は開発者ガイドに記載されています。
![f:id:tyoshikawa1106:20190722075234p: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 f:id:tyoshikawa1106:20190722080148p:plain]()
Org Development Model with VS Code
実際に実行してみると・・・コマンドが見つかりませんでした。。何かしらの設定手順が漏れているみたいです。
![f:id:tyoshikawa1106:20190722080357p:plain f:id:tyoshikawa1106:20190722080357p:plain]()
Salesforce CLIが適用されていない気がする。
![f:id:tyoshikawa1106:20190722080606p:plain:w300 f:id:tyoshikawa1106:20190722080606p:plain:w300]()
検索してみたところ下記の情報がみつかりました。VS Codeのバージョンや拡張機能の問題の可能性がありました。。
![f:id:tyoshikawa1106:20190722080817p:plain 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 f:id:tyoshikawa1106:20190723075924p:plain]()
VS Codeを一旦終了して再起動。これで確認してみました結果、無事「SFDX: Create Project with Manifest」コマンドが選択できるようになりました。過去にインストールしていた拡張機能の影響で最新版のSalesforce Extensionsが適用されていなかったみたいです。
![f:id:tyoshikawa1106:20190723080108p:plain f:id:tyoshikawa1106:20190723080108p:plain]()
ひとまずこれで環境構築に成功しました。
Salesforceプロジェクトの作成
環境構築できたところで実際にプロジェクトを作成してみます。VS Codeを起動して下記のコマンドを実行します。
$ SFDX: Create Project with Manifest
![f:id:tyoshikawa1106:20190723191303p:plain f:id:tyoshikawa1106:20190723191303p:plain]()
コマンドを実行するとプロジェクト名の入力欄が表示されます。
![f:id:tyoshikawa1106:20190723191616p:plain f:id:tyoshikawa1106:20190723191616p:plain]()
続いてプロジェクトを作成するフォルダが求められます。
![f:id:tyoshikawa1106:20190723191749p:plain f:id:tyoshikawa1106:20190723191749p:plain]()
フォルダを選択すると以下のように必要なファイルが生成されます。
![f:id:tyoshikawa1106:20190723191822p:plain f:id:tyoshikawa1106:20190723191822p:plain]()
こんな感じの構成です。
![f:id:tyoshikawa1106:20190723191915p:plain f:id:tyoshikawa1106:20190723191915p:plain]()
プロジェクトの雛形が作成できたら続いてSalesforce組織と接続します。そのときの手順はこちらが参考になりました。
Salesforceプロジェクトと開発組織を関連付け
下記のコマンドを実行します。
$ SFDX: Authorize an Org
![f:id:tyoshikawa1106:20190723192723p:plain f:id:tyoshikawa1106:20190723192723p:plain]()
接続先のログインURLが聞かれます。(本番かSandboxかカスタムURLか)
![f:id:tyoshikawa1106:20190723193341p:plain f:id:tyoshikawa1106:20190723193341p:plain]()
組織の別名を登録できます。(空値で進めてよかったかも)
![f:id:tyoshikawa1106:20190723193429p:plain f:id:tyoshikawa1106:20190723193429p:plain]()
上記作業の後に自動でログインページに移動します。
![f:id:tyoshikawa1106:20190723193557p:plain f:id:tyoshikawa1106:20190723193557p:plain]()
接続したい組織のアカウントでログインすると認証ページが表示されます。
![f:id:tyoshikawa1106:20190723193635p:plain f:id:tyoshikawa1106:20190723193635p:plain]()
認証するとブラウザ側はそのままログイン後のページに移動しますが、VS Code側ではコンソールに接続成功のメッセージが表示されます。
![f:id:tyoshikawa1106:20190723193838p:plain f:id:tyoshikawa1106:20190723193838p:plain]()
コードの取得
manifestフォルダ内にpackage.xmlファイルがあるのですが、そのファイルに対して右クリックするとデータの取得とデプロイのメニューが追加されています。「SFDX: Retrieve Source from Org」を選択するとソースコードが取得できます。
![f:id:tyoshikawa1106:20190723194625p:plain f:id:tyoshikawa1106:20190723194625p:plain]()
これでclassやトリガなどpackage.xmlで指定したとおりにソースコードがダウンロードされます。今回試したときにファイル数が多かったためか崇徳したはずのclassファイルがVS Code上で表示されない現象が発生しましたがVS Codeを立ち上げ直したら問題なく表示されました。
![f:id:tyoshikawa1106:20190723195128p:plain f:id:tyoshikawa1106:20190723195128p:plain]()
コードのデプロイ
デプロイというかコードの保存の方法です。VS Codeでクラスやページなどのソースコードを変更した後は対象ファイルを右クリックして「Deploy Source to Org」から実行します。
![f:id:tyoshikawa1106:20190723200719p:plain f:id:tyoshikawa1106:20190723200719p:plain]()
実行後にSalesforce組織を確認したところ対象クラスが無事に更新されていました。
![f:id:tyoshikawa1106:20190723200829p:plain f:id:tyoshikawa1106:20190723200829p:plain]()
変更を組織に反映するのに毎回コマンドを実行するのは少し面倒と思ったのですが下記の手順で自動化できるみたいです。
「.vscode/settings.json」に"salesforcedx-vscode-core.push-or-deploy-on-save.enabled": trueと記述。
※デフォルトはfalseで記載されていました。
![f:id:tyoshikawa1106:20190723201320p:plain f:id:tyoshikawa1106:20190723201320p:plain]()
上記設定を反映後に試してみたところファイル保存時に自動で組織にアップされることを確認できました。
保存時のエラーチェック
保存時にエラーがある場合はPROBLEMSのタブで原因が表示されました。
![f:id:tyoshikawa1106:20190723201651p:plain f:id:tyoshikawa1106:20190723201651p:plain]()
その他ハマった話
今回のディレクトリの構成はこんな感じ。
![f:id:tyoshikawa1106:20190723202028p: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 f:id:tyoshikawa1106:20190723202422p:plain]()
ファイルのクローズ
Open FolderでファイルをEXPLOERに表示できますが、非表示にしたい場合は「File」→「Close Folder」で非表示(クローズ)にできます。
(最初エディタを閉じたら次開いたときにクリアされると思っていたので、残り続けて少し困りました。)
![f:id:tyoshikawa1106:20190723202651p:plain f:id:tyoshikawa1106:20190723202651p:plain]()
Apexテストについて
Test Focus on Apex Tests Viewでテストモードに切り替えられるみたいです。テストモードに切り替えておくとRun All Testが選択できるようになります。
![f:id:tyoshikawa1106:20190723203133p:plain f:id:tyoshikawa1106:20190723203133p:plain]()
実行結果はこんな感じで確認できます。
![f:id:tyoshikawa1106:20190723203340p:plain f:id:tyoshikawa1106:20190723203340p:plain]()
他にも知るべき機能があると思いますがひとまずこれで最低限の利用はできそうです。
Apexコードの作成
Createコマンドで作成できます。
![f:id:tyoshikawa1106:20190723203616p:plain f:id:tyoshikawa1106:20190723203616p:plain]()
![f:id:tyoshikawa1106:20190723203635p:plain f:id:tyoshikawa1106:20190723203635p:plain]()
![f:id:tyoshikawa1106:20190723203646p:plain f:id:tyoshikawa1106:20190723203646p:plain]()
![f:id:tyoshikawa1106:20190723203659p:plain f:id:tyoshikawa1106:20190723203659p:plain]()
ファイルができた後は一度保存による自動DeployするかDeployコマンドを実行することで組織に反映されます。
さいごに
以上がSalesforce Extensions for Visual Studio CodeによるSalesforceの開発環境の流れです。MavensMateとはだいぶ感覚がことなりますが、基本的には慣れの問題だと思います。プロジェクトのファイル構成は今後のSalesforceプロジェクトの雛形になっていくと思いますのでSalesforce Extensionsによる開発でやっていくのが良さそうです。