G-genの西田です。当記事では、Gemini CLI での対話だけで、To Do タスクを管理するWebアプリケーションの開発手順を紹介します。

はじめに

当記事について

当記事では、Webアプリケーションの開発経験が無い方でも、Gemini CLI を利用して To Do タスクを管理するWebアプリケーションを開発する際の進め方をご紹介します。

前編では、アプリケーションの基本的な動作や画面を確認できるプロトタイプを作成することを目的として、Gemini を利用した要件定義から始めて、ローカル環境で動作確認を行うレベルの開発を実施していきます。

この記事では、Gemini CLI や Cloud Shell などを活用し、Web ブラウザだけで要件定義から開発までを一気通貫に行うことを目指します。

Gemini CLI とは、ターミナルから直接 Gemini の機能を利用できるオープンソースのコマンドラインインターフェイスです。詳しくは以下の記事をご覧ください。

blog.g-gen.co.jp

Cloud Shell とは、Google Cloud コンソール上で起動する仮想的な Linux ターミナルです。コードエディタも付属しており、Web ブラウザだけで開発を完結させることができます。以下の記事も参考にしてください。

blog.g-gen.co.jp

開発ステップ

Gemini CLI で開発を行う際、以下のステップを踏むことで開発をスムーズに進めることができました。

Gemini を壁打ち相手としながら、開発したいアプリケーションの要件定義を行う
壁打ちで決まった要件定義の内容と、開発計画を別のファイルに切り出して管理するよう指示する
要件定義と開発計画のファイルを参照しながらの開発を指示する。開発の進捗は開発計画ファイルに都度記録する
アプリケーション画面や動作を確認し、必要があれば機能追加や修正を指示する。その際、要件定義や開発計画ファイルも更新する

開発の初心者にとって特に便利なのは、1つ目の要件定義を Gemini と相談しながら進められる点です。

要件定義に協力してほしい旨のプロンプトを入力するだけで、実装する機能や使用する技術スタックについてなど、必要な要件について質問されるので、それに答えることで要件を決めていくことができます。

また、2つ目の要件定義と開発計画をファイルに切り出して管理しておくことも有効でした。開発作業を一旦中断した後に途中から再開する場合や、最初に決めた要件を変更する際などに、これらのファイルを読み込んでからアクションを実施するように指示することができます。

いずれのステップも Gemini に「要件定義の内容をファイルに切り出して」というような自然言語の指示を出すことで処理が実行されるので、簡単に進めることができます。

Gemini CLI の起動

Google Cloud コンソールにアクセスし、アプリケーションを開発するプロジェクトを選択したら、画面右上の [Cloud Shell をアクティブにする] アイコンをクリックします。

ターミナルが起動したら、 [エディタを開く] をクリックします。

エディタ画面の左上の [Terminal] タブの中の [New Terminal] を選択します。

以下のコマンドを実行して、アプリケーション開発用のディレクトリの作成とカレントディレクトリの移動を行います。

mkdir todo-app-demo
cd todo-app-demo

開発用ディレクトリの準備が完了したら、gemini とコマンドを入力して、Gemini CLI を起動します。

以下のような画面が立ち上がれば成功です。

要件定義と開発計画の決定

アプリケーション開発の最初のステップとして、Gemini を活用して要件定義と開発計画の策定を実施します。まずは以下のようなプロンプトを入力します。

To Do タスクの管理を行うWebアプリケーションを開発します。要件定義の壁打ち相手になってください。
アプリケーションを開発していく上で、必要な要件を抜け漏れがないように洗い出してください。
まずは画面や動作確認を実施するため、ローカルで動作する構成で開発します。

なおプロンプトは、「Type your message or @path/to/file」と記載されている入力欄から送信します。

プロンプトを送信後、基本機能や画面構成についてなどについての以下のような提案が返ってくるので、自然言語で対話しながら要件を詰めていきます。

