Zenn
🎮

Codex や Claude Code で子ども向け学習サイト「Enplayn」を作成した話

に公開
Next.js
React
TypeScript
Prisma
Claude Code
tech

はじめに

長男が中学生に、次男が小学生に入学するタイミングで、楽しく勉強してくれたらいいなと思い、学習用の Web アプリケーション「Enplayn」を作成しました。
https://enplayn.com

バックエンドエンジニアながらフロントエンドを触るのも好きな私にとって、自身の学習も兼ねてアプリケーションをデプロイしてみたかったという動機もありました。

Enplayn の開発体験と、AI コーディングエージェントがもたらした開発効率の向上について紹介します。

Enplaynとは

Enplayn (エンプレイン) は「遊んで楽しく学べるサイト」をコンセプトとした学習アプリケーションです。

主な機能

学習アプリケーション

  • 📝 ひらがなやカタカナ、漢字などの練習 - 読み書きの練習
  • ⌨️ タイピング - キーボード練習のためのタイピングゲーム
  • 🔍 間違い探し - 視覚認識ゲーム
  • 🃏 メモリーカード - 神経衰弱形式の記憶力ゲーム
  • 📚 単語帳 - オリジナルの単語帳の作成と学習

システム機能

  • 👤 マルチプロファイル - ユーザーごとの複数プロファイル対応
  • 🔐 OAuth認証 - Google、LINE、でのログイン
  • ✍️ 手書き認識 - Canvas ベースの文字認識
  • 📊 学習進捗管理 - 学習履歴の記録と追跡

技術スタック

使用している主な技術スタックは以下の通りです。

フロントエンド

  • Next.js 15 - React フレームワーク（App Router）
  • React 19 - UI ライブラリ
  • TypeScript - 型安全性
  • Emotion - CSS-in-JS スタイリング

バックエンド

  • PostgreSQL - メインデータベース
  • Prisma - ORM・データベースアクセス
  • NextAuth.js - 認証システム
  • Iron Session - セッション管理
  • Inversify - DI（依存性注入）

開発・テスト

  • Jest - 単体テスト
  • Playwright (MCP) - E2Eテスト
  • Storybook - コンポーネント開発
  • Docker - 開発環境
  • ESLint/Prettier - コード品質管理

アーキテクチャ設計

自身の学習も兼ねてと思っていたので、できるだけ実務で使えるように
プロジェクトは Clean Architecture と Domain-Driven Design を意識して構築しています。

src/
├── app/                    # Next.js App Router
│   ├── api/                # API エンドポイント
├── components/             # UIコンポーネント（Atomic Design）
│   ├── Atoms/              # 基本要素
│   ├── Molecules/          # 分子レベル
│   ├── Organisms/          # 生体レベル
│   └── pages/              # ページ固有
├── domain/                 # ドメイン層
├── infrastructure/         # インフラ層
├── service/                # サービス層
├── error/                  # エラー定義
├── hooks/                  # React フック
└── utils/                  # ユーティリティ

AI コーディングエージェントの利用

当初はまだ AI コーディングエージェントをあまり認識できていなかったので自分で実装していましたが、AI コーディングエージェントが話題になり始めてから Codex や Claude Code を利用してみて、開発スピードがとても上がりました。

CLAUDE.md には、このプロジェクトで意識しているアーキテクチャや設計パターンを書いておくことで、コンテキストに沿った実装にしてくれています。
あとはあまり大きな単位にせず、機能ごとに小さなタスクに分けて依頼することで、より精度の高いコード生成につながっている気がします。

タスク時に気になったところは CLAUDE.md に追記するようにしています。

Atlassian remote MCP によるワークフロー自動化

先日 Atlassian が リモート MCP サーバーを発表 しましたが、Claude Code と連携して、Jira チケットから作業を依頼することができるようになりました。
チケットにやりたいことをできるだけ具体的に書き出し、

Jira チケットの ENPLAYN-39 を対応してください。

のように依頼するだけで大体の修正が完了するので、大変助かっています。

まとめ

「子どものため」なんてカッコつけて始めたつもりでしたが、気がつけば自分自身が学んでいる毎日になっています。 日々進化しているコーディングエージェントの力を借りて、 2, 3 人のチームで開発を進めている感覚です。

特に Claude Code と remote MCP の組み合わせによって、個人開発であっても小さなチーム程度の開発効率を実現できることに驚いています。

今後も子どもたちが楽しく学習できるよう、Enplayn を改善し続けていきたいと思います。

もし何か気づいた点やご指摘があれば、お気軽にコメントしていただけると嬉しいです！

Enplayn: https://enplayn.com
X (旧 Twitter): https://x.com/doba_shuzaburo

Discussion