こんにちは、co-meetingの町田です。
端末を選ばないポータブルな開発環境を作れるCodespaces | GitHubを使ってSalesforce開発をしてみました。

結果としては、SFDX開発に使えました！実用に際しては、従量課金制なのでお財布事情次第と言ったところです。

使用するモチベーション

GitHub Codespaces を使うことで得られる最大のメリットは、ブラウザのみで開発環境構築が完結することだと感じています。Mac, WindowsなどPCのOSやスペックに強く依存せず、ブラウザが快適に動くPCであれば、即座に開発に入ることができます。

GitHub Codespacesについて

まずは、公式ドキュメントのGitHub Codespaces の概要を見てどのようなものか確認してみます。

概要にある通り、GitHub CodespacesはGitHubリポジトリのソースを元にしてクラウドに開発環境が立ち上がります。開発環境の設定もGitHubリポジトリに含めることができるので、開発メンバー毎に同じ環境を作ることができ
ます（開発環境の設定は後ほど解説します）。

料金

従量課金制のサービスではありますが、各ユーザ毎に無料使用枠が設けられています。無料使用枠を超えた場合の料金は以下となっています。

拡張機能30個、ソースサイズ12MBのSFDXプロジェクトを快適に動かすためには8コアのマシンを選択する必要がありました。
週5日、1日5時間使用、8コアで試算してみると、1週間で18$かかるようです。 

それでは早速、SFDX開発に向けて動かしてみます。

GitHub Codespacesの有効化

すべてのユーザに無料枠が設けられているため、特に何もせず使えますが、GitHub組織のオーナーが支払いを行う場合は、Organization での GitHub Codespaces の有効化 - GitHub Docsに沿って、有効化する必要があります。

リポジトリを用意

既存のSFDXプロジェクトがない場合は、通常のリポジトリと同様にCreate a New Repositoryなどからリポジトリの作成を行ってください。詳細な手順については割愛します。

Codespaceを作成

リポジトリを開き、ファイルリスト右上のCodeからダイアログを開き、Create codespace on mainからCodespaceを作成します。

Codespaceが作成され、ブラウザ版VSCodeに接続されます。

マシンタイプの変更

Codespaceを作成後、作成されたコードスペースの三点リーダからマシンタイプを変更できます。
デフォルトで選択されている2コアでは、sfdxコマンドが快適に動作しないため、4コア以上のマシンを選択することを推奨します。

update codespaceボタンを押すと、ステータスが切り替わります。

開発環境の設定を追加

VSCodeのコマンドパレットから、 Codespaces: Add Devcontainer Configuration Files… を実行することで、インタラクティブに設定ファイルを作成できます。

新しく作る場合は下を、既存のものに変更を加えたい場合は上を選択します。今回は新しく作るので下を選択します。

ベースとなるイメージを決めます。今回はSFDX開発環境を作るので SFDX Project を選びます。

必要なライブラリを選択します。

Keep Defaultsはそのままの設定で使用。Configure Optionsは、ユーザでバージョンを指定できます。

ここまで来たら、Codespaces: Rebuild Containerを実行してリビルドしま
す。

SFDXプロジェクトの準備

以下の手順に沿って準備します。

 1. SFDX: プロジェクトを作成 を実行してSFDXプロジェクトをリポジトリに追加。
2. コマンドパレットから SFDX: Dev Hubを認証 でDevHub組織と接続。
3. SFDX: デフォルトのスクラッチ組織を作成 でスクラッチ組織を作成。
4. SFDX:  デフォルトの組織を開くで組織を開けるか確認。

コマンドラインでは以下のようになります。末尾の数字コメントは上記の箇条書きと対応してます。

sfdx project generate -d // 1
sfdx force:auth:device:login -a {OrgAlias} -d  // 2
sfdx force:org:create -f config/project-scratch-def.json -d // 3
sfdx force:org:open // 4

ここまでできたら、GitHub Codespaces上でSFDX開発を行う準備は完了です。

その他確認したこと

ここからは社内プロジェクトを動かすために確認したことです。

ローカルサーバーの公開

特に何もせず公開されていました。
ローカルサーバーをGitHub Codespacesで立ち上げると、ポートパネルに表示され、ローカルアドレスを開くことでローカルサーバーにアクセスできます。また、HTTPSとして公開することも可能でした。
Forwarding ports in your codespace - GitHub Docs

Nodeなどのバージョン指定方法

devcontainer.json の features にオプション指定することでコンテナビルド時に指定されたバージョンがインストールされます。

VSCode設定・拡張機能の管理

VSCode設定は、.vscode/settings.json, devcontainer.jsonのcustomizations.vscode.settings, VSCode Setting Syncのユーザ設定が適用されます。

VSCode拡張機能は、devcontainer.jsonのcustomizations.vscode.extensions、VSCode Setting Syncのプロファイルで設定されているものが、Codespaceを立ち上げた際にインストールされます。

また、拡張機能は拡張機能の歯車アイコンから Add to devcontainer.json で追加できます。

マシンパワーの節約

不要な拡張機能はなるべく減らすことでマシンパワーの節約ができそうです。VSCode Setting Syncのプロファイルを分けることで、個人でインストールしていた拡張機能の同期を減らすことができます。

おわりに

ポータブルな環境を持てると、端末トラブルでもすぐに復帰ができたり、気軽に環境を生成/破棄できるので、自由さがあるなーと思いました。
また、今回の開発環境の設定は、VSCodeのDevContainerという拡張機能でも使用することができますので、試してみてください。