✦ 承知いたしました。ToDoアプリケーションの要件定義、一緒に進めていきましょう。
  まずはアプリケーションに必要な最小限の機能を洗い出してみました。抜け漏れや、追加したい項目がないかご確認ください。

  ---

  ToDoアプリケーション 要件定義（案）

  1. 基本機能（タスク管理）

   * タスクの作成
       * タスクのタイトルを入力して新しいタスクを追加できる。
       * (オプション) タスクの詳細な説明メモを追加できる。
       * (オプション) タスクの期限日を設定できる。
   * タスクの一覧表示
       * 登録したタスクが一覧で表示される。
       * 各タスクの「完了／未完了」の状態がわかる。
   * タスクの更新
       * タスクのタイトルや詳細、期限を編集できる。
       * タスクを「完了」状態に変更できる。（チェックボックスなど）
       * 完了したタスクを「未完了」に戻せる。
   * タスクの削除
       * 不要になったタスクを削除できる。

  2. 画面構成

   * メイン画面
       * タスクの入力フォーム
       * タスク一覧
       * (オプション) 未完了／完了済みタスクを切り替えて表示するフィルタ

  3. 非機能要件（今回はローカル動作が前提）

   * データ永続化
       * ブラウザを閉じてもタスクが消えないように、データをローカルに保存する。（例:
         ブラウザのローカルストレージ、ローカルファイルなど）
   * UI/UX
       * 直感的に操作できるシンプルなデザインにする。

  ---

  いかがでしょうか？
  特に、タスクに「優先度（高・中・低など）」や「カテゴリ（仕事・プライベートなど）」といった情報を追加したい、などのご
  要望はありますか？

  まずはこの内容で進めて、開発の途中で必要になった機能を追加していく形でも良いかと思います。

今回は、上記の提案に対し、以下のプロンプトを返して要件定義を進めていきます。

基本機能と画面構成については、提案通りの内容で異論ありません。
データの保存については、 MySQL を使用してください。

Gemini とのやり取りを通じて要件定義の内容が固まったら、ステップの2つ目である要件定義、開発計画の内容を別ファイルに切り出します。ファイルを切り出して記録することで、作業を途中から再開する際や、要件定義の内容を変更する場合に、これらのファイルを読み込んでからアクションをするように指示することができます。プロンプト例は以下の通りです。

開発を進める前に、要件定義の内容と開発計画の内容を別のファイルに切り出して、出来るだけ詳細に記録してください。
また、開発計画を記録するファイルで開発作業の進捗も管理できるようにしてください。
ファイルは新しく「docs」というフォルダを作成して、その中に保存してください。

要件定義の内容がまとめられた requirements.md は以下の通りです。

# ToDoアプリケーション 要件定義書
  
## 1. 概要
  
本ドキュメントは、ToDoタスク管理アプリケーションの要件を定義する。
このアプリケーションは、ユーザーが日々のタスクを効率的に管理することを目的とする。
  
## 2. データモデル
  
アプリケーションで扱うタスク（Todo）は、以下のデータ項目で構成される。
  
- **id**: `Integer`, 主キー, 自動採番
- **title**: `String(200)`, タスクのタイトル, **必須**
- **description**: `Text`, 詳細な説明, 任意
- **due_date**: `Date`, 期限日, 任意
- **completed**: `Boolean`, 完了状態 (True: 完了, False: 未完了), デフォルト: `False`
- **created_at**: `DateTime`, 作成日時, 自動記録
- **updated_at**: `DateTime`, 更新日時, 自動記録
  
## 3. 機能要件
  
### 3.1. タスク作成機能
  
- ユーザーはタスクのタイトルを入力して、新しいタスクを作成できる。
- タイトルは必須入力とし、空の場合は登録できず、エラーメッセージを表示する。
- オプションとして、詳細な説明と期限日を設定できる。
- タスク作成後、ユーザーはタスク一覧画面にリダイレクトされる。
  
### 3.2. タスク一覧表示機能
  
- 登録されているすべてのタスクを一覧で表示する。
- デフォルトの表示順は **作成日時の降順（新しいものが上）** とする。
- 完了済みのタスクは、未完了のタスクと視覚的に区別できるように表示する（例: タイトルに取り消し線、背景色を変更）。
- (将来的な拡張) 「すべて」「未完了」「完了済み」の状態でタスクをフィルタリングして表示する機能。
  
### 3.3. タスク更新機能
  
- **状態の更新**:
  - 一覧画面上のチェックボックスをクリックすることで、タスクの「完了」「未完了」を即座に切り替えられる。
- **内容の編集**:
  - 各タスクに編集ボタンを設け、クリックすると編集ページに遷移する。
  - 編集ページでは、タイトル、詳細、期限日を変更できる。
  - 更新後、タスク一覧画面にリダイレクトされる。
  
