FIXER Tech Blog - AI/Machine Learning

Gemini CLIのここがすごい！ Go＋Vue3のアプリを作らせてみた

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

　今回お話しするのは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

2. インストールが完了後に確認のためGemini CLIのバージョンを確認します。

・Gemini CLIのバージョン確認

gemini --version

　これでインストール完了です。さっそく起動してみましょう！

・Gemini CLIを起動

gemini

　はじめだけ初期設定としてテーマの選択と認証を行います。今回、認証ではGoogle のログインを使用します。

　テーマは何でもいいので自分の好みで選択してください（選択は十字キー、選択はspaceキー、決定はEnterキーを使用します）。

・テーマ選択画面

・認証方法選択画面

　認証では「Login with Google」を選択するとブラウザでGoogleアカウント認証の画面が開くのでGoogleアカウントを選択し認証を行います。

　認証が完了するとGemini CLIの画面が切り替わりプロンプトを入力できるようになります。

※次回以降はGemini CLIを起動するとこの画面からとなります。

　以上が初回セットアップです。めっちゃ簡単じゃないですか？

　こんな感じでGoogleアカウントさえあればすぐに使えちゃいます。

3. パスを指定してコードファイルを読み取らせることができる

　プログラムを書いている時、プロンプトにコードを貼り付けていませんか？

　この時よく回答で「この関数やクラスは定義されているのか」とか貼ったコード以外の箇所を聞かれることが多いと思います。

　しかし、プロンプトに関係するコードすべてを貼り付けるのは量も多いし大変ですよね？

　なんと、Gemini CLIはプロジェクトのフォルダーのパスを指定して読み取りをさせることができます！

　プロジェクト内のファイルを読んでもらうことでプロンプトの作成も楽で回答も的確です。

　試しに今回作成したTodoアプリのフォルダを指定してどんなものが書かれているか説明してもらいました！

リクエスト

回答

注意点：セキュリティ面は少し不安なので読ませる情報には注意しましょう。

　VSCodeで使用する場合、拡張機能としてGemini Code Assistをインストールしプライバシー設定から学習されないようにしましょう（チェック外すだけ）。

4.無料で1日1000リクエストまで使える！

　2025年7月時点ではGemini CLIは1日1000リクエストまで無料で使用できます！

　無料ですよ？ しかも1日1000リクエストなんて個人で使用するだけなら気にする必要もありません！

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

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

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

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

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

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

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

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

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

1. はじめに

「（ディレクトリパス）でバックエンドをGo、フロントエンドをVue3でTodoアプリを作成したい」とGemini CLIに指示しました。

　すると、指定したディレクトリにフォルダを作成するかどうか聞かれます。これを承諾するとフォルダが自動で生成されます。

2. バックエンド（Go）

　次にGoの環境構築に取り掛かります。

　Geminiが提案するコマンドを承認するか、表示されたコマンドを自分でターミナルに貼り付けて実行するだけで、セットアップができました。

　続いて、単純な「Hello, World!」の表示から始め、Todoアプリの基本機能であるPOST、GET、PUT、DELETEのAPIを実装してもらいました。

　開発中にエラーが発生しても、そのエラーメッセージをプロンプトに貼り付けるだけで、Geminiが的確な解決策を提示してくれました。

3. フロントエンド（Vue3）

　バックエンドの実装が一段落したところで、フロントエンド（Vue3）の実装に移ります。こちらも、まずは環境構築からでした。

　環境構築後、バックエンドと同様に「Hello, World!」から始め、先ほど作成したAPIと連携（つなぎこみ）しながら、GET、POST、DELETE、PUTの各機能を実装していきました。

　この時点でTodoアプリの基本的な機能は完成です。さらにGeminiから「追加したい機能はありますか？」と尋ねられるので、ここから自由な発想で機能を追加できます。

4. クリーンアーキテクチャへのリファクタリング

　この時点では、バックエンドの処理がすべてmain.goファイルに書かれていたため、好奇心からクリーンアーキテクチャへのリファクタリングを依頼してみました。

　結果、特にエラーが発生することもなく、うまくに責務の分離（役割ごとのファイル分割）が実現できました。

5. CSSをTailwindに書き換え

　フロントエンドは、<style> タグに直接CSSを記述するシンプルな実装だったので、人気のCSSフレームワークであるTailwind CSSへの書き換えも試してもらいました。

　Geminiの指示に従い、まずはTailwind CSSのパッケージをインストール。その後の書き換え作業でも、表示がほとんど崩れることなく、スムーズに置き換えが完了したことを確認できました。

6. 追加の機能（カレンダーの追加）
　
　追加機能として、カレンダーの実装もお願いしてみました。プロンプトには「カレンダー機能を実装して」と入力しただけですが、日付ごとのタスク数をバッジで表示する機能や、タスクのフィルター機能まで実装してくれてびっくりしました。
こちらが仕様を細かく指定すれば、かなり高度な機能でも実装してくれそうです。

　こんな感じでTodoアプリを作成してもらいました!!!

　こう見ると結構適当ですね。でもこんな適当でもTodoアプリが作成できたのすごくないですか？

まとめ

　Gemini CLIほんとに良いツールだと思いました。個人開発ではかなり活躍するのではと期待しています。

　しかし、今回Todoアプリの作成において自分が行ったことは指示に沿ってコマンドを実行することや、Gemini CLIの操作前に行われる確認でEnterキーを押すだけでした。

　本来の目的である「Go言語の理解」をする前にTodoアプリが完成してしまったのです...

　裏を返せば、ほとんどGo言語を理解していなくてもTodoアプリが簡単に作れてしまうことはとてもすごいと捉えられますが、勉強目的の場合はもっとプロンプトで質問や確認をしながら行うといいと思いました。

　ほんとすぐ始められるので、少しでも興味あれば試してみてください！