Google製のクラウド開発環境 Project IDX が良い感じだった
はじめに
みなさんは普段、クラウド開発環境[1]（ブラウザベースの統合開発環境）を利用して開発していますか。私はまだ積極的に使っておらず VS Code や Cursor などローカルで済ませていますが、GitHub開発チームはCodespacesを使って商用開発している など、クラウド IDE を使った本格開発も一般的になりつつある印象です。
本記事のトピックである Project IDX（以下、IDX）は、2023年8月上旬に発表された Google が開発する実験プロジェクトで、マルチプラットフォーム開発のクラウド開発環境を提供します。
クラウド開発環境と言えば GitHub Codespaces や AWS Cloud9 などが有名ですが、本記事で紹介する IDX は Android エミュレータと iOS シミュレータが標準で備わっており、モバイル開発にも長けている点が嬉しいポイントです。
Google は長年にわたってマルチプラットフォームのアプリケーション開発に力を入れており、Angular(Ionic Framework)や Flutter がその代表例だと思います。IDX は、彼らが開発してきたこれらのフレームワークをブラウザでも利用できるようにすることでその特性を最大限活かし、マルチプラットフォーム開発を加速させることを目的にしています[2]。
8月の発表当初では Android エミュレータなどのモバイル環境が搭載されておらず見送っておりましたが、いつの間にか Android と iOS も使えるようになっていたのと、X でのポストに少し反響があったので本記事にて紹介します。
IDXの特徴
主な特徴については公式ブログや Google ドキュメントに記載されておりますので、詳細はこちらをご覧ください。この中からいくつかピックアップしつつ、テクニカルな補足を添えてまとめて紹介します。
Get to Work Quickly, from Anywhere
ホスティング環境とエディタについて紹介します。
Google Cloud
IDX ワークスペースはもちろん Google Cloud 上で動作しています。
正確には Cloud Workstations 上に構築されています。Cloud Workstations はマネージドなリモート開発環境を提供するサービスで、使用するコンテナイメージやマシンタイプなどを定義した構成設定を事前に用意し、その設定に基づいて必要な数だけ開発環境を作成します。IDX ワークスペースには、Debian-based VM が付属しているためターミナルへのフルアクセスができ、お気に入りツールのインストールも可能です。
IDX公式ブログのHigh-level architecture図より引用
マネージドサービスであるため、インフラやセキュリティパッチの適用などを考える必要なく、高速で安全かつスケーラブルな恩恵も受けられます。動かしてみるとわかりますが立ち上がりも早く、わずか数秒で即時にアプリ開発を始められます。
また、当然ブラウザさえあれば開発できるので、外出先でスマホやタブレットでの開発も可能です（マシンスペックも要求されないのでサクサク開発できますね）。
より詳細は、こちらのブログからご確認いただけます。
Code OSS
エディタは Code OSS を利用しているため、普段 VS Code で開発している方にとっては学習コストなしで利用できます。Code OSS は VS Code を筆頭に Cursor にも Fork されるなど、広く普及している OSS です。また、Open VSX を使って拡張し自身の使いやすい環境に整えることも可能です。一般的にクラウド IDE ではあまりテーマなどをカスタマイズできるイメージはないですが、「開発者は自分好みの開発環境を作りたがる生き物だ」という開発チームの考えから、独自のカスタマイズ（テーマ、ツール、プラグインなど）ができるように Code OSS を拡張したそうです。
IDX に限らずクラウド開発環境の宿命だとは思いますが、個人的にはブラウザショートカットと衝突して使いづらいなと思う場面が結構ありました（例: Cmd+W でエディタのファイルタブを閉じようとするとブラウザタブが閉じられそうになる）。
Develop with popular frameworks and languages
IDX では Angular、Next.js、React、Svelte、Flutter などの有名どころの技術スタックはサポートされており、テンプレートも多数用意されています。ボタンクリックで1分も絶たずに開発を始められる体験には驚きましたし、GitHub から既存リポジトリのインポートも可能です。Python と Go も近日中にサポートされる予定のようです。
ちなみに言語やフレームワークのサポート依頼などの Feature Request は、こちらから確認・依頼ができます。
Flutterエンジニアからみた開発者体験
私は普段 Flutter でアプリケーション開発をすることが多いので、日頃の開発体験と IDX での開発体験でどういった相違があるのかの観点で簡単に記載します。
通常 Flutter でアプリ開発する環境を作るには、以下の手順に記載されているような SDK やソフトウェアのインストールが必要です。場合によってはエミュレータなども必要になるため、ディスク容量の圧迫やそれなりのマシンスペックが求められます。
IDX ではこういった作業を一切せず、クラウド環境なのでマシンスペックも要求せずにボタン1つですぐに開発できる状態になります（Flutter に限らずテンプレートが用意されている言語・フレームワークは同様）。
ワークスペース名（プロジェクト名）を入力すると、flutter create が裏で実行され、カウンターアプリのプロジェクトの作成とエミュレータ実行まで完了します。
| 01.プロジェクト名を入力 | 02.あとは勝手に構成してくれる |
|---|---|
 |
 |
