見出し画像
Photo by ryonakano

Claude Code から選んだ73機能を学べる Web アプリを Astro + Cloudflare Workers で1日で作って公開した話

amu_lab｜AI検証ジャーナル

「Claude Code、便利らしいけど、何ができるか全部把握できてない」

そんな自分の悩みを解決するため、Claude Code の標準機能から73個を選び、毎日5秒で発見・学習できる Web アプリを作りました。

🔗 公開URL: https://codey-daily.hrtaym1114.workers.dev
🐙 GitHub: https://github.com/hrtaym1114-github/codey-daily

驚いたのは開発スピードです。当初「3週間タイムボックス」で計画していたものが、Claude Code とのペアプロで 1日で公開 までいきました。本記事では何を作ったか、どう作ったか、そして何が決定的に効率を変えたかを記録します。

何を作ったか

Codey Daily の3モード学習体験

Codey Daily は Claude Code の組み込み機能を「楽しく覚える」ためのアプリです。3つの学習モードを用意しました。

📅 今日の機能

毎日アクセスすると、その日のシード値で1機能を表示します。/memory、/agents、Bash ツール、PreToolUse フックなど、73機能の中からランダムに1つ。30秒で読める短い解説と、コピーできる使用例つき。「触った」ボタンを押すとストリークが+1されます。

🃏 フラッシュカード

カードの表に機能名（例: /agents）、タップで裏返って説明と使用例が出ます。「知ってた」「あやふや」「初見」の3段階で自己評価。能動的想起（active recall）を促す Anki 方式の学習。

🎯 4択クイズ

10問×4択のチャレンジ。「/memory の機能は?」のような問題に対し、同カテゴリの似た機能を distractor として配置（適度な検索負荷・識別負荷をかけて長期記憶を促す、Bjork の "desirable difficulties" 理論）。終了時にスコア + 復習推奨機能 + X.com シェアボタン。

コンテンツの厚み

73機能は、公式ドキュメントと実際に使う場面を照らし合わせながら手動でキュレーションしました。Claude Code の全標準機能を網羅した一覧ではなく、初学者が覚える価値の高いものに絞った学習用カタログです:

  • Slash Commands 15個 (/clear /help /memory /agents /context ...)

  • Built-in Tools 13個 (Bash Read Write Edit Grep Task ...)

  • Hooks 9個 (PreToolUse PostToolUse Stop SessionStart ...)

  • Files & Memory 8個 (CLAUDE.md AGENTS.md settings.json ...)

  • Sub-agents 6個 (Explore Plan general-purpose ...)

  • CLI Flags 5個 (--continue --resume --print ...)

  • Settings 5個 (Status Line / VS Code / JetBrains ...)

  • MCP 4個 / Modes 4個 / Skills 4個（アプリ収録分）

公式ドキュメント上では、Slash Commands、Built-in Tools、Hooks、CLI Flags などはこの収録数より多く存在します。Codey Daily では、毎日1つずつ触って覚えやすい粒度に絞り、各機能に公式ドキュメントへのリンクも自動付与しています。

公式アップデートの自動追従

Claude Code は毎週複数回バージョンアップされ、新機能が追加されます。これに対応するため、3層の追従システムを構築:

  1. /changelog ページ で公式 CHANGELOG.md をパース表示（2026-05-03時点で277バージョンを構造化）

  2. GitHub Actions が日次で changelog を fetch、未追加機能を検出

  3. scripts/generate-standard-seed.py で新機能を追加 → 即デプロイ

「/plugin /skills /mcp /doctor /code などまだ追加してない」という情報が、サイト上の「🚨 未追加機能」バナーに自動表示されます。透明性 = 信頼性。

Google ログイン + クロスデバイス同期

最後に、Google OAuth でログインすると個人の学習記録がクラウドに保存され、ブラウザを変えても進度が続きます。匿名利用で溜めた学習履歴も、ログイン時に自動マージされます。

技術スタック

