【Project IDX】GoogleのAI搭載のブラウザ開発環境

猛者達が選ぶAIツール

2023-10-06

皆さん、Project IDXというAI搭載のウェブベース開発環境をご存知ですか？
React やGoなどといった、人気フレームワークやプログラミング言語に対応していて、フルスタックに開発する方には嬉しいサービスです！

え、ご存知ないんですか！！？？そんなことないですよね！（煽り）

Google Cloudを通じて環境を作るため、セキュリティもバッチリ。
しかもAIを搭載しており、プログラミングのサポートもしてくれます。

ということで、ご存知ないみなさんのために、概要、導入、実際に使ってみた感想についてまとめています。

この記事を最後まで読むと、Project IDXというサービスの使い方から利便性まで理解できるようになります。
ぜひ最後までご覧ください！

なお弊社では、生成AIツール開発についての無料相談を承っています。こちらからお気軽にご相談ください。

Project IDXの概要

Project IDXは、Google によって提案された、AI搭載のウェブベース開発環境です。
アプリ開発はものすごく複雑で、この課題を解決するために考案されたとのこと。
特にフルスタックでアプリ開発する人向けなんだとか。

気になるセキュリティやスケーラビリティに関してですが、Google Cloud通じて開発するので心配ありません。

また、Project IDXでは、多様なフレームワークと言語をサポート予定です。
フレームワークは、Angular、Next.js、React、Svelte、Flutterなど。
これらを利用することで、マルチプラットフォームのアプリを簡単に開発できます。
ほかにも、PythonやGoなどの人気言語にも対応されるとのこと。

さらに、AIがコーディングをサポートしてくれます。
Project IDXには、Codeyという基盤となるAIが搭載。
コード生成やコード補完などが行われ、コーディングスピードのアップが期待されますね！

気になった方は、こちらのリンクからウェイティングリストへ登録してみましょう。

Join Waitlist をクリックして……

Name, Email, Countryを入力して、Termsにチェックを入れ、Joinをクリックする。

Success！と出たらOKです。
登録したメールアドレスにメールは届かないみたいです。

どんなものか試したいですねー！

WEEL

10分で分かるGoogle Gemini日本語版の使い方解説！最新活用事例9選も紹介 | WEEL この記事では、Google Bardの概要・始め方・できることについてご紹介します。Google Bardの活用事例についても詳しく解説しているので、Google Bardを日常やビジネスに活…

Project IDXの料金

無料で利用できます。

Project IDXの導入方法

まずはこちらのURLにアクセスします。

このような画面になればOKです。

それでは実際に使ってみましょう！

Project IDXを実際に使ってみた

Project IDXには、5つの機能があります。

ウェブアプリを作る（New Web app）
フラッターアプリを作る（New Flutter app）
ワークスペースを作る（New Black workspace）
リポジトリをインポートする（Import a repo）
言語ごとの開発環境を作る（Python, Go, AI and more coming soon）

ウェブアプリを作る（New Web app）

まずは、こちらをクリック。

このような画面になり、ウェブアプリのフレームワークとアプリ名を入力。そして、Nix（パッケージマネージャ）を使うかどうか選び、Create をクリックします。

このような画面になって、アプリをセットアップしてくれてます。

このようなUIで、左からファイル構成、プログラム、ウェブアプリの出力が並んでいます。

「Hello」の文字列を追加したらすぐに反映されました！

個人的にはすごくテンション上がります！

Google のエディタですから、Firebaseプロジェクトも左のタブから作れます。

もし別のプロジェクトを作りたくなったら、ダッシュボードに戻るとOKです。

Flutterアプリを作る（New Flutter app）

Flutterは、UIソフトウェア開発キットです。

1つのコードからネイティブのモバイル、ウェブ、デスクトップアプリケーションを作成することができます。

まずは、ダッシュボード上で、New Fullter appをクリック。

Flutterアプリの名前を入力して、Createをクリック。

こんな画面になればFlutterでの開発が可能になります。

人気のFlutterの環境をパッと作れるのはありがたい！

ワークスペースを作る（New Black workspace）

フレームワークを使わないで１から開発環境を作りたい時はこちらを使います。

まずは、こちらをクリック。

