いろいろ書き溜めたもの
テクノロジー

Cluade Codeと一緒にWebアプリを作ってみた

タイトルの通り、少し時間ができたのでClaude Codeのリスキリングも兼ねてWebアプリを作ってみました。

何を作ったのか？

IPA（独立行政法人 情報処理推進機構）が毎年開催する情報処理技術者試験の過去問アプリを作ってみました。

絶賛コンテンツ（過去問）を登録中です。

https://it-exam-study.hiro110.dev/

なぜ作ったのか？

すでにこういう類のアプリは世の中にありますが、以下のペインを感じました。

  • ログイン情報を個別に持ちたくない。
  • ただ単に問題と解答をセットで丸暗記すれば良いが、それだけでなく体型立ててコンピュータサイエンスを知識として定着化させたい。

どう作ったのか？

Claude Codeをどう活用したか？

企画・要件整理

着手するタイミングでAgent Teams機能がリリースされたので活用してみた。

エージェントに複数の役割を持たせて同時並行的にタスクを進めてもらい。マークダウン形式でアウトプットしました。

  • リサーチャー
  • マーケター
  • PdM
  • アーキテクト
  • UI/UXデザイナー

抜粋ですが、マーケターのアウトプットはご覧の通りです。ターゲットの特定、ペルソナ定義、課題抽出、プロモーション等幅広く考えてもらいました。

# IPA情報処理技術者試験 資格取得Webアプリ マーケティング戦略

## 1. ターゲットユーザーの特定

### 市場規模と背景

- 基本情報技術者試験の年間受験者数は約12万人前後、合格率は約40%
- 受験者のボリュームゾーンは19〜25歳（大学生・専門学校生・新社会人）
- 合格者の平均年齢は24〜26歳
- 社会人の受験者が学生の約2倍
- 社会人の業界別ではソフトウェア業、情報処理・提供サービス業が多数
- 2026年度から応用情報・高度試験がCBT化 → 受験しやすくなり受験者増加が見込まれる

### プライマリターゲット

| セグメント | 年齢層 | 特徴 |
|-----------|--------|------|
| IT系企業の若手社会人 | 22〜30歳 | 会社推奨・昇進要件として受験。通勤時間にスキマ学習したい |
| 情報系学生 | 18〜22歳 | 就職活動に向けた資格取得。コスパ重視で無料〜低価格を求める |
| IT業界への転職志望者 | 25〜35歳 | 非IT職からの転職で基礎知識を証明したい。効率的な学習法を求める |

...

設計

各ロールのエージェントのアウトプットをもとに、フェーズ毎に実装するものとスケジュールを整理し、ToDoベースでタスクを落とし込みました。これもマークダウン形式でリストを作成し管理します、こうすることでコンテキスト肥大化を少しでも減らす工夫をしています。

パフォーマンス、SEO、アクセシビリティが漏れてしまった分は、壁打ちしながら要件を具体化していきました。

# 01. プロジェクト初期化

**フェーズ**: Week 1
**依存**: なし（起点）
**後続**: [02-infrastructure](./02-infrastructure.md), [03-database](./03-database.md)
**ステータス**: ✅ 完了（2026-02-17）

---

## 目的

Next.js 15 プロジェクトをセットアップし、開発に必要な全ツール・設定を整える。

---

## タスクチェックリスト

### 1. リポジトリ作成

- [x] GitHub にリポジトリ作成（Public）
- [x] `.gitignore` 設定（Node.js テンプレート + `.env*.local`）
- [ ] `main` / `develop` ブランチ保護ルール設定
  - `main`: PR 必須、direct push 禁止
  - `develop`: CI 通過必須

### 2. mise セットアップ

[mise](https://mise.jdx.dev/) で Node.js と pnpm のバージョンをディレクトリ単位で固定する。
チームメンバーが `mise install` を実行するだけで同一バージョンに揃う。

...

実装

設計フェーズで作成したToDoをベースに1つずつ実装を進めてます。

毎度入力が手間なもの、動作してほしいものは CLAUDE.mdや rulesで逐次足しながら実装精度を高めていきました。

また品質も担保したいため、linter, unit test, E2EもGitHub Actionsのワークフローに取り込んだり、hooksで検知できるようになど整備しております。

アーキテクチャ

ソフトウェア

フロントもバックエンドもTypescriptベースで実装しています。

  • フロントエンド
    • React
    • Next.js
    • Tailwind CSS
    • Vitest
  • バックエンド
    • Hono
  • ツール
    • Oxc
    • Playwright
    • mise

オールTypescriptですが、以下の理由で選定しております。

  • 習熟を深める。
    • 要は知識を定着させたい。
  • 開発体験を統一させたい。
    • リンターであったり、テストの実装であったりとバラバラにしたくない。

インフラ

毎度お馴染みCloudflare。WorkersとD1を利用しています。運用が楽で助かります。

今後の予定

コンテンツの登録が大変なので頑張ります。（先人は凄い。）現状は過去問をGeminiに読み取り -> テキスト化 -> 登録するようにしてますが、ここら辺も自動化させたい。Coworkで対応できないか。

ちなみにPDFからのテキストへの落とし込みは複数のLLMを試しましたが、Gemini が優秀である感じはします。今後変わりそうですが。

ある程度、コンテンツが溜まったら周知に力を入れていきたいです。

収益化は現在考えてません。インフラコストがペイできれば良いです。