採用したスタックは以下です:

  • Frontend: Astro 5/6 + Tailwind CSS v4

  • Backend: Hono on Cloudflare Workers

  • Database: Cloudflare D1（エッジで動く SQLite）

  • Cache: Cloudflare KV

  • Hosting: Cloudflare Workers Static Assets

  • Auth: Google OAuth 2.0（PKCE）

  • Analytics: Cloudflare Web Analytics（cookieless）

  • 開発支援: Claude Code（核心）

注目してほしいのはランニングコストです。月額 $0（Cloudflare 無料枠内で完結）。もちろん無料枠を超えた利用や独自ドメイン費用は別ですが、少なくとも検証フェーズなら Apple Developer Program のような年間費用も不要。個人開発の「公開して維持する」ハードルが、ここまで下がっています。

1日の開発タイムライン

朝に企画を始めて、夜には公開しました。具体的なフェーズと所要時間:

朝（企画）

  • 当初は「Duolingo 型 AI 活用練習アプリ（AI Dojo）」を構想

  • Advisory Board 形式の 6 エージェントで検討した結果、競合が想定以上に強く方針転換

  • 「Claude Code そのものを学ぶアプリ」に絞り込む決定

午前（基盤）

  • Cloudflare アカウント設定、wrangler login

  • Astro プロジェクト初期化、Tailwind v4 統合（ここで peer dependency 詰まり）

  • D1 データベース作成、4テーブル定義

  • Vault に蓄積していたメモから機能データ抽出スクリプト作成

午後（コア機能）

  • Hono で API 構築（/api/today, /api/feature/:id, /api/categories, /api/progress）

  • 73機能データを手動キュレーション（私の知識と公式ドキュメントを照合）

  • フロントエンド 3 モード実装（Today / Flashcard / Quiz）

  • 静的ページ生成（73機能ページ + 10カテゴリページ + トップページ）

夕方（インフラ）

  • GitHub リポジトリ作成 + push

  • Cloudflare Workers Static Assets でデプロイ

  • カスタムドメイン未設定（*.workers.dev で当面OK）

夜（拡張）

  • 公式 CHANGELOG パーサ + 未追加機能検出

  • GitHub Actions で日次自動同期ワークフロー

  • Google OAuth 実装（PKCE、KV セッション、匿名→DB マージ）

  • Cloudflare Web Analytics 設定

合計、実作業 8〜10時間程度。途中、何度もエラーで詰まりましたが、Claude Code が直前の動作と Stack Trace を見て即座に原因を特定してくれるので、解決スピードが圧倒的に速い。

詰まったポイントと解決策

実装記録として、ハマったポイントを共有します。同じスタックを使う方の参考に。

@astrojs/tailwind が astro 5 系と peer dependency 競合

npm i -D astro @astrojs/tailwind を叩くと Conflicting peer dependency エラー。astro 5+ では @astrojs/tailwind ではなく Tailwind v4 + @tailwindcss/vite を使うのが正解でした。

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: { plugins: [tailwindcss()] },
});

Astro 5+ で output: 'hybrid' が削除されている

output: 'hybrid' を書くと「The output: 'hybrid' option has been removed. Use output: 'static' instead」と警告。Astro 5 から static がデフォルトで hybrid 相当の挙動になっています（API ルートに export const prerender = false を書けば SSR）。

conda の (base) 環境で npm run dev が astro: command not found

ターミナルで (base) が見えていると、conda の Python 環境が PATH に干渉して node_modules/.bin/ が見えなくなることがあります。回避策:

// package.json
{
  "scripts": {
    "dev": "npx astro dev",  // ← npx 経由で明示的に解決
    "build": "npx astro build"
  }
}

または conda deactivate で抜ける。

Cloudflare Pages vs Workers Static Assets の混乱

Astro @astrojs/cloudflare adapter は最近 Workers Static Assets モードに移行しています。wrangler.toml に pages_build_output_dir を残していると Pages 扱いされて「ASSETS は予約名」エラー。削除してから wrangler deploy（wrangler pages deploy ではない）で解決。