### 3.4. タスク削除機能
  
- 各タスクに削除ボタンを設ける。
- 削除ボタンをクリックすると、「本当に削除しますか？」という確認ダイアログを表示する。
- 「OK」を選択した場合、タスクをデータベースから削除し、一覧画面を更新する。
  
## 4. 画面仕様
  
### 4.1. メイン画面（タスク一覧）
  
- **ヘッダー**:
  - アプリケーションのタイトル（例: "ToDo App"）を表示する。
- **タスク追加フォーム**:
  - タイトル入力用のテキストフィールド (`<input type="text">`)
  - 追加ボタン (`<button type="submit">`)
- **タスク一覧**:
  - タスクが存在しない場合、「登録されているタスクはありません」というメッセージを表示する。
  - 各タスクは以下の要素で構成される:
    - 完了状態を示すチェックボックス
    - タスクのタイトル
    - 期限日（設定されている場合）
    - 編集ボタン
    - 削除ボタン
  
### 4.2. 編集画面
  
- 選択したタスクの現在の内容（タイトル、詳細、期限日）がフォームに設定された状態で表示される。
- 更新ボタンと、一覧に戻るためのキャンセル（または戻る）リンクを配置する。
  
## 5. 非機能要件
  
### 5.1. URL設計
  
- `GET /`: タスク一覧ページ
- `POST /add`: 新規タスク作成処理
- `POST /update/<int:id>`: タスク完了状態の更新処理
- `POST /delete/<int:id>`: タスク削除処理
- `GET /edit/<int:id>`: 編集ページの表示
- `POST /edit/<int:id>`: タスク内容の更新処理
  
### 5.2. データ永続化
  
- すべてのタスクデータは **MySQL** データベースに永続化する。
  
### 5.3. ユーザビリティ
  
- 直感的で、最小限の操作でタスク管理ができるシンプルなUIを提供する。
  
### 5.4. エラーハンドリング
  
- データベース接続失敗など、システムレベルのエラーが発生した場合は、汎用的なエラーページを表示する。
- ユーザーの入力エラー（例: タイトルが空）については、フォームの近くにエラーメッセージを表示する。

開発計画が記録される development_plan.md は以下の通りです。

# ToDoアプリケーション 開発計画書
  
## 1. 進捗サマリー
  
- [ ] フェーズ1: 基盤構築
- [ ] フェーズ2: 機能実装
- [ ] フェーズ3: 仕上げ
  
## 2. 技術スタック
  
- **Webフレームワーク**: Python / Flask
- **データベース**: MySQL
- **DB接続ライブラリ (ORM)**: Flask-SQLAlchemy
- **テンプレートエンジン**: Jinja2
- **開発環境**: Docker (MySQL), Python venv
  
## 3. プロジェクト構成
.  
├── docs/
│   ├── development_plan.md
│   └── requirements.md
├── static/
│   └── css/
│       └── style.css
├── templates/
│   ├── base.html
│   ├── index.html
│   └── edit.html
├── venv/
├── .gitignore
├── app.py
├── docker-compose.yml
└── requirements.txt
  
## 4. 開発タスク詳細
  
### フェーズ0: 計画 (完了)
  
- [x] 要件定義 (`docs/requirements.md`)
- [x] 開発計画策定 (`docs/development_plan.md`)
  
### フェーズ1: 基盤構築
  
- [ ] **1. 環境構築**
    - [ ] `docker-compose.yml` の作成
    - [ ] `requirements.txt` の作成
    - [ ] `docker-compose up -d` でMySQLコンテナを起動する
    - [ ] `python3 -m venv venv` で仮想環境を作成し、アクティベートする
    - [ ] `pip install -r requirements.txt` で必要なライブラリをインストールする
- [ ] **2. Flaskアプリケーション初期化 (`app.py`)**
    - [ ] Flaskアプリのインスタンスを作成する
    - [ ] SQLAlchemyのデータベース接続設定を行う
    - [ ] SQLAlchemyのインスタンスを初期化する
- [ ] **3. データモデル定義 (`app.py`)**
    - [ ] `Todo` モデルクラスを定義する
- [ ] **4. データベーステーブル作成**
    - [ ] `flask shell` 等で `db.create_all()` を実行し、テーブルを作成する
  
### フェーズ2: 機能実装
  