ブログに記載の通り、Flutter の特徴である Hot Reload やデバッグでよく利用する devtools もすでに接続されており、準備完了の状態ですぐに開発に着手できました。
When you select a Flutter template, the workspace already has the Android SDK and Flutter tool chain set up. The Android Debug Bridge (adb) connections are wired up. Flutter "devtools" are connected and work out-of-the-box. Everything is also connected back to your workspace so changes hot reload instantly and step-through debugging is set up without any configuration required.
https://idx.dev/blog/article/how-we-built-project-idx-a-high-level-overview
大規模プロジェクトではわかりませんが、カウンターアプリ程度では Hot Reload など反映までのラグが気になることは特になかったです。
IDX AI
今の時代、当然 AI の機能も搭載されています。結局、注目のプロダクトはすべてこの話題に帰着してしまいますね。
モデルには Codey（PaLM 2 をベースとした、コード生成や補完に特化したモデル）が搭載されており、Gemini と合わせて AI 機能を提供しています。具体的には、コード生成・コード補完・チャット機能などが提供され、開発者体験としては GitHub Copilot や Cursor などと同様の機能だと思います。
ちなみに、IDX で利用されているモデルは Android 開発における自然言語チャットの Meet Studio Bot や、Google Workspace で利用できる AI の Duet と同じモデルが利用されているそうです。
Preview your app across platforms
冒頭述べた通り Android エミュレータと iOS シミュレータは発表時には未対応でしたが、現在ではしっかり対応されています。起動までも非常に早く、特にストレスなく開発に専念できると思います。また、Flutter のホットリロードにも対応しているため、ローカルと同様の開発イテレーションを回すことができます。IDX の再読み込み方法には3種類用意されており、開発者は好きな形式を選択できます。
| 種類 | 挙動 |
|---|---|
| Hot Reload | ファイルを保存すると自動的に更新 |
| Full Reload | エミュレータの場合はアプリ再起動、Webアプリケーションの場合はページのリフレッシュと同様の挙動 |
| Hard Restart | 手動での強制再起動で、プレビューシステムそのものの再起動 |
| IDXワークスペースより |
|---|
 |
