Codex で何かつくってみる

目次

  1. 1. 何を作るか
  2. 2. 仕様書をつくってみよう
    1. 2.1. 壁打ち用叩き台
    2. 2.2. 細かい仕様を詰めていく
    3. 2.3. 技術スタックを決めていく
    4. 2.4. 実装計画をざっくり決めておく
  3. 3. 実装を進めていく
    1. 3.1. アプリのリポジトリを用意する
    2. 3.2. 実装指示
  4. 4. 完成
    1. 4.1. 一覧ページ
    2. 4.2. 詳細ページ
  5. 5. 所感
mv

以前の日記 で OpenAI Codex を使っているという話を書きました。このサイト関連のいろいろ細かいタスクを任せていってはいるものの、まっさらなところから何かを作らせてみたことはまだなかった気がしたので、テストも兼ねてやってみました。今日はそのへんを追ってみたという内容になります。

何を作るか

兎にも角にもまずは何を作るかを決める必要があります。

ちょうどそんなときに前身サイトにあったFC2掲示板からエクスポートしたテキストファイルが手元にあり、別にこのままでも見れなくはなんですがWEBできれいに見れるようにしたいというのが頭にあったことを思い出しました。

アプリ試作のお題としても、自分で作れなくもないが1からやるのはやや面倒というあたりが非常にちょうどいいということもあり、今回はこれをお題としてみることにしました。

仕様書をつくってみよう

お題が決まったところで、これを元に詳しい仕様を決めていきます。仕様書も AI と壁打ちして決めていきます。これは Codex でもいいし、ChatGPT でもよいです。自分は Codex で仕様書も作りました。

壁打ち用叩き台

壁打ちするにもまずは大まかなところを決めます。これは自分でやります。ただし、あまり細かくする必要はありません。

実際に最初に投げたざっくり仕様は以下のとおりです。

## 作りたいもの
FC2の掲示板からエクスポートしたtxtファイルを読み込ませて、WEBで見れるようにホスティングするアプリ。

## 使うひと
自分がローカルで使う

これを元にアプリの仕様書を作りたいと Codex に指示をします。「仕様書化するにあたり、足りない点があれば随時質問してください」とも言っておくとAIがヒアリングもしてくれます。

細かい仕様を詰めていく

ということでやりとりが始まってしまえば、あとは随時質問に回答してくだけです。自分がこのときに聞かれたことはだいたい次のとおりです。

  • 読み込むデータの形式
    • テキストファイルに記載されているデータがどのような構造になっているか
    • スレッド、リプライそれぞれ
  • 画面イメージ
    • 今回の掲示板であれば各スレッド、リプライをどのように表示したいか(ざっくりでOK)
    • 読み込ませたデータのうち画面には何をどこまで表示させるか、マスクの有無など
  • アプリの構成
    • 静的サイトジェネレータのようにするか、ブラウザ上でtxtをアップロードする形とするか、など
    • 自分は前者で指示

技術スタックを決めていく

このへんも必要に応じて指示を出していきます。自分は下記を指定しました。

  • React
  • TypeScript
  • Vite
  • Tailwind CSS

とはいえ向こうから技術スタックについても提案は出してくれるので、とくにこだわりがなければ任せてもOKです。

このへんを決めていくと仕様書のドラフト版的なものがほぼできあがります。厳密には他にも細かいところをいろいろ聞かれましたが、大筋はこのようなものです。

実装計画をざっくり決めておく

手戻りを防ぐ意味も含め、 Codex には段階的に指示を出していくことが望ましいです。それをそのままAIに伝え、段階的な実装計画をつくっておくと、このあとの進め方やフェーズの切りどころがスムーズに決定できるのでおすすめします。

今回の実装計画は以下のようなものです。ざっくりでOKです。

1. 雛形
2. parser CLI
3. parser test
4. JSON生成
5. 一覧画面
6. 詳細画面
7. 検索
8. UI改善

実装を進めていく

仕様書が出来上がったらあとはそれを元に Codex に実装をさせていきます。

アプリのリポジトリを用意する

Codex での実装を進める前に、まずはアプリ用プロジェクトを格納するリポジトリを用意し、その中にさきほど作った仕様書を格納しておきます。

こんなかんじです。Git 管理もしますので厳密には .git もありますがここでは省略します。

project-root
└── docs
    └── spec.md

実装指示

Codex のプロンプトにまずは以下のように指示を出しました。

docs/spec.md を読んで、この仕様に基づく初期プロジェクトを作成してください。

今回はフェーズ1として、以下だけ実施してください。

- Vite + React + TypeScript のプロジェクトを作成
- Tailwind CSS を導入
- ESLint を導入
- docs/spec.md の仕様に合うディレクトリ構成を作成
- input/.gitkeep を残す
- public/data/.gitkeep を作成
- README.md にセットアップ手順、npm scripts、開発方針を書く
- まだパーサーや画面機能は実装しない

完了後、変更ファイル一覧と次に実装すべきフェーズ2の提案を説明してください。

仕様書はあるので一気に作成させることも可能ですが、このように段階的に指示を出しておき、節目で自分がチェックしておかしければ修正してから先に進めるようにしたほうが手戻りが少なくてすみます。まあこのへんは人間に実装してもらうときと同じと考えておけば自然かと思います。先ほど用意した実装計画も見つつ、乖離がないかを確認していくとよいです。

あとはだいたい以下のサイクルで作業を進めていきます。

実装　→　チェック(場合によっては修正)　→ 次フェーズのゴール提案を指示　→　チェック　→　OKなら作業を指示

なお、Git のコミットは指示ごとに行いました。拡張機能などを併用し、Codex にそのままコミットメッセージの生成とコミットまでさせることも可能なようですが、とりあえずここでは差分を自分で確認しつつ手動コミットしました。

完成

ということで基本機能はできました。実際の成果物はこちらです。

以下は実際にスレッドを表示させたものです。内容は一応伏せてますが、とくにマズいことが書いてあるわけではなくあまりに大昔の自分の発言内容を晒すのが単に恥ずいだけです。スタイルはまだ簡素なのでもうちょっとなんとかしたいとは考えていますが、とりあえず機能的にはこれでほぼ完成です。

一覧ページ

一覧

詳細ページ

詳細

所感

かかった時間の8割はやりとりと作業内容と動作の確認ですが、それでもトータル2時間弱でここまでできました。自分で実装してたらこうはいかなかったと思います。

もっとAIに任せることのできる余地はあるので、そのへんも含めてもう少し使い倒していこうとおもいます。

スポンサーリンク
share