OpenAI Codexで簡単なWebアプリを作成してみる

Y.Yoshi

27 Sep 2025 • 4 min read

Photo by Dima Solomin / Unsplash

概要

今回は ChatGPT5 Codex を使って、コードを書かずに Web アプリを作成してみたいと思います。
テーマは、娘が高校受験を控えているので、英単語クイズアプリにしました。
勉強に役立ててもらえたらうれしいです。

手順

(1) VSCodeに「Codex - OpenAI's coding agent」拡張をインストールします。

(2) Next.jsを使うことにしたので、環境を整えます。

$ nvm install --lts
$ nvm use --lts
Now using node v22.19.0 (npm v10.9.3)
$ node -v
v22.19.0
$ npm -v
10.9.3

(3) codexを使う準備をします。

$ sudo npm install -g @openai/codex
$ sudo npm install -g yarn

$ codex

初回実行時は、codexを有料版のChatGPIユーザーで利用するか、従量課金のResponses APIを利用するかを選択する画面が出てきます。ここでは、有料版のChatGPIユーザーを選択しました。
ブラウザが起動してOpenAIのログイン画面が出てくるので、ログインをしたらブラウザを閉じます。

You are running Codex in /mnt/data/Study/nextjs/eng-word-quiz

Since this folder is version controlled, you may wish to allow Codex
to work in this folder without asking for approval.

Yes, allow Codex to work in this folder without asking for approval

No, ask me to approve edits and commands

Press Enter to continue

╭─────────────────────────────────╮
│ >_ OpenAI Codex (v0.40.0) │
│ │
│ model: gpt-5-codex /model to change │
│ directory: /mnt/data/…/nextjs/eng-word-quiz │
╰─────────────────────────────────╯

To get started, describe a task or try one of these commands:

/init - create an AGENTS.md file with instructions for Codex
/status - show current session configuration
/approvals - choose what Codex can do without approval
/model - choose what model and reasoning effort to use

▌ Improve documentation in @filename

⏎ send Ctrl+J newline Ctrl+T transcript Ctrl+C quit

(4) 上記と違うターミナルで、eng-word-quizという名前のプロジェクトを作成します。

$ npx create-next-app@latest eng-word-quiz --use-yarn
✔ Would you like to use TypeScript? … No / **Yes**
✔ Which linter would you like to use? › **ESLint**
✔ Would you like to use Tailwind CSS? … No / **Yes**
✔ Would you like your code inside a `src/` directory? … **No** / Yes
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to use Turbopack? (recommended) … **No** / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … **No** / Yes
Creating a new Next.js app in /mnt/data/Study/nextjs/eng-word-quiz/eng-word-quiz.

(5) 動作確認をします。