副業でReact×TypeScript製クイズSaaSを開発した話
はじめに
資格勉強ってなかなか続かない…。
特に社会人やエンジニアは、モチベーション維持が一番の課題だと思います。
そこで私は、恋愛ゲーム要素を加えたクイズSaaS を副業で開発しました。
本業の合間に「1日1〜2時間」で進めながら、資格学習 × ゲーミフィケーションをテーマにしています。
本記事では以下について紹介します。
- なぜクイズSaaSを作ろうと思ったのか
- 使用した技術スタック
- 実装上の工夫
- ゲーム要素の取り入れ方
- 副業としての今後の展望
※収益化の具体的な仕組みや教材化の流れは note にまとめています。
なぜ作ろうと思ったのか
私は研修講師として10年以上、新人エンジニア教育に関わってきました。
その中で常に出てくる声が「勉強が続かない」「モチベーションが持たない」という悩みです。
一方、副業エンジニアとして「小さく作って公開 → 改善 → マネタイズ」という流れを実践したいと考えていました。
そこで生まれたアイデアが 「資格学習をゲームにすれば続けられるのでは？」 という発想です。
技術スタック
今回のクイズSaaSでは以下を採用しました。
- フロントエンド: React + TypeScript
- 状態管理: React Hooks / カスタムフック
- フォーム管理: React Hook Form + useWatch
- バックエンド: Node.js / Express（将来的にはFirebase Functionsへ移行予定）
- DB: PostgreSQL（Supabaseを利用）
- 認証: Firebase Auth
- ホスティング: Vercel
👉 個人副業でも 低コストでスケーラブルに運用できる構成 を意識しています。
実装の工夫
1. 問題管理をJSON化
クイズ問題をJSONファイルで管理することで、追加・修正を容易にしました。
{
"id": 1,
"question": "Reactで状態を管理するためのフックはどれ？",
"options": ["useState", "useClass", "setState", "this.state"],
"answer": 0
}
この形式にしておくと、後からAIで自動生成した問題を取り込むことも可能になります。
2. useWatchを活用したフォーム入力
React Hook Form の useWatch を活用することで、ユーザーの回答状況をリアルタイムに監視し、UIに反映させています。
const { control } = useForm();
const selectedOption = useWatch({ control, name: "answer" });
3. 小さく作ってすぐ公開
副業は時間が限られるため、最初から完璧を目指さず「最低限動くものを公開」して改善する方針にしました。
• 初期リリースは 5問だけ のクイズ
• デザインはシンプル（Tailwind CSSのみ）
• デプロイはVercelでワンクリック
4. ゲーム要素の取り入れ方
学習を続けてもらうため、以下の要素を実装しました。
• 好感度システム：正解するとキャラクターの好感度が上がる
• 連続正解ボーナス：5問連続で正解すると特別演出
• 称号機能：解答数や正答率に応じて称号を付与
👉 これにより「もう1問やってみよう」という気持ちを自然に引き出せます。
副業としての今後の展望
現状は試作段階ですが、今後は以下の方向で展開を考えています。
• 無料公開版（広告モデル）
• 有料版（追加問題パック／難易度設定）
• 教材化（note記事やUdemy講座と連携）
• AIを活用した「自動問題生成」機能の追加
まとめ
副業でクイズSaaSを開発することで、
• React/TypeScriptスキルの実践
• 教育経験を活かしたプロダクト開発
• 収益化に向けた新しい挑戦
を同時に進めることができています。
本記事では技術面を中心に紹介しました。
※収益化の具体的な仕組みや教材化の流れは note（@zakisan_teacher） にまとめていきます。
NoteではReactの簡単なクイズもお試しで公開していますので、ご覧ください。