---
title: "「Project IDX」Gemini を活用して Web アプリを構築してみる | grasys blog"
url: "https://blog.grasys.io/post/kyuita/projectidx-gemini/"
description: "はじめに 初めまして kyuita です。 エンジニアの皆さんは普段どんなエディターを使っているでしょうか。 自分は VSCode を利用していますが、昨今クラウド IDE なるものが使われてる現場も増えていると聞きます。 今回は Google が開発しているクラウド IDE である「Project IDX」のβ版が…"
---

# 「Project IDX」Gemini を活用して Web アプリを構築してみる

-   ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[kyuita](/authors/kyuita/)
-   公開日：2024年7月10日
-   カテゴリー：[Tech](/categories/tech/)
-   タグ：[#Gemini](/tags/gemini/)[#Google Cloud](/tags/google-cloud/)[#Project IDX](/tags/project-idx/)

![「Project IDX」Gemini を活用して Web アプリを構築してみる](/_astro/hero.CtPnUlt1_11HlRA.webp)

## はじめに

初めまして kyuita です。

エンジニアの皆さんは普段どんなエディターを使っているでしょうか。  
自分は VSCode を利用していますが、昨今クラウド IDE なるものが使われてる現場も増えていると聞きます。

今回は Google が開発しているクラウド IDE である「[Project IDX](https://developers.google.com/idx?hl=ja)」のβ版が使えるということで使ってみようと思います。  
せっかくなので最近流行っているコードアシスタント機能を使って、利用したことのない言語でどこまでいけるのか試してみます。

## 開発環境

Project IDX のみ

## Project IDX を使う

サイトに行くだけでいきなり使えます。  
[https://idx.dev/](https://idx.dev/)

ガイドに沿って進んでいきます。

![Project IDX を使うの画面（1）](/_astro/01-Pasted-image-20240708011758-1024x443-7ea2e0ac.DAc5RNaq_2trr5b.webp)

![Project IDX を使うの画面（2）](/_astro/02-Pasted-image-20240708011816-397f4be6.D0IygcFP_jBTXf.webp)

![Project IDX を使うの画面（3）](/_astro/03-Pasted-image-20240708011907-810dc493.lhb7NQWm_25VorM.webp)

Gemini を使うかどうか聞かれるので、今回は Enable AI Features を選択

![Project IDX を使うの画面（4）](/_astro/04-Pasted-image-20240708011929-638a33cc._fEorsq3_eLVft.webp)

Gemini のプライバシーに関するお知らせが表示されます。  
仕事などで採用する際には問題ないか確認しましょう。

![Project IDX を使うの画面（5）](/_astro/05-Pasted-image-20240708012102-3becf9b9.SRn_oDmy_1AF5Wi.webp)

Project IDX のホーム画面に辿り着きました。  
右の方に２つスタートメニューがあります。

・Start something new from a template  
・Continue working on your existing project

Github などのリポジトリからワークスペースをインポートする機能もあるようですが、今回は言語テンプレートを見てみます。

![Project IDX を使うの画面（6）](/_astro/06-Pasted-image-20240708012436-1024x422-af85a549.Bx2P7_VA_ZEnl2c.webp)

Backend カテゴリーに Rust があります。  
Rust は Linux カーネルの実装に一部採用されたり、オンラインゲームの Web server として採用されるなど何かと個人的に興味を持っているので選択してみます。  
私は Rust を触ったことがありませんが、Project IDX と Gemini の力に頼れば Hello World まで行けると踏んで見切り発車していきます。

![Project IDX を使うの画面（7）](/_astro/07-Pasted-image-20240708014321-1024x552-fdb8625f.D9ZdvRhf_Z8uyVJ.webp)

プロジェクトに名前をつけて生成します。

![Project IDX を使うの画面（8）](/_astro/08-Pasted-image-20240708014447-3d9f46b9.FA_S5YYe_1pj5hn.webp)

セットアップが完了しました。  
普段 VSCode を使っていますが、だいぶ似たような画面に感じます。  
最初から .gitignore ファイルが含まれていたりブランチが master になっているのを見ると、git 管理環境が最初からセットアップされているようです。  
`Ctrl ＋ J` を押すとターミナルが開けました。基本的なショートカットキーは他の IDE とある程度同じようになっていそうです。

![Project IDX を使うの画面（9）](/_astro/09-Pasted-image-20240708014849-1024x506-57e6f902.DBJZRfyt_1M1rwO.webp)

左サイドバーからもターミナルが開けます。

![Project IDX を使うの画面（10）](/_astro/10-Pasted-image-20240708030436-dbf23b1e.CRJEGCGV_1F4U6f.webp)

git はどうなっているでしょうか

![Project IDX を使うの画面（11）](/_astro/11-Pasted-image-20240708015032-6997229c.Cy7gnTpU_TiWW8.webp)

Google アカウントで git ユーザーが登録されているようです。

## Chat with Gemini

VSCode 気分で、`Ctrl + Shift + P` を押すとコマンドパレットが開きます  
Gemini と入力すると Gemini 機能がリストアップされます  
対話形式でいろいろと聞きたいので Chat with Gemini を選択します

![Chat with Geminiの画面（1）](/_astro/12-Pasted-image-20240708015557-7550c979.CAKDy1nY_Z2k4cns.webp)

Gemini とチャット形式で対話できるようになりました。

![Chat with Geminiの画面（2）](/_astro/13-Pasted-image-20240708015659-1024x574-e27b50e1.CrGRT3vS_Zxtvnr.webp)

## Rust でハロワする

Rust の開発環境はテンプレートで用意されましたが実行方法がわからないので Gemini に聞いてみます。

![Rust でハロワする画面（1）](/_astro/14-Pasted-image-20240708020007-1d6787c0.DpUZ6Jun_1ybdyJ.webp)

Gemini に従ってターミナルで `cargo run` を実行します

![Rust でハロワする画面（2）](/_astro/15-Pasted-image-20240708020046-a2b1a3fa.vapCU35J_ZokmuI.webp)

Hello world! が出来ました！！

## Rust のハロワを Web アプリ化する

随分あっさり Hello wolrd! してしまったので、これを Web アプリケーションにして http アクセスのレスポンスで Hello wolrd を取得してみようと思います。

Rust コードを Web アプリ化する方法も Gemini に聞いてみましょう

![Rust のハロワを Web アプリ化する画面（1）](/_astro/16-Pasted-image-20240708020536-84956ded.CFqJx_uS_2pW42C.webp)

actix-web が Rust の Web フレームワークのようです。  
Gemini の言う通りプロジェクトディレクトリのルートにある cargo.toml に依存関係を追加して `cargo build` でインストールします。

![Rust のハロワを Web アプリ化する画面（2）](/_astro/17-Pasted-image-20240708020958-303c4dd2.CeAiLrzT_Z1HXoEy.webp)

3分ほどでインストール完了

## コード生成機能

エディターに戻るとコード補完機能がなにやら提案してくれています。

![コード生成機能の画面（1）](/_astro/18-Pasted-image-20240708020952-35d3cefc.CuvFPjv__26z3AM.webp)

これをそのまま採用することも出来そうですが、今回は手動でコード生成させてみます。  
`Ctrl + I` を押してスラッシュコマンドウィンドウを開きます。

![コード生成機能の画面（2）](/_astro/19-Pasted-image-20240708021531-ddee09f1.BaiwW3rp_ZWvLIz.webp)

`/generate` を入力するとコードの提案をしてくれます。

![コード生成機能の画面（3）](/_astro/20-Pasted-image-20240708021607-0e8f6393.BfgTIZAT_Z1jFoE4.webp)

Accept を押すとコードが入力されました。

![コード生成機能の画面（4）](/_astro/21-Pasted-image-20240708021736-f3c2cc3f.CF7U70AZ_ZM26EM.webp)

main 関数があるのでここに hello 関数が使われるようにしたいです。  
main 関数のコードを一度削除します。  
そして、もう一度 `Ctrl + I` を押して `/generate` と `main()` のキーワードを入れてみます。

![コード生成機能の画面（5）](/_astro/22-Pasted-image-20240708022320-c3162bd4.CFuqlboH_Z24AP5A.webp)

main() 関数の処理で何やら HttpServer の処理を書いてくれているので採用してみます。

![コード生成機能の画面（6）](/_astro/23-Pasted-image-20240708022340-b713aeb5.CXuGKHBh_ZWVtoq.webp)

？でエラーになっています。  
範囲選択してスラッシュコマンドウィンドウを開いて `/fix` を選択するとコード修正の提案をしてくれます。

![コード生成機能の画面（7）](/_astro/24-Pasted-image-20240708022558-e2e557ff.8S3X0V1U_ZQ8Xmc.webp)

コードが修正されたので、そのまま採用してみます。

![コード生成機能の画面（8）](/_astro/25-Pasted-image-20240708022627-581b3547.CV8_AYuW_2p9wn0.webp)

そのあと何度か修正してみてうまくいきそうだと思ったところで、ターミナルから `cargo run` で実行してみます

![コード生成機能の画面（9）](/_astro/26-Pasted-image-20240708023054-9456dfce.CB_LMte4_Z1OclBN.webp)

Running……ということはサービスとして起動したのでしょうか。  
別ターミナルから `curl 127.0.0.1:8080` を実行してみます。

![コード生成機能の画面（10）](/_astro/27-Pasted-image-20240708023242-500a8b37.54GBUeEO_Z28TgkX.webp)

Hello world がレスポンスとして帰ってきました。  
コードアシスタント機能のみで Hello world を Web アプリにすることが出来ました。

## Google Cloud にデプロイ

Web アプリが作れたので外部からアクセスさせるところまで行きたいですよね。  
もう一歩だけ欲張って、Hello wolrd アプリを Google Cloud 上にデプロイできるか試してみます。  
Cloud Run が使えそうなのですが、こちらも触ったことがないので Project IDX 頼りで進んでいきます。

![Google Cloud にデプロイの画面（1）](/_astro/28-Pasted-image-20240708023339-12d199e0.BCHlDFSd_26BrKJ.webp)

サイドバーの Project IDX メニューから Deploy to Cloud Run があるので実行してみます。

デプロイするワークスペースが信頼できるものか警告が出ます。  
外部リポジトリからコードをインポートした場合などは信用できるものか確認するのが良いでしょう。

![Google Cloud にデプロイの画面（2）](/_astro/29-Pasted-image-20240708023443-f1d6b534.D5x9lFS6_Z1g9PEC.webp)

Google 認証がでます。

![Google Cloud にデプロイの画面（3）](/_astro/30-Pasted-image-20240708023638-7650118e.B6MxcJBG_29Tmmp.webp)

昔作った Project があるのでそこに入れてみます。

![Google Cloud にデプロイの画面（4）](/_astro/31-Pasted-image-20240708023812-8024e2b2.Cof9i7O9_Zfy3Go.webp)

Google Cloud プロジェクトに紐づけることが出来ました。  
Enable Cloud Run APIs を押すと

![Google Cloud にデプロイの画面（5）](/_astro/32-Pasted-image-20240708023847-0d76fb9e.BPcH5z_o_ZYwHTS.webp)

Deploy ボタンに変わるので押します

![Google Cloud にデプロイの画面（6）](/_astro/33-Pasted-image-20240708024337-7e2ded39.BvQzIKMz_Z1YudMG.webp)

上部メニューで path 入力が求められます。

![Google Cloud にデプロイの画面（7）](/_astro/34-Pasted-image-20240708024404-99a71fda.q371Ha81_Z28kfVT.webp)

Web アプリのパスを聞かれているような気がしますが、Gemini にどうすればいいか聞いてみましょう。

![Google Cloud にデプロイの画面（8）](/_astro/35-Pasted-image-20240708024530-4ad7addf.DEtt_Xi0_ApLSW.webp)

cargo.toml はプロジェクトルートにあるので `/` だけを入力して進めます。

今度は認証系で何か求められています。これも Gemini に聞いてみましょう。

![Google Cloud にデプロイの画面（9）](/_astro/36-Pasted-image-20240708024559-e6f5aaf7.BybFjSAi_Z22cWy3.webp)

最後にデプロイリージョンを選択して

![Google Cloud にデプロイの画面（10）](/_astro/37-Pasted-image-20240708024711-7488636b.C5uqsTdd_1cdXP8.webp)

デプロイが実行されますが、何やらエラーになりました。

Plain textcontent\_copy

```
2024-07-07T17:47:36.803Z [ERROR]  ERROR: (gcloud.run.deploy) unrecognized arguments:  
  --label (did you mean '--labels'?)  
  idx=myfirstrustapp-9899147  
  To search the help text of gcloud commands, run:  
  gcloud help -- SEARCH_TERMS  
  
2024-07-07T17:47:36.803Z [ERROR]  Error while running Cloud Run Deploy. Check output panel for logs.  
```

デプロイを押したときに実行される gcloud コマンドで label 引数の指定が間違っていてエラーになるようです。

Chat with Gemini にエラーについて確認したところ、config ファイルに gcloud コマンドをオプション付きで入れておけば実行できるとのことですが、何回か試したところ変わらずにエラーになってしまいました。

まだβ版なので仕方ないという感じでしょうか。設定ファイルを正しく修正できれば解決できるのだと思いますが、今回はここで断念します。。。

## 終わりに

ここまでメモを取りながら実行していってちょうど1時間30分くらいでした。  
最後の Cloud Run へのデプロイはうまくできませんでしたが、全く知らない言語に対して開発環境を用意できて実行できているのは感触としては良いです。

それに加えて設定不要で Gemini のコードアシスタントを使えるのも良いですね。  
最終的にはコードの内容が正しいか自分で判断できないといけないですが、学習用途であればとりあえず動かした後にわからないところを公式ドキュメントと照らし合わせるみたいな使い方もできるかなと感じました。

クラウド IDE ということで環境を問わずにサイトにアクセスすれば開発できるはずなので電車通勤中とかでももしかしたら開発ができるかも？などいろいろ使い方があるかもしれません。

まだ Open β版ということで色々と不便な点もあるかもしれませんがそれ以上に気軽に始められますし今回利用していない機能も沢山あるようです。  
皆様もクラウド IDE や生成 AI コードアシスタントを気軽に試せる Project IDX を触ってみてはいかがでしょうか。

## この記事を書いた人

[![](/_astro/noicon.CTHOhNiB_Z24aAgM.webp)](/authors/kyuita/)

### [kyuita](/authors/kyuita/)

kyuitaのプロフィールと執筆記事をご覧いただけます。

[プロフィールと記事一覧](/authors/kyuita/)