【Project IDX】GoogleのAI搭載のブラウザ開発環境
皆さん、Project IDXというAI搭載のウェブベース開発環境をご存知ですか？
React やGoなどといった、人気フレームワークやプログラミング言語に対応していて、フルスタックに開発する方には嬉しいサービスです！
え、ご存知ないんですか！！？？そんなことないですよね！（煽り）
Google Cloudを通じて環境を作るため、セキュリティもバッチリ。
しかもAIを搭載しており、プログラミングのサポートもしてくれます。
ということで、ご存知ないみなさんのために、概要、導入、実際に使ってみた感想についてまとめています。
この記事を最後まで読むと、Project IDXというサービスの使い方から利便性まで理解できるようになります。
ぜひ最後までご覧ください！
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です。
登録したメールアドレスにメールは届かないみたいです。
どんなものか試したいですねー！
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によるコーディングサポート | チャットによるサポート |
まとめ
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研修・勉強会を行なっています
いかがだったでしょうか？
弊社では、法人様向けに生成AI研修を行なっております。
また、研修に加えて本事業の支援も行わせていただいております。
詳しくはこちらをご覧ください！
セミナー実績 | WEEL
研修をさせていただいた企業様からは、以下のような好評をいただいております。
生成AIについて包括的に理解ができ、多くの業務で生成AIが活用されるようになった。
生成AIの事例を知ることで、社内で生成AIを活用するためのアイデアがたくさん出てくるようになった。
全社で生成AIに関する認識を共有できたので、生成AIに関するプロジェクトの理解が得られるようになった。
研修の内容としては、以下のようなものになっています。
1. 生成AIの概要
2. 生成AIの歴史
3. 生成AIのリスク・対応策
4. 生成AIの活用事例
5. 生成AIの未来予測
6. 〇〇業界特有の生成AI活用法（様々な業界に対応）
7. プロンプトエンジニアリング実践（ChatGPTや画像生成AIへの入力文）
8. AI開発実践（Pythonプログラミング）
9. 生成AIの社内導入手順
※企業様のニーズに合わせて内容はカスタマイズしています。
「社員に生成AIに関する知識を身に付けてもらいたい」
「今後、生成AIを活用して事業展開をしていきたい」
と考えている方は、まずはご相談から承っておりますので、ぜひご連絡ください。
＼ 生成AIツールの活用方法のご提案からツールの開発・実装までサポートします！／
弊社では以下のようなお悩みをご相談いただいております。
・生成AIを社内で活用するには？
・おすすめの生成AIツールを知りたい…
・生成AIの業務効率化方法がわからない！
・生成AIの開発を行いたい！
弊社の生成AIに精通したAIコンサルタントが、お悩みをヒアリングし、ベストなソリューションを提案します。
よくわからないけど、とりあえず話を聞きたいという方でも大丈夫です。
お気軽にご相談ください！
