SAPIX 家庭学習タスク

SAPIX 小学5年生の家庭学習計画を、保護者がアップロードした最新の SAPIX 資料だけを根拠に AI（Claude）が作成し、子どもが毎日チェックして消し込める個人用 Web アプリです。

学習計画はコードに固定していません。毎回、資料をアップロード → AI が計画案を作成 → AI 自身が 1 日ずつ検証 → 保護者が確認・修正 → 「この計画で確定」で日付別タスクに反映、という流れです。

1. 最新資料をアップロード          （計画作成タブ）
2. AI が資料を解析・計画案を作成    （/api/plan/generate）
3. AI が 1 日ずつ根拠を検証・修正   （/api/plan/verify）
4. 保護者が確認・編集・削除・追加
5. 「この計画で確定」              （既存タスクとの差分を承認）
6. 今日のタスク一覧へ反映          （タスクタブ）
7. 子どもが完了チェック → 即時保存

技術構成

• Next.js 16（App Router）/ TypeScript / Tailwind CSS v4
• AI: Anthropic Claude API（@anthropic-ai/sdk、既定モデル claude-opus-5-5）
  • すべてサーバー側（Route Handler）で実行。API キーはブラウザに渡りません
  • 資料は Anthropic Files API に保存し、生成・検証の 2 回の呼び出しで再利用（プロンプトキャッシュも利用）
  • 構造化出力（JSON Schema）＋ zod で出力形式を検証
• データ: ブラウザの localStorage（タスク・資料メタデータ・計画案）、IndexedDB（資料の原本）

セットアップ

必要なもの: Node.js 20 以上（推奨 22）

npm install
cp .env.example .env.local

API キー設定

1. https://platform.claude.com/ で API キーを発行します。
2. .env.local に設定します。

ANTHROPIC_API_KEY=sk-ant-...

変数	説明
ANTHROPIC_API_KEY	必須。未設定のときはデモモード（資料を読まずに操作確認用の計画案を作る）で動きます
ANTHROPIC_MODEL	任意。既定は claude-opus-5-5
DEMO_MODE	1 にすると API キーがあってもデモモード

キーはサーバー側の環境変数としてのみ読み込みます（NEXT_PUBLIC_ を付けないでください）。

起動

npm run dev        # 開発サーバー http://localhost:3000
npm run build      # 本番ビルド
npm run start      # 本番サーバー
npm run lint       # ESLint
npm run typecheck  # 型チェック

スマホから使う場合は、同じ Wi-Fi 内で http://<PCのIPアドレス>:3000 を開くか、後述のデプロイをしてください。

使い方

資料アップロード（計画作成タブ →「1. 資料をアップロード」）

• PDF・画像（JPEG/PNG など）を複数まとめて選べます。1 件ずつサーバーへ送られ、Anthropic Files API に保存されます。
• 大きな画像はブラウザ側で自動的に縮小（長辺 2400px の JPEG）してから送ります。
• 資料ごとに分類を選びます: 「家庭学習ナビ」「時間割」「スケジュール」「確認テスト範囲」「テスト結果」「その他」。ファイル名から自動推定しますが、必ず確認してください。メモ欄に「理科コアプラス確認テスト範囲表」など資料の種類を書くと AI の照合精度が上がります。
• チェックを外した資料は計画生成に使われません（古い資料を残したまま除外できます）。
• 「原本を開く」でこの端末に保存された原本を表示できます。

クラスを選ぶ（「2. クラスを選ぶ」）

• 分類が「時間割」の資料をアップロードし、「時間割を読み取る」を押すと、AI が 5 年生の全クラスの授業曜日・科目を読み取って一覧にします。
• 一覧から子どものクラス（例: 5H）を選ぶと、そのクラスの授業曜日・科目（例: 月 国語 / 水 算数 / 金 理科・社会）が設定されます。曜日×科目のボタンで手直しできるので、必ず時間割と見比べて確認してください。
• 一覧にない場合は「一覧にない（手入力）」でクラス名と授業曜日を自分で設定できます。
• 設定は保存され、組分けでクラスが変わったら選び直すだけで以後の計画に反映されます。
• 計画作成では、この設定を確定情報として AI に渡し、授業日を決めます。資料（スケジュール）から振替授業などの追加の授業日が分かればそれも授業日にします。設定上の授業日を AI が「休講」と判断した場合は勝手に外さず、計画案の画面でお知らせします。
• タスク画面の日付の横にも「SAPIX 国語」のようにその日の授業が表示されます。

計画生成（「3. AIで計画案を作成」）

• 今日の日付・計画期間（既定は今日から 2 週間）・補足を入力して実行します（クラスを選ぶまでは実行できません）。
• 内部では 2 段階で AI を呼び出します。
  1. 生成: ①今日の日付 → ②クラス → ③時間割 → ④授業スケジュール → ⑤教材配布日 → ⑥次回授業 → ⑦次回確認テスト → ⑧テスト範囲 → ⑨家庭学習ナビ → ⑩過去テスト結果・弱点 の順に資料を確認してから計画を作成
  2. 検証: 1 日ずつ「配布済みか／テキスト番号／ページ／テスト日／コアプラス範囲／言葉ナビ範囲／授業日の量／重複」を資料と照合し、根拠が確認できないタスクは補完せず除外
