SPI3 の練習問題を自動生成する Web アプリを Claude Code で作った（26分野・お手軽／本番の2モード）

SPI3 の練習問題を、その場で自動生成して何問でも解ける Web アプリを作りました。

▶ SPI3ドリル（非公式）（制作物ページ）

非言語17分野・言語9分野に対応していて、数値や選択肢の組み合わせを毎回作り直します。同じ問題を解き直しても答えを覚えてしまうことがなく、解き方そのものを繰り返し練習できます。ログインは不要で、スマホでも使えます。

前回の IT ストラテジスト試験の過去問ドリル は、過去問を Claude に書き起こしてもらう作り方でした。今回は過去問を使わず、問題そのものをプログラムで作るほうに挑戦しています。作業はほぼ Claude Code で進めました。

個人で作った非公式のアプリです。問題はすべてオリジナル（自動生成）で、実際の試験問題や市販の問題集とは関係ありません。SPI は株式会社リクルートの登録商標です。

2つのモード

アプリには、難易度と解き方の違う2つのモードがあります。

	お手軽モード	本番モード
数	小さく、解き方の型が見えやすい	本番に近く、計算の手間がかかる
時間	制限なし（目安だけ表示）	1問ごとに制限時間
道具	なし	手書きメモと電卓
解答	選択肢	選択肢＋一部は数値を直接入力
解説	答えるたびにすぐ出る	最後にまとめて出る

お手軽モードは、通勤中などに各分野の要点だけを確かめる使い方を想定しています。答えるとすぐに正誤・解説・その分野の公式が出ます。

本番モードは、紙とペンと電卓を使って解く本番に近づけたモードです。PC の広い画面では、右側にメモと電卓が並びます。スマホでは問題の下に出ます。

同じ分野でも、お手軽と本番では数の大きさと問題の形を変えています。たとえば「速さ」と「確率」はこうなります。

• 速さ（お手軽）：5kmの道のりを30分で進んだ。このときの速さは時速何kmか
• 速さ（本番）：1周3,800mの池の周りを、AとBが同じ地点から同時に反対方向へ歩き出した。Aは分速110m、Bは分速90mで歩くとき、2人が初めて出会うのは出発の何分後か
• 確率（お手軽）：大小2個のサイコロを同時に投げるとき、出た目の和が5になる確率はいくらか
• 確率（本番）：AとBが試合をすると、Aが勝つ確率は1/3で、引き分けはない。3試合行うとき、Aが2勝以上する確率はいくらか

問題ジェネレーターの作り方

分野ごとに、問題を1問作る関数（ジェネレーター）を1つずつ持たせています。形はどの分野も同じです。

{
  id: "sokudo",
  name: "速さ",
  tip: "道のり ＝ 速さ × 時間。分⇔時間の換算に注意（20分 ＝ 1/3時間）。…",
  time: [45, 90],              // お手軽の目安秒・本番の制限秒
  gen(r, hard) {               // r はシード付き乱数、hard は本番モード
    // ...
    return { q, choices, answer, explain, num, unit };
  },
}

gen は問題文・選択肢・正解の番号・解説をまとめて返します。答えが数値の問題は num も返し、本番モードではその一部を数値の直接入力にしています。

作り方のコツは、答えから逆算して数を決めることです。たとえば仕事算なら、先に「2人で行ったときの日数が整数」になるように、それぞれの日数の組を選んでから、問題文を組み立てます。先に問題文の数を乱数で決めると、割り切れない答えや、選択肢に並べにくい答えが出てしまいます。

間違いの選択肢も、ただの乱数にはしていません。単位の換算を忘れたとき、足すところを掛けたとき、余事象を使い忘れたとき、のようにありがちな間違え方から作るようにしています。

言語分野は数値の計算ができないので、語の組・例文・会話などの素材を用意しておき、その組み合わせと選択肢の並びを毎回変えています。素材もすべてこのアプリのために作ったものです。

15万問を生成して形式の崩れを検査した

問題を自動生成すると、次のような崩れが混じりやすくなります。

• 選択肢が重複する（違う式で同じ値になる）
• 答えが NaN や Infinity になる
• 正解として返した番号と、数値の答え num が食い違う
• 選択肢の数が、画面のラベル（A〜H）より多くなる

目で確かめるだけでは見つけきれないので、全26分野をお手軽・本番の両方で3,000問ずつ、合計15万6,000問を生成して機械的に検査するテストを用意しました。シード付きの乱数を使っているので、崩れた問題があれば同じシードで再現できます。

$ node tests/check.mjs 3000
OK: 26分野 × 2難易度 × 3000問

実際に、このテストで見つかった不具合もあります。構造的把握の本番モードで「5問の中から同じ考え方の2問を選ぶ」形式を作ったとき、組み合わせを全部並べて選択肢が10個になっていました。ラベルは A〜H の8個までしかないので、正解の組と誤りの組5つの6択に絞り、テストにも「選択肢は8個まで」の確認を足しています。

テストとは別に、分野を指定して問題をテキストで並べるスクリプトも作り、問題文や解説の日本語が自然かどうかは目で確かめました。

画面まわりで気をつけたこと

• スマホの縦画面を主な対象にした：幅360pxで全分野の問題を開き、横スクロールが出ないことを Playwright で確認しています。分数や物の流れの図、領域のグラフも幅に収まるようにしました。
• メモは指で書ける：Canvas に手書きでき、PC ではマウスやペンでも書けます。
• 「やめる」は2回押しで確認：途中で誤って押しても、すぐには終わらないようにしました。
• 記録は端末内だけ：分野ごとの正答率は localStorage に保存し、サーバーには送りません。
• オフラインで使える：PWA に対応していて、ホーム画面に追加すれば電波のない場所でも練習できます。

公式・ポイント一覧

あとから「公式・ポイント」を全分野に付けました。お手軽モードの解説の下と、結果画面の見直しで開けるほか、ホーム画面には全分野の一覧を置いています。本番前にざっと見直す用途を想定しています。

まとめ

• SPI3 の非言語17分野・言語9分野の練習問題を自動生成する Web アプリを作った
• お手軽モードは要点だけをすぐ確かめる用、本番モードは制限時間・メモ・電卓つきで本番に近づけた
• 数は答えから逆算して決め、間違いの選択肢はありがちな間違え方から作った
• 15万問を生成して形式の崩れを検査するテストで、自動生成の品質を保った

無料で使えるので、よければ試してみてください。

▶ SPI3ドリル（非公式）