- [ ] **5. HTMLテンプレートの骨格作成 (`templates/`)**
    - [ ] `base.html` の作成
    - [ ] `index.html` の作成
    - [ ] `edit.html` の作成
- [ ] **6. タスク一覧表示・追加機能の実装 (`app.py`, `templates/index.html`)**
    - [ ] ルーティング (`GET /`) の実装
    - [ ] テンプレート (`index.html`) でのタスク一覧表示
    - [ ] テンプレート (`index.html`) でのタスク追加フォーム作成
    - [ ] ルーティング (`POST /add`) の実装
- [ ] **7. タスク状態更新・削除機能の実装 (`app.py`, `templates/index.html`)**
    - [ ] ルーティング (`POST /update/<int:id>`) の実装
    - [ ] ルーティング (`POST /delete/<int:id>`) の実装
    - [ ] テンプレート (`index.html`) での更新・削除ボタンの実装
- [ ] **8. タスク編集機能の実装 (`app.py`, `templates/edit.html`)**
    - [ ] ルーティング (`GET /edit/<int:id>`) の実装
    - [ ] テンプレート (`edit.html`) での編集フォーム作成
    - [ ] ルーティング (`POST /edit/<int:id>`) の実装
  
### フェーズ3: 仕上げ
  
- [ ] **9. スタイリングと微調整**
    - [ ] CSS (`static/css/style.css`) の作成と適用
    - [ ] Flaskのflashメッセージ機能等でエラー表示を実装
    - [ ] 総合テストとデバッグ

アプリケーションの開発

開発の開始

要件定義と開発計画の確認を終えて開発の準備が完了したら、以下のようなプロンプトで開発を開始していきます。前述の参考ステップ3の通り、要件定義と開発計画を記載したファイルを読み込ませた上で、開発作業を進めるよう指示します。

@docs/requirements.md と @docs/development_plan.md の内容に従って、アプリケーション開発を進めてください。

このように、@マークの後にファイルのパスを記述することで、Gemini に参照してほしいファイルを指示することができます。

Gemini がファイルの作成や更新を実施する前には「〇〇を作成します。よろしいですか？」といったように作業内容を確認されます。その処理内容に対するリアクションを選択肢の中から選びます。上下の矢印キーで選択肢を切り替えて、Enterを押すことで選択できます。

以降は、Gemini が開発計画に従って処理を進めてくれるので、処理内容の確認に対して都度リアクションを行います。当記事の執筆にあたっては、Gemini から提案された作業内容に対して全て「Yes, allow once」で答えて進めています。

また作業の途中で、以下のように作業進捗を記録する指示を入力して development_plan.md を更新することで、完了した作業を記録することも効果的です。上記の開発計画の中では、各フェーズが完了するたびに、以下のプロンプトを入力しました。

ここまでの作業内容を、@development_plan.md に記録してください。

動作確認

開発計画の作業が最後まで完了したら、ローカルでアプリケーションを起動して画面や動作を確認します。

アプリケーションをローカルで起動してください。

筆者の環境では、http://127.0.0.1:5000 にアクセスするように促されましたので、アクセスして確認を進めます。

初期画面

タスクを追加後

タスクの編集画面

完了チェックをオン

To Do 管理のアプリケーションとしては、まだまだ機能追加が必要ですが、要件として定義していた最低限の機能は想定通りに動作することが確認できました。

アプリケーションの修正

今後、機能を追加する場合を想定して、以下のような指示を出してみます。

追加の機能要件として、タイトルに含まれている文言からタスクを検索する機能を加えてください。
また、その内容を @requirements.md と @development_plan.md に追記してください。

Gemini によるコード修正後、無事に検索ワードの入力欄が追加されていることと、検索ワードによるフィルタリングが機能していることが確認できました。

はじめに

当記事について

開発ステップ

Gemini CLI の起動

要件定義と開発計画の決定

アプリケーションの開発

開発の開始

動作確認

アプリケーションの修正

Gemini CLIとGitHub Actionsでプルリクエストのレビューを自動化してみた

BigQuery remote MCP serverを使ってみた

Cloud RunにMCPサーバーをデプロイしてみた

Gemini CLIとVirtual Try on APIで試着アプリを開発してみた

Gemini CLI で実現する AI Agent 時代のプロダクト開発（Google Cloud Next Tokyo '25セッションレポート）