詳細はこちらもご参照ください。
また、Web 開発でもプレビュー機能が搭載されているため、タブをスイッチングする面倒もありません（他のクラウド IDE で Web アプリケーション開発する際には、指定のポートに別タブでアクセスする必要があった記憶）。一見地味にも見えますが、コード変更と確認を繰り返し行うことになりますし、マルチプラットフォーム開発をしているとタブで iOS/Android/Web が切り替えられるのは意外と便利でした。
触ってみた印象と適した利用シーン
実務での利用についてはまだプレビュー版ですし、個人的にはブラウザだとショートカットが衝突してしまうのが結構ツラく、日頃の開発では VS Code のままで良いかなというのが今の気持ちです。IDX 公式ブログによると、プロトタイプにとどまらず本格開発できるようにカスタマイズ性を提供しているとのことでしたが…。
一方で、IDX（クラウド IDE）の利用用途ははっきりとイメージでき、以下のケースでは積極的に使っていこうと思っています。
- 外出先でのコーディングあるいはアプリの動作確認
- 環境構築で躓きそうな方を対象とした短期間の利用（社内研修など）
特に2点目については実体験で、昨年に以下の RESAS API を題材にした Flutter 社内研修を実施したのですが、はじめてアプリ開発をする方にとって環境構築は非常にハードルが高く本質でもないので限られた時間の中でイマイチだなと感じていました（IDX ブログに記載のある研究によるとソースコードを書き始めるまでに環境構築で平均6時間費やすらしいです）。
Our research shows that developers spend an average of 6 hours setting up their dev environment before they write the first lines of code
さらに、研修では受講者各々に開発マシンを用意してもらったのですが、スペック不足でエミュレータが動かないなどのトラブルが発生してしまいました。結果的に Web ビルドで事なきを得たのですが、Flutter 肝心の Hot Reload を体験していただくことができず反省ポイントでした。
開発会社に努めている方やフリーランスの方など、日頃からある程度のスペックのマシンで開発していれば困らないかもしれませんが、エンタープライズ大企業では配布マシンも開発用スペックではなかったりするので、モバイルアプリ開発が完結できるクラウド IDE の IDX は非常に魅力的だと感じました。
まとめ
本記事では Project IDX の特徴やその所感について紹介しました。
ワークスペースの裏側には Google Cloud、Firebase、PALM 2(Codey)、Flutter、などあらゆる技術をフル活用されており、いわゆる総合格闘技でビッグテックにしかできないプロダクトだという印象を受けました。
GitHub Codespaces や Cloud9と比較してもやはりエミュレータ搭載は嬉しいですし、なにより Google プロダクトなので Flutter の手厚いサポートがある程度約束されているはずで、今後の発展が楽しみです。まだプレビュー版ですので、期待しつつ時間を置いてまた触ってみようと思います。
参考
- IDX, Google's answer to GitHub Codespaces, is slowly onboarding developers
- Introducing IDX, An Experiment to Improve Full-stack, Multiplatform App Development - Google for Developers
- IDX vs VS Code: Unveiling the Ultimate Developer Tool | by Reynoldsfred | Dec, 2023 | Medium
- Introducing IDX, An Experiment to Improve Full-stack, Multiplatform App Development
- IDX へようこそ | Google for Developers
- (1) I Got Access To Google's VS Code Killer | IDX First Look - YouTube
- Webアプリケーションのフルスタック開発を実現する「IDX」とは | TECH+（テックプラス）
- Googleが「IDX」発表。生成的AIが支援するマルチプラットフォーム、フルスタックアプリ開発対応のWebIDE － Publickey
- Cloud Workstationsを徹底解説！ - G-gen Tech Blog
Discussion
OSやブラウザによりますが、Webアプリ側のキーボードショートカットをブラウザ側より優先させることは可能です。
PWAとしてインストールまたは下記手順でWebアプリをウィンドウ表示すればCtrl+Wでブラウザタブではなくファイルタブが閉じられます。
・Chrome：メニューにある「保存と共有」内の「ショートカットを作成」にて「ウィンドウとして開く」にチェックを入れて作成する
・Edge：メニューにある「アプリ」内の「このサイトをアプリとしてインストール」を実行する
コメント頂きありがとうございます。
確かに回避策はありそうだと思い少し調べてみると、ブラウザでもChrome拡張のTampermonkeyを使えば、「特定サイトのショートカットキーを無効化」ができるようです（まだ試していないです）。
idx.google.comを指定し、衝突するショートカットを1つずつ無効化しておけば快適になりそうですね（最初の登録作業は面倒ですが）。