副業でReact×TypeScript製クイズSaaSを開発した話

はじめに

資格勉強ってなかなか続かない…。
特に社会人やエンジニアは、モチベーション維持が一番の課題だと思います。

そこで私は、恋愛ゲーム要素を加えたクイズSaaS を副業で開発しました。
本業の合間に「1日1〜2時間」で進めながら、資格学習 × ゲーミフィケーションをテーマにしています。

本記事では以下について紹介します。

※収益化の具体的な仕組みや教材化の流れは note にまとめています。

私は研修講師として10年以上、新人エンジニア教育に関わってきました。
その中で常に出てくる声が「勉強が続かない」「モチベーションが持たない」という悩みです。

一方、副業エンジニアとして「小さく作って公開 → 改善 → マネタイズ」という流れを実践したいと考えていました。

そこで生まれたアイデアが 「資格学習をゲームにすれば続けられるのでは？」 という発想です。

今回のクイズSaaSでは以下を採用しました。

👉 個人副業でも 低コストでスケーラブルに運用できる構成 を意識しています。

クイズ問題をJSONファイルで管理することで、追加・修正を容易にしました。

{
  "id": 1,
  "question": "Reactで状態を管理するためのフックはどれ？",
  "options": ["useState", "useClass", "setState", "this.state"],
  "answer": 0
}

この形式にしておくと、後からAIで自動生成した問題を取り込むことも可能になります。

React Hook Form の useWatch を活用することで、ユーザーの回答状況をリアルタイムに監視し、UIに反映させています。

const { control } = useForm();
const selectedOption = useWatch({ control, name: "answer" });

副業は時間が限られるため、最初から完璧を目指さず「最低限動くものを公開」して改善する方針にしました。
• 初期リリースは 5問だけのクイズ
• デザインはシンプル（Tailwind CSSのみ）
• デプロイはVercelでワンクリック

学習を続けてもらうため、以下の要素を実装しました。
• 好感度システム：正解するとキャラクターの好感度が上がる
• 連続正解ボーナス：5問連続で正解すると特別演出
• 称号機能：解答数や正答率に応じて称号を付与

👉 これにより「もう1問やってみよう」という気持ちを自然に引き出せます。

現状は試作段階ですが、今後は以下の方向で展開を考えています。
• 無料公開版（広告モデル）
• 有料版（追加問題パック／難易度設定）
• 教材化（note記事やUdemy講座と連携）
• AIを活用した「自動問題生成」機能の追加

副業でクイズSaaSを開発することで、
• React/TypeScriptスキルの実践
• 教育経験を活かしたプロダクト開発
• 収益化に向けた新しい挑戦

を同時に進めることができています。

本記事では技術面を中心に紹介しました。

※収益化の具体的な仕組みや教材化の流れは note（@zakisan_teacher）にまとめていきます。

NoteではReactの簡単なクイズもお試しで公開していますので、ご覧ください。