• さらにアプリ側でも決定的なチェックを行います。
  • 根拠資料（id と該当記述）がないタスクは自動で除外
  • 計画期間外のタスクは除外
  • 毎週土曜日に「パパックスオープン」を自動登録
  • 1 日 5 件超・授業日 3 件超（祝日の授業日は除く）・理由のない重複を警告表示
  • 理科・社会が算数（基礎トレ除く）・国語より少ない場合に警告表示
  • 日本の祝日（振替休日・国民の休日含む）を自動計算し、AI への条件と画面表示に使用
• 計画ルール（未配布教材の禁止、理科・社会を厚めに、授業日は軽く（祝日は除く）、マンスリー・サピックスオープン・組分けテスト後の教科別見直し、算数基礎トレ毎日、知の冒険 3 回、言葉ナビはテストから逆算して 2 回、理科確認問題は 2 回目以降「誤答のみ」、コアプラスは次回確認テストから逆算、社会の通常学習とコアプラスの分離、成績表は正答率の高い取りこぼし優先 など）は src/lib/server/prompts.ts のシステムプロンプトに記載しています。

タスク確定（「4. 計画案を確認」）

• 計画案は日付ごとに表示され、各タスクを編集・削除・追加できます。
• 「根拠を確認」で、どの資料（分類・ファイル名）のどの記述からそのタスクを作ったかを表示します。
• 検証結果パネルで、AI の検証要約・除外したタスクと理由・①〜⑩の確認内容・不明事項・1 日ごとのチェック表を確認できます。
• 「この計画で確定」で正式タスクに反映します。
• すでにタスクが登録されている期間で新しい計画案を作った場合は「現在の計画との差分」が表示されます。
  • 追加／変更／削除候補ごとにチェックし、承認したものだけ反映します
  • 削除候補は初期状態で未承認（過去のタスクを勝手に削除しません）
  • 計画期間外の登録済みタスクには一切触れません

毎日のチェック（タスクタブ）

• 表示切替: 今日（初期表示）／明日／今週／すべて。今日のカードは太枠で強調されます。
• タスクを押すとチェック済み（取り消し線・薄く表示）になり、即時保存。もう一度押すと未完了に戻ります。
• 「完了タスクを隠す」トグルあり。今日のタスクがすべて終わると「今日のタスク完了！」と表示。
• ブラウザのタブ名に今日の未完了件数を表示します（例: (3) 家庭学習タスク、0 件なら 家庭学習タスク）。

データ保存の仕組み

データ	保存先
タスク・完了状況・資料メタデータ・計画案・確定履歴	ブラウザの localStorage（キー sapix-home-study:v1）
資料の原本（「原本を開く」用）	ブラウザの IndexedDB
AI に渡す資料ファイル	Anthropic Files API（file_id をメタデータに保持。資料を削除すると Files API 側も削除）

• データは端末（ブラウザ）ごとです。別の端末と共有する場合は「データ管理」の「バックアップを保存／復元」（JSON）を使ってください。
• 型定義は src/lib/types.ts。Task は id, date, subject, material, textbookNumber, range, title, detail, category, completed, completedAt, sourceId, sourceIds, evidence, planId, order, createdAt, updatedAt を持ち、sourceId/evidence で根拠資料を追跡します。
• 永続化は src/lib/storage.ts の load / save に閉じています。Supabase 等に移行する場合は、tasks・sources・plans をそれぞれテーブル化（evidence は jsonb、または task_evidence テーブル）し、この 2 関数をリモート API 呼び出しに差し替えてください。

デプロイ（Vercel）

1. このリポジトリを GitHub に push し、Vercel で Import します（フレームワークは自動で Next.js）。
2. Project Settings → Environment Variables に ANTHROPIC_API_KEY を設定します。
3. Deploy。

注意点:

• 計画生成・検証はそれぞれ数分かかることがあるため、Route Handler に maxDuration = 300（秒）を設定しています。Vercel のプランによって上限が異なるので、タイムアウトする場合は計画期間を短くしてください。
• Vercel の関数リクエストは 1 件あたり約 4.5MB が上限です。大きな PDF はページを分けるか圧縮してからアップロードしてください（画像は自動縮小されます）。
• 個人用アプリのため認証はありません。URL を他人に知られると API を使われる可能性があるので、Vercel の Deployment Protection（パスワード保護等）を有効にすることをおすすめします。

Vercel 以外でも npm run build && npm run start が動く Node.js 環境ならデプロイできます。

ディレクトリ構成

src/
  app/
    page.tsx                 タスク画面
    plan/page.tsx            計画作成画面（保護者用）
    api/files/               資料アップロード・削除（Files API）
    api/plan/generate/       計画案生成
    api/plan/verify/         計画案の検証
    api/timetable/           時間割からクラスごとの授業曜日・科目を読み取り
    api/status/              動作モード（live / demo）
  components/                画面部品
  lib/
    types.ts                 データ型
    storage.ts               永続化（localStorage）
    plan-schema.ts           AI 出力スキーマ・API 入出力
    plan-rules.ts            AI 出力へのアプリ側ルール適用・警告
    diff.ts                  計画案と登録済みタスクの差分・反映
    server/                  AI 呼び出し・プロンプト・デモ