Astro v6 で Astro.locals.runtime.env が削除

Hono に Cloudflare bindings を渡そうとして locals.runtime.env を使うと「removed in Astro v6」と怒られる。新しい正解:

import { env } from 'cloudflare:workers';
// env.DB, env.KV が直接使える

Cloudflare D1 のローカル/リモート分離

wrangler d1 execute は --local と --remote で別 DB に作用します。本番だけ migrate して開発で動かないと「table not found」。両方に同じマイグレーションを適用する習慣をつける。

Claude Code とのペアプロ体験

これだけのスタックを 1 日で扱えたのは、Claude Code とのペアプロが決定的でした。具体的に何が違うか。

即座のエラー診断

Vite ビルドエラーやマイグレーション失敗が起きると、Claude Code はターミナル出力をそのまま読み取り、「これは astro 5 で hybrid が削除されたためです」「output: 'static' に変えてみましょう」 とパッチを提案。Stack Overflow で検索する 5 分が、3 秒で済みます。

コンテキストの蓄積

Vault（私の Obsidian ノート）に蓄積していた .claude/commands/ .claude/agents/ .claude/skills/ .claude/rules/ が、そのまま機能カタログ生成スクリプトの素材になりました。Claude Code はこの構造を理解しているので、scripts/extract-features.ts を 5 分で書いてくれました。

並列タスクの裁量

「ビルド + デプロイを進めながら、git commit メッセージも書いて」と頼むと、両方を同じターンで実行してくれます。タスクスイッチのオーバーヘッドがゼロ。

失敗を恐れない設計

Claude Code は「とりあえず動かす → エラー見る → 修正」のループが極めて速い。「完璧な設計を考えてから書く」より「動かして調整する」方が、結果として速くなる体験を何度もしました。

マネタイズと運営方針

検証フェーズなので、まずは 無料・広告なし・GitHub Sponsors のみ で運営します。

将来的に伸びれば、以下を検討しています:

  • Pro 機能 ¥250/月 — Spaced Repetition (Anki 式の最適間隔)、学習曲線グラフ、弱点リスト

  • iOS Native 版 — Web 版で反応確認後、SwiftUI で移植

  • コンテンツ拡充 — 新機能リリースに合わせて 100→150 項目へ

ただし、まずは 「使ってもらえるか」 を確かめることが第一。広告で UX を犠牲にしたくないし、有料化で参入障壁を作りたくない、という方針です。

公開して感じたこと

技術的には何も革新していません。Astro / Cloudflare Workers / Hono / D1 / Tailwind v4 / Google OAuth、全部既存技術。

それでも、これまで個人開発で「1日で公開」できる規模ではなかった気がします。AI ペアプロで、ボトルネックが「実装」ではなく「設計判断」に移っているのを実感しました。

何を作るかさえ決められれば、作るのは AI が手伝ってくれる。だからこそ、企画力 + ユーザー理解 + 公開後のマーケティングが、より重要になっています。

次に読んでほしい記事

Claude Code をもっと深く活用したい方向けに、以下の記事も書く予定です:

  • 「Claude Code で月 20 時間を消した話 — 個人開発の生産性が変わる瞬間」

  • 「Cowork vs Claude Code: 何ができて何ができないか」

  • 「7日間スタートキット — Claude Code を最初の 1週間で使いこなす」

シリーズ化してく予定なので、よろしければフォローお願いします。

試してください + 応援のお願い

🔗 アプリを試す: https://codey-daily.hrtaym1114.workers.dev
🐙 GitHub Star: https://github.com/hrtaym1114-github/codey-daily
❤️ GitHub Sponsors（申請中）: https://github.com/sponsors/hrtaym1114-github

質問・フィードバック・感想は X.com の @Amu_Lab__ まで。

⚙️ 実装の詳細が気になる方は、リポジトリの README と CHANGELOG-WORKFLOW.md をご覧ください。

いいなと思ったら応援しよう！