Gemini CLIを使ってGo+Vue3のTodoアプリを作成してみた！！ | cloud.config Tech Blog

入社時以来の投稿でちょっとドキドキの姫子松です。

今回お話しするのはGemini CLIを使ってバックエンドをGo、フロントエンドをVue3でTodoアプリを作成した話です。

Gemini CLIについて

まずはじめに、皆さんはGemini CLIをご存じですか？
Geminiを使ったことがある方は多いと思います。
Gemini CLIを一言で説明すると、Geminiをコマンドライン上で利用できるツールです。

この説明の聞いて、なんだGeminiをコマンドライン上で使えるだけかと思った人待ってください。
今からGemini CLIのすごいところを紹介していきます。

Gemini CLIのここがすごい

インストールしてGoogleアカウントにログインすればすぐ使える
以下がGemini CLIのインストール手順になります。
（参照：https://zenn.dev/torakm/articles/b844f29c9d349c）
Node.jsのバージョンが18以上で、npmまたはyarnがインストールされていれば以下のコマンドでインストールします。
Node.jsが入っていない人・バージョンが低い方はNode.jsのインストールを行ってください。
npmまたはyarnがインストールされていない方はどちらかのインストールを行ってください。
・npmを使用したGemini CLIのインストールコマンド
npm install -g @google/gemini-cli
・yarnを使用したGemini CLIのインストールコマンド
yarn global add @google/gemini-cli
インストールが完了後に確認のためGemini CLIのバージョンを確認します。
・Gemini CLIのバージョン確認
gemini --version
これでインストール完了です。さっそく起動してみましょう！
・Gemini CLIを起動
gemini
はじめだけ初期設定としてテーマの選択と認証を行います。今回、認証ではGoogle のログインを使用します。
テーマは何でもいいので自分の好みで選択してください。
（選択は十字キー、選択はspaceキー、決定はEnterキーを使用します）
・テーマ選択画面
・認証方法選択画面
認証では「Login with Google」を選択するとブラウザでGoogleアカウント認証の画面が開くのでGoogleアカウントを選択し認証を行います。
認証が完了するとGemini CLIの画面が切り替わりプロンプトを入力できるようになります。
※次回以降はGemini CLIを起動するとこの画面からとなります。
以上が初回セットアップです。めっちゃ簡単じゃないですか？
こんな感じでGoogleアカウントさえあればすぐに使えちゃいます。
パスを指定してコードファイルを読み取らせることができる
プログラムを書いている時、プロンプトにコードを貼り付けていませんか？
この時よく回答で「この関数やクラスは定義されているのか」とか貼ったコード以外の箇所を聞かれることが多いと思います。
しかし、プロンプトに関係するコードすべてを貼り付けるのは量も多いし大変ですよね？
なんと、Gemini CLIはプロジェクトのフォルダーのパスを指定して読み取りをさせることができます！
プロジェクト内のファイルを読んでもらうことでプロンプトの作成も楽で回答も的確です。
試しに今回作成したTodoアプリのフォルダを指定してどんなものが書かれているか説明してもらいました！
リクエスト
回答
注意点：セキュリティ面は少し不安なので読ませる情報には注意しましょう。
VSCodeで使用する場合、拡張機能としてGemini Code Assistをインストールしプライバシー設定から学習されないようにしましょう。（チェック外すだけ）
無料で1日1000リクエストまで使える！
2025/7月時点ではGemini CLIは1日1000リクエストまで無料で使用できます！
無料ですよ？しかも1日1000リクエストなんて個人で使用するだけなら気にする必要もありません！

Gemini CLIでGo+Vue3のTodoアプリを環境構築から作らせてみた

前置きが長くなりましたがここからGemini CLIに作成させたGo+Vue3のTodoアプリについてのお話になります！

もともとGo言語にふれてみるためのTodoアプリ作成だったので途中経過を記録していませんでした...

作成後の画面と手順のみとなっています。ご容赦ください...

大きく6つの手順に分けてお話しします。

今回Todoアプリを作成した手順は以下の通りです。

はじめに
バックエンド（Go）
フロントエンド（Vue3）
クリーンアーキテクチャへのリファクタリング
CSSをTailwindに書き換え
追加の機能（カレンダーの追加）

そして完成したものがこちらです。

2025-07-07-geminicli-create-todo-app-010

ではさっそくGemini CLIにTodoアプリを作成させた時の手順について

はじめに
「（ディレクトリパス）でバックエンドをGo、フロントエンドをVue3でTodoアプリを作成したい」とGemini CLIに指示しました。
すると、指定したディレクトリにフォルダを作成するかどうか聞かれます。これを承諾するとフォルダが自動で生成されます。
バックエンド（Go）
次にGoの環境構築に取り掛かります。
Geminiが提案するコマンドを承認するか、表示されたコマンドを自分でターミナルに貼り付けて実行するだけで、セットアップができました。
続いて、単純な「Hello, World!」の表示から始め、Todoアプリの基本機能であるPOST、GET、PUT、DELETEのAPIを実装してもらいました。
開発中にエラーが発生しても、そのエラーメッセージをプロンプトに貼り付けるだけで、Geminiが的確な解決策を提示してくれました。
フロントエンド（Vue3）
バックエンドの実装が一段落したところで、フロントエンド（Vue3）の実装に移ります。こちらも、まずは環境構築からでした。
環境構築後、バックエンドと同様に「Hello, World!」から始め、先ほど作成したAPIと連携（つなぎこみ）しながら、GET、POST、DELETE、PUTの各機能を実装していきました。
この時点でTodoアプリの基本的な機能は完成です。さらにGeminiから「追加したい機能はありますか？」と尋ねられるので、ここから自由な発想で機能を追加できます。
クリーンアーキテクチャへのリファクタリング
この時点では、バックエンドの処理がすべてmain.goファイルに書かれていたため、好奇心からクリーンアーキテクチャへのリファクタリングを依頼してみました。
結果、特にエラーが発生することもなく、うまくに責務の分離（役割ごとのファイル分割）が実現できました。
CSSをTailwindに書き換え
フロントエンドは、<style> タグに直接CSSを記述するシンプルな実装だったので、人気のCSSフレームワークであるTailwind CSSへの書き換えも試してもらいました。
Geminiの指示に従い、まずはTailwind CSSのパッケージをインストール。その後の書き換え作業でも、表示がほとんど崩れることなく、スムーズに置き換えが完了したことを確認できました。
追加の機能（カレンダーの追加）
追加機能として、カレンダーの実装もお願いしてみました。プロンプトには「カレンダー機能を実装して」と入力しただけですが、日付ごとのタスク数をバッジで表示する機能や、タスクのフィルター機能まで実装してくれてびっくりしました。
こちらが仕様を細かく指定すれば、かなり高度な機能でも実装してくれそうです。