@woodnx.com

iQbe

2025/03/31

2026/07/31

2021/11~


概要

競技クイズの問題を蓄積するだけでなく、検索・演習・復習・学習状況の確認までを1つの流れで行える学習支援Webアプリです。

クイズ研究会で管理していた約20万問のExcelデータを、より扱いやすく、学習に活用できる形へ変えることを目指して開発しました。 2021年に開発を始め、高専での卒業研究を経て、現在も設計や開発環境を改善しながら継続的に機能を拡張しています。

解決したかった課題

Excelは大量の問題を一覧で管理するには便利ですが、実際の学習で使うにはいくつかの制約がありました。

  • ジャンルやキーワードを組み合わせて、学びたい問題をすぐに探しにくい
  • 問題を読むだけでなく、本番を想定した形式で反復練習したい
  • 間違えた問題や学習の進捗を記録し、次の学習につなげたい

そこで、単にExcelの内容をデータベースへ移すのではなく、問題を「蓄積する」「学ぶ」「振り返る」という一連の体験をアプリ上で完結させることを目標にしました。

アプローチ

1. 既存データのデータベース移管

まず、約20万問のデータをデータベースに移行するため、スキーマを設計し、CSVを用いてデータを登録しました。

また、当初は新規問題を登録できませんでしたが、学習を進める中で新しい問題を追加したいという要望が生じることも想定しました。そこで、問題を1問ずつ、または複数問まとめて登録できる機能を実装し、一括登録と日常的な追加の両方に対応しました。

2. 問題の検索から演習までをつなげる

問題を保存するだけではなく、学習したい内容へ素早くたどり着けることを重視しました。 ジャンルやキーワードによる検索に加え、問題のシャッフルや解答を隠す機能を用意し、用途に応じて問題を読み進められるようにしています。

さらに、実際の競技クイズを想定した演習機能を設け、知識を得るインプットだけでなく、答えを思い出すアウトプットまで同じアプリ内で行えるようにしました。

3. 学習結果を次の行動につなげる

一度演習して終わるのではなく、間違えた問題を振り返り、苦手な分野を継続して学べることが重要だと考え、学習状況の確認機能や誤答した問題の復習機能を実装しました。

また、サークル内のランキングを通じて他の利用者の学習状況を確認できるようにし、一人で続けるだけでなく、周囲から刺激を受けながら学習できる仕組みを取り入れました。

主な機能

  • ジャンル・キーワードによる問題検索
  • 問題のシャッフル表示、解答の表示・非表示
  • 問題の個別登録
  • CSVファイルからの一括インポート
  • 競技クイズを想定した演習
  • 学習状況の確認
  • 誤答した問題の復習
  • サークル内ランキング

開発で工夫したこと

長期運用を前提とした内部改善

開発開始時はNuxt 2を採用していましたが、継続的に機能を追加する中で、保守性や開発効率に課題を感じるようになりました。 そのため、動作しているものをそのまま使い続けるのではなく、将来の変更を容易にするための改善も進めています。

主な改善内容は次のとおりです。

  • フロントエンドをVue 2 / Nuxt 2からReactへ刷新
  • フロントエンドとバックエンドをモノレポに統合
  • OpenAPIを用いたスキーマ駆動開発の導入
  • ドメインを意識したコード構成への整理
  • Docker、Dev Containerを用いた開発環境の統一
  • デプロイ手順の簡略化
  • 認証・認可機構の見直し

これらの改善では、新しい技術を導入すること自体を目的にせず、「今後も安全に変更を続けられるか」という観点で技術を選ぶことを意識しました。

技術スタック

フロントエンド

  • React
  • TypeScript
  • Vite
  • Mantine
  • TanStack Router

バックエンド・インフラ

  • Express
  • Node.js
  • OpenAPI
  • Docker
  • Nginx

開発の経緯

2021〜2022年:ExcelデータのWeb化

2021年秋、所属していたクイズ研究会の友人から、管理しているExcelファイルをデータベース化してほしいと相談されたことが開発のきっかけです。 当時、高専の授業でデータベースを学び、高専プロコンでWebアプリを開発した経験もあったため、学んだ技術を実際の課題に適用できると考え、開発を始めました。

依頼されたデータベース化だけで終わらせず、問題を実際の学習に活用するための検索・演習機能も追加しました。 編入試験による中断を挟みながら2022年末に最初のバージョンを完成させ、その後「競技クイズを念頭に置いたクイズ学習支援システムの開発」として卒業研究にも発展させました。

2023年〜:継続開発しやすい構成への刷新

高専卒業後も開発を継続し、機能追加だけでなく、長期的に保守できる構成へ改善しています。

特に、初期実装のまま機能を増やすと変更の影響範囲が広がりやすかったため、フロントエンドの刷新、モノレポ化、APIスキーマの整備、開発環境の統一などを段階的に進めました。

2025年〜:学習体験の拡充

現在は、問題を管理するためのアプリから、利用者が継続的に学習できるサービスへ発展させることを目指しています。 復習や学習状況の分析を充実させ、利用者が「次に何を学ぶべきか」を判断しやすい体験にするため、改善を続けています。

今後の展望

  • 学習履歴を用いた復習機能の改善
  • 苦手なジャンルや問題を把握できる分析機能の拡充
  • 問題登録・編集フローの改善
  • テストとCI/CDの整備による開発の安全性向上