目次
はじめに
みなさんは普段、クラウド開発環境[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 ドキュメントに記載されておりますので、詳細はこちらをご覧ください。この中からいくつかピックアップしつつ、テクニカルな補足を添えてまとめて紹介します。
https://idx.dev/blog/article/introducing-project-idx
Get to Work Quickly, from Anywhere
Project IDX の中心には、「どこからでも、どのデバイスでも、ローカル開発と同じ完全な環境で開発できるべきだ」という信念があります。すべての Project IDX ワークスペースは、クラウド上のデータセンターにホストされ、Linux ベースの VM の完全な機能と、ユニバーサルなアクセスを兼ね備えています。
Import your existing app, or start something new
Project IDX では、既存のプロジェクトを GitHub からインポートできるため、中断したところからすぐに作業を再開できます。さらに、Angular、Flutter、Next.js、React、Svelte、Vue などの人気フレームワークや、JavaScript、Dart などの言語に対応したテンプレートを使って、新しいプロジェクトを作成することも可能です。（近日公開予定の Python、Go などにも対応予定です。）また、より多くのプロジェクトタイプやフレームワークに対する本格的なサポートを追加するため、積極的に開発を進めています。サポートしてほしい技術スタックがあれば、ぜひフィードバックをお寄せください。
Google Cloud
IDX ワークスペースはもちろん Google Cloud 上で動作しています。
正確には Cloud Workstations 上に構築されています。Cloud Workstations はマネージドなリモート開発環境を提供するサービスで、使用するコンテナイメージやマシンタイプなどを定義した構成設定を事前に用意し、その設定に基づいて必要な数だけ開発環境を作成します。IDX ワークスペースには、Debian-based VM が付属しているためターミナルへのフルアクセスができ、お気に入りツールのインストールも可能です。
Code OSS
エディタは Code OSS を利用しているため、普段 VS Code で開発している方にとっては学習コストなしで利用できます。Code OSS は VS Code を筆頭に Cursor にも Fork されるなど、広く普及している OSS です。また、Open VSX を使って拡張し自身の使いやすい環境に整えることも可能です。一般的にクラウド IDE ではあまりテーマなどをカスタマイズできるイメージはないですが、「開発者は自分好みの開発環境を作りたがる生き物だ」という開発チームの考えから、独自のカスタマイズ（テーマ、ツール、プラグインなど）ができるように Code OSS を拡張したそうです。
Preview your app across platforms
今日のアプリ開発において成功するためには、プラットフォームをまたいでアプリのデザインや動作を最適化し、ユーザーが実際に見るのと同じようにプレビューすることが重要です。これを簡単にするために、Project IDX には組み込みのウェブプレビューが含まれており、さらに近日中に、ブラウザ上で直接利用できる完全に構成された Android エミュレーターと埋め込み型の iOS シミュレーターが追加される予定です。
Help from AI
今の時代、当然 AI の機能も搭載されています。結局、注目のプロダクトはすべてこの話題に帰着してしまいますね。
モデルには Codey（PaLM 2 をベースとした、コード生成や補完に特化したモデル）が搭載されており、Gemini と合わせて AI 機能を提供しています。具体的には、コード生成・コード補完・チャット機能などが提供され、開発者体験としては GitHub Copilot や Cursor などと同様の機能だと思います。
ちなみに、IDX で利用されているモデルは Android 開発における自然言語チャットの Meet Studio Bot や、Google Workspace で利用できる AI の Duet と同じモデルが利用されているそうです。
Reload
冒頭述べた通り Android エミュレータと iOS シミュレータは発表時には未対応でしたが、現在ではしっかり対応されています。起動までも非常に早く、特にストレスなく開発に専念できると思います。また、Flutter のホットリロードにも対応しているため、ローカルと同様の開発イテレーションを回すことができます。IDX の再読み込み方法には3種類用意されており、開発者は好きな形式を選択できます。
| 種類 | 挙動 |
| Hot Reload | ファイルを保存すると自動的に更新 |
| Full Reload | エミュレータの場合はアプリ再起動、Webアプリケーションの場合はページのリフレッシュと同様の挙動 |
| Hard Restart | 手動での強制再起動で、プレビューシステムそのものの再起動 |
また、Web 開発でもプレビュー機能が搭載されているため、タブをスイッチングする面倒もありません（他のクラウド IDE で Web アプリケーション開発する際には、指定のポートに別タブでアクセスする必要があった記憶）。一見地味にも見えますが、コード変更と確認を繰り返し行うことになりますし、マルチプラットフォーム開発をしているとタブで iOS/Android/Web が切り替えられるのは意外と便利でした。
まとめ
本記事では Project IDX の特徴やその所感について紹介しました。
ワークスペースの裏側には Google Cloud、Firebase、PALM 2(Codey)、Flutter、などあらゆる技術をフル活用されており、いわゆる総合格闘技でビッグテックにしかできないプロダクトだという印象を受けました。
GitHub Codespaces や Cloud9と比較してもやはりエミュレータ搭載は嬉しいですし、なにより Google プロダクトなので Flutter の手厚いサポートがある程度約束されているはずで、今後の発展が楽しみです。まだプレビュー版ですので、期待しつつ時間を置いてまた触ってみようと思います。
