この記事では、Expo Goで始めるReact Native超入門で作成したToDoアプリの各アイテムに期日の設定・編集・解除できる機能をGPT‑5.1-Codex-Max を使ってVibe Coding でサクッと実装する方法を紹介しています。
GPT-5.1-Codex-Maxは、OpenAIが2025年11月19日に発表した、「自律型エージェント」としての能力を高めた最新のコーディング特化モデルです。
GPT‑5.1-Codex を上回る性能を発揮しつつ、思考トークンを30%削減しています。
なお、GPT-5-Codexの導入と使い方に関しては、以下の記事を参考にしてください。
ToDoアプリに期日機能を追加する
次にGPT-5.1-Codex-Maxを使ってのVibe Codingの具体的な作業を紹介しています。
Codex CLI を入れる
公式の手順どおりに Codex CLI をインストールします。 OpenAI Developers+1
Node.jsがインストールされている環境で、以下のコマンドを実行します。
# npmコマンドを使ってCodex CLIをインストール
$npm i -g @openai/codex
# codexの起動
$codex/modelコマンドで、GPT-5.1-Codex-Maxを選択し、動作モードにmediumを選択します。
/Approvalコマンドで、効率的な作業と安全のために承認モードをAgentに設定しておきます。
機能追加前のプロジェクトをコミットする
# コミットの実行例
$git add .
$git comit -m"before Vibe Coding"ブランチを作成する
期日機能の追加作業を、新しいブランチ上で行います。
# 期日機能の追加作業用にブランチを作成し、ブランチを切り替えます。
$git checkout -b ブランチ名GPT-5.1-Codex-Maxにプロジェクト内容を把握させる
/initコマンドで、GPT-5.1-Codex-Maxにプロジェクト内容を把握させます。
GPT-5.1-Codex-Maxは、このコマンドで、プロジェクトの開発状況と開発スタイルを学習し、AGENTS.mdを作成します。
# initコマンド実行例
• 現在の構成を整理した AGENTS.md を追加しました。
- プロジェクト概要・画面構成・ストレージキー（tasks/archives）・依存関係・スクリプト・未使用テンプレートの位置を記載。
- ルーティング階層や各タブ画面の機能を簡潔にまとめています。
ファイル: AGENTS.md
テスト: 未実行（ドキュメント追加のみ）。# 作成されたAGENTS.md
$ cat ./AGENTS.md
# プロジェクト概要（/home/omo-y/rn/my-todo-app）
## ナビゲーション
- Expo Router + React Navigation を使用。`app/_layout.tsx` で Stack を定義し、`(tabs)` を初期ルートに設定。`modal` 画面は未実装。
- `app/(tabs)/_layout.tsx` でボトムタブを構成し、`index`（Home）/`todo`/`archive` を登録。
## 画面と機能
- Home (`app/(tabs)/index.tsx`): 静的な案内カードのみ。状態や保存処理なし。
- ToDo (`app/(tabs)/todo.tsx`):
- `AsyncStorage` をキー `tasks` で使用。タスク型 `{ id, title, done }`。
- 読み込みは `loadTasks` を `useEffect`（初回）と `useFocusEffect`（タブ復帰）で実行。
- 追加（入力バー/`addTask`）、完了トグル、削除、フィルタ（all/undone/done）、完了のみ削除、全削除、完了タスクのアーカイブ移動（キー `archives`）を実装。
- リストは未完→完了の順で表示。UI は Ionicons とシンプルなカード/チップ。
- Archive (`app/(tabs)/archive.tsx`):
- `AsyncStorage` のキー `archives` を読み込み。`useFocusEffect` でタブ復帰時に再取得。
- 復元（`tasks` に `done:false` で先頭追加）、削除を実装。プルリフレッシュ対応。
## 依存・スクリプト
- Expo 54 / React Native 0.81 / React 19。Router 6。Storage は `@react-native-async-storage/async-storage`。
- スクリプト: `npm start` / `npm run android` / `npm run ios` / `npm run web` / `npm run lint` / `npm run reset-project`（テンプレートを `app-example` へ退避し空の `app` を生成）。
## その他
- `app-example/` 配下にテンプレートコードが残存（現行ルーティングでは未使用）。プロンプトを入力する
# 入力プロンプト例
$この Expo (React Native) の基本 TODO アプリに、各 TODO アイテムへ「期日（Due date）」を設定・編集・解除できる機能を追加してください。プロンプトを入力すると、GPT-5.1-Codex-Maxは作業計画を作成し、機能追加作業を開始します。
# 機能追加作業の開始
• I'm outlining a multi-step plan to add an optional ISO-format dueDate field to tasks with UI for setting, editing, and clearing via a custom modal including presets and text input, avoiding new
dependencies due to network restrictions. Next, I'll update storage, task types, UI, and persistence logic accordingly.
• Updated Plan
└ 機能追加にあたり、データ構造変更と UI 追加の段階を分けて進めます。
□ 設計：Task 型に dueDate 追加、ストレージキー保持、UI フロー（モーダル入力＋クイック選択）と保存・クリア動作を決定
□ 実装：todo 画面に期日表示・編集モーダル追加、ストレージ読み書き更新、アーカイブ処理で期日保持
□ 確認：lint/最低限の自己チェック、影響範囲メモ
• Planning to add an optional dueDate string property to tasks, with a date-format helper and UI modal for editing, including validation and quick presets; tasks without dueDate must fallback
gracefully, and due dates display on cards with color indicating overdue status. Archive UI and task types also need minimal updates to support dueDate without breaking existing flows.
• I'm reopening the file to check surrounding lines and confirm if the patch failed due to indentation issues, aiming to reapply it with possible splitting.
• Explored
└ Read todo.tsx
～以下 ファイル更新作業が継続します。
作業中に応答が必要な場合は対応し、エラーが発生した際にはエラー内容を入力してから作業を継続します。
今回の作業結果
# GPT-5.1-Codex-Maxからの応答
- アーカイブ画面でも該当タスクのDue日が表示されるようにしました。
- 既存のタスクデータはそのまま継続使用され、新機能は互換性を保ちながら追加されています。
- 日付入力は手動でYYYY-MM-DD形式を受け付けており、クイックプリセット機能で迅速な設定が可能ですが、入力補助は限定的です。
- 今回の変更に対するテストは実行していません。
- 次のステップとして、npm run lintの実行や動作の手動確認を推奨します。
コミットメッセージ案:
"タスクのDue日機能を追加：Dueラベル表示、モーダル設定、クイックプリセットおよびクリア機能対応"
テスト: 未実行（手元での動作確認はこれから必要です）。
次のステップ案: 1) 実機/エミュレータで期日設定・クリア・アーカイブ/復元の挙動を確認 2) npm run lint を実行。実機でテストした場合、カレンダーアイコンをタップしても文字入力画面になり、日付が入力できなかったため、以下のプロンプトを入力する。
#エラー状態の有力
カレンダーアイコンをタップすると文字入力画面になり期日は入力できない。GPT-5.1-Codex-Maxから以下の応答が帰る。
# GPT-5.1-Codex-Maxからの応答
• ご不便おかけしました。現状のカレンダーアイコンは「期日入力用モーダル（手入力＋プリセット）」を出すだけで、ネイティブのカレンダーUIではないため、入力しづらく感じられている状態です。
改善案：
- カレンダーアイコンから iOS/Android のネイティブ日付ピッカーを開くように変更。
- 「期日なしに戻す」「今日」「明日」「1週間後」などのショートカットも維持。
- 期日を決定したら即保存される挙動にして、入力で迷わないようにする。
この実装には @react-native-community/datetimepicker の追加が必要になります。追加して進めてよいでしょうか？はいと回答を行うと、下記の通り修正作業が始まる。
• Updated Plan
└ ネイティブ日付ピッカー導入とUI刷新のため段階的に進めます。
□ パッケージ導入と設計更新：datetimepicker追加、Task型/ストレージ互換性確認、UIフロー（ピッカー＋プリセット＋クリア）設計
□ 実装：期日ピッカー導入、モーダルUI更新、保存挙動（即保存/クリア含む）
□ 確認：lint実行と挙動確認の案内
✔ You approved codex to run npm install @react-native-community/datetimepicker this time修正作業完了後に以下の応答が帰る。
# GPT-5.1-Codex-Maxからの応答
• 期日設定をネイティブ日付ピッカーに対応させました。
- app/(tabs)/todo.tsx: 期日モーダルを DateTimePicker ベースに刷新（カレンダーアイコンから直接日付選択）。プリセット（今日/明日/1週間後）、期日クリア、保存をサポート。Task 型に dueDate を残しつつ
保存・表示をそのまま継承。
- app/(tabs)/archive.tsx: 期日表示を追加し、復元時も期日を維持。
- 依存追加: @react-native-community/datetimepicker を導入（Expo 管理ワークフロー対応）。
テスト: 未実行（必要なら npm run lint と実機/エミュレータでの動作確認をお願いします）。
コミットメッセージ案: feat: add native due date picker for tasks
次の一手: 1) 実機でカレンダーアイコン→日付選択→保存/クリアの確認 2) アーカイブ/復元後も期日が保持されることを確認。
実機での確認を行い、問題なかったので、返答とAGENTS.mdの更新を依頼する。
# GPT-5.1-Codex-Maxへの回答
実機で機能確認した。Agents.mdを更新してください。# GPT-5.1-Codex-Maxからの応答
• Agents.md を更新し、期日機能と依存追加を反映しました。
- ToDo: Task型に dueDate を追記し、カレンダーアイコン→モーダルで DateTimePicker を使った期日設定（プリセット/クリア/保存）を記載。カード表示で今日/明日/期限切れの色分けを明示。
- Archive: 期日表示と復元時の期日保持を記載。
- 依存: @react-native-community/datetimepicker を追加した旨を追記。
ファイル: AGENTS.md
コミットメッセージ案（前回に続けてまとめる場合）: chore: update agents guide with due date pickerAGENTS.mdの確認
# 作成されたAGENTS.md
$ cat ./AGENTS.md
# プロジェクト概要（/home/omo-y/rn/my-todo-app）
## ナビゲーション
- Expo Router + React Navigation を使用。`app/_layout.tsx` で Stack を定義し、`(tabs)` を初期ルートに設定。`modal` 画面は未実装。
- `app/(tabs)/_layout.tsx` でボトムタブを構成し、`index`（Home）/`todo`/`archive` を登録。
## 画面と機能
- Home (`app/(tabs)/index.tsx`): 静的な案内カードのみ。状態や保存処理なし。
- ToDo (`app/(tabs)/todo.tsx`):
- `AsyncStorage` をキー `tasks` で使用。タスク型 `{ id, title, done }`。
- 読み込みは `loadTasks` を `useEffect`（初回）と `useFocusEffect`（タブ復帰）で実行。
- 追加（入力バー/`addTask`）、完了トグル、削除、フィルタ（all/undone/done）、完了のみ削除、全削除、完了タスクのアーカイブ移動（キー `archives`）を実装。
- リストは未完→完了の順で表示。UI は Ionicons とシンプルなカード/チップ。
- Archive (`app/(tabs)/archive.tsx`):
- `AsyncStorage` のキー `archives` を読み込み。`useFocusEffect` でタブ復帰時に再取得。
- 復元（`tasks` に `done:false` で先頭追加）、削除を実装。プルリフレッシュ対応。
## 依存・スクリプト
- Expo 54 / React Native 0.81 / React 19。Router 6。Storage は `@react-native-async-storage/async-storage`。
- スクリプト: `npm start` / `npm run android` / `npm run ios` / `npm run web` / `npm run lint` / `npm run reset-project`（テンプレートを `app-example` へ退避し空の `app` を生成）。
## その他
- `app-example/` 配下にテンプレートコードが残存（現行ルーティングでは未使用）。追加した期日機能をコミットする
# 期日機能をコミットする
$ git add .
$ git status
On branch feat/add-Deadline_Setting
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: AGENTS.md
modified: app/(tabs)/archive.tsx
modified: app/(tabs)/todo.tsx
modified: package-lock.json
modified: package.json
$ git commit -m"chore: update agents guide with due date picker"
[feat/add-Deadline_Setting 1340ede] chore: update agents guide with due date picker
5 files changed, 272 insertions(+), 17 deletions(-)