アプリの名前を入力して、Createをクリック。

このようにまっさらなプロジェクトができます。

あとは、お好みの環境を作るためにdev.nixを作ると開発が可能です。一番最初に作ったウェブアプリのdev.nix ファイルを貼り付けて環境を再構築してみましたが、エラーに……。

現状は、エラーの原因は表示されないため、自身で確認しないといけないのは少し大変ですね。

リポジトリをインポートする（Import a repo）

まずは、こちらをクリック。

Repo URLに、GithubのURLを入力。App typeと、Nixを使うか選びCreateをクリック。

今回は、以下のレポジトリをインストールしました。

その結果がこちらです。

これでプロジェクトの開発が可能です！

言語ごとの開発環境を作る（Python, Go, AI and more coming soon）

きっと各言語の開発環境を作る機能だと想像してますが、こちらはComming soonなのでまだ確認できませんでした。

利用可能になったら記載しますね！

Project IDXの推しポイントは本当か検証してみた

Project IDXの推しポイントは以下です。

多様なフレームワークと言語のサポート
AIによるコーディングサポート

それでは確認していきましょう。

多様なフレームワークと言語のサポート

こちらの記事によると、対応しているフレームワークは以下の通りです。

Angular
Next.js
React
Svelte
Flutter

この画面からわかる通り、Angular、Next.js、React、SvelteだけではなくVueにも対応しています。

再掲ですが、Flutterアプリも作成可能なため対応しています。

言語に関しては現状はComing soonなので確認できておりません。

以上のように、多様なフレームワークに対応していることがわかりました。

AIによるコーディングサポート

次は、AIによるコーディングのサポートについて確認していきます。

右下にある「IDX AI」をクリックし、AIコード補完の設定をします。

すると、AIチャットが起動。プログラムに関して質問ができます。

jupyter notebookで動かしていたコマンドをShell Scriptにしてもらうようにお願いしてみましたが、「日本はまだ使えない」と出てしまいました！

多分、Googleの言語設定を英語にしたらできるのでは！？と思い、変更してみたのですがだめでした！残念！

実態はわかりませんでしたが、チャット形式でのサポートを受けられるみたいですね！！

以下に結果をまとめます。

項目	結果
多様なフレームワークと言語のサポート	– Angular – Next.js – React – Svelte – Vue – Flutter
AIによるコーディングサポート	チャットによるサポート

なお、Googleが開発したImagen2について知りたいからはこちらからご覧ください。

→Imagen2とは？Googleが開発した画像生成AI！搭載ツールImage FXも解説

まとめ

Project IDXの概要、導入、使ってみた感想、そして推しポイントの検証結果をまとめました。

Project IDXの概要

Project IDXは、Google によって提案された、AI搭載のウェブベース開発環境で、特にフルスタックでアプリ開発する人向けです。

セキュリティやスケーラビリティに関してですが、Google Cloudを通じているため心配ありません。

また、Project IDXでは、多様なフレームワークと言語をサポート予定です。
フレームワークは、Angular、Next.js、React、Svelte、Flutterなど。
ほかにも、PythonやGoなどの人気言語にも対応されるとのこと。さらに、AIチャット機能がコーディングをサポートしてくれます。

Project IDXの料金

無料です。

Project IDXの導入

まずはこちらのURLにアクセスします。

このような画面になればOKです。

Project IDXを使ってみた

Project IDXには、5つの機能があります。

ウェブアプリを作る（New Web app）
フラッターアプリを作る（New Flutter app）
ワークスペースを作る（New Black workspace）
リポジトリをインポートする（Import a repo）
言語ごとの開発環境を作る（Python, Go, AI and more coming soon）

5.に関しては未公開のため、確認できませんでしたが、残りの機能はどれも馴染みのあるUIで、簡単に操作ができました。

Project IDX 推しポイントの検証結果

Project IDXの推しポイント2点について調べた結果です。

項目	結果
多様なフレームワークと言語のサポート	– Angular – Next.js – React – Svelte – Vue – Flutter
AIによるコーディングサポート	チャットによるサポート

最後に

いかがだったでしょうか？

弊社では

・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発

などの開発実績がございます。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。

➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