Github codespacesでフロントエンド開発
開発環境もクラウドに…
Github codespacesによって、開発環境すらクラウド環境に移行されました。恩恵としては、PCを固定した開発が不要になり、デバイスを跨いだ柔軟な開発がおこなえることでしょう。
これまでのチーム開発は 「個体差のあるローカル環境を整備して共通のコードを動かす」 ところを起点としていました。人のパソコンの中は（テレワーク下ではなおのこと）見えないので、開発業務の中で最も困難なフェーズがど頭に来ていたのです。
ブラウザ上で動くVSCode
起動はリポジトリTOPの「Code」ボタンからおこなえます。
立ち上がるとVSCodeとほぼ同じUIが表示されます。VSCode自体がChroniumベースで開発されているので、おそらく挙動もほぼ同じかと思います。
2種類のマシンタイプから選択
コア数の差で2パターンのマシンタイプを選択できます。コアが増えると価格も倍になるので、極力2コアを利用しようと思いますが、今後は選択肢が増えていきそうに思えます。
また、起動するマシンの詳細な設定もjsonで記述することができるようです。チームで開発環境を完全一致できるのがすばらしい恩恵です。
…とはいえ、標準的コンテナでもおおよその言語環境には対応しているかもしれません。
@ttaniguchi ➜ /workspaces/next-app (main) $ node -v
v20.4.0
@ttaniguchi ➜ /workspaces/next-app (main) $ npm -v
9.7.2
@ttaniguchi ➜ /workspaces/next-app (main) $ yarn -v
1.22.19
@ttaniguchi ➜ /workspaces/next-app (main) $ pnpm -v
8.6.6
@ttaniguchi ➜ /workspaces/next-app (main) $ ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]
@ttaniguchi ➜ /workspaces/next-app (main) $ gem -v
3.4.10
@ttaniguchi ➜ /workspaces/next-app (main) $ bundle -v
Bundler version 2.4.10
Manage Codespaces
https://{リポジトリURL}/codespaces に 一覧管理ページがあります。Codespacesの新規作成メニューからジャンプできるのですが、導線が分かりづらいので直接URLを叩いています。
フロントエンド開発におけるメリット
自身はフロントエンド開発を生業としていますが、その上で特に恩恵を受けるのが以下の機能です。
ローカルホストの起動をクラウド上でおこなえる
開発がローカルベースで進んでいるときは自身のPCブラウザのみでプロダクトのチェックをおこなっていました。デザイナーやPMへの共有にはホスティングが必要になり、開発系のオンラインサーバーが常時起動しています。
開発がクラウドベース化すると、ローカルホストで起動していたプロダクトをそのまま共有することができます！
コンテナ上で利用しているポートが一覧されます。
簡単にポートを公開することができ、他のメンバーにも共有することができます。
補足
エディタを閉じ、しばらく放置していたコンテナが勝手に終了しました。調べてみるとコンテナのライフサイクルが決まっており、エディタを閉じてから既定値では30分でコンテナも自動終了するようです。
常駐するような検証環境には向かないので、一時的なプレビューに用途が分けられそうではあります。
実機検証も捗る
UIチェックには最終的に実機での確認が重要になりますが、ローカルホストを端末で表示するのはなかなかハードルが高く、「PCのWiFiをアクセスポイントにして接続する」「優先ケーブルでつなぐ」「エミュレータで妥協する」などの方法で凌いでいました。
クラウドでおこなうことでローカルホストへの乗り入れがシームレスになり、検証のリアルタイム化も進みます。
（クラウド上で起動しているのにローカルホストと言うもの齟齬があるが…）
総括
技術の起源である開発作業のみクラウド化されず、ローカルクライアントに残っていたというのはなかなか不思議な現象ではありました。GitHubが口火を切り、開発作業もついにクラウド化が加速しそうです。
今後もひとつのスタイルにとらわれず、新しい開発スタイルを切り開き続けていきたいと思います。
Discussion