はじめに
知的財産管理技能検定2級の勉強を進めるにあたり、市販の問題集や暗記カードだけでは知識がなかなか定着しないという課題に直面しました。
特許法、実用新案法、意匠法、商標法、著作権法といった複数の法域を横断的に理解する必要があり、条文の細かい要件を混同してしまうことが多かったのです。
また、通勤時間や隙間時間を使って効率的に復習したいという欲求もありました。
そこで、ブラウザ上で動作する一問一答形式のクイズアプリを自作することにしました。
作ったもの
ブラウザだけで動作する知財2級対策の一問一答クイズアプリを作りました。
全115問を以下の7カテゴリーに分類して収録しています。
| カテゴリー | 内容 |
|---|---|
| 特許法 | 特許出願・審査・権利に関する規定 |
| 実用新案法 | 実用新案登録に関する規定 |
| 意匠法 | 意匠登録に関する規定 |
| 商標法 | 商標登録・権利範囲に関する規定 |
| 著作権法 | 著作権の発生・権利内容に関する規定 |
| 条約・国際動向 | パリ条約、TRIPS協定等の国際的枠組み |
| その他関連法規・実技 | 不正競争防止法等、および事例・計算問題 |
出題はカテゴリーを絞って行うことも、全カテゴリー横断で行うこともできます。
出題順は「順番」と「ランダム」の2種類、出題数は10問・20問・全問から選択でき、回答すると正誤と解説が表示され、間違えた問題だけを抽出して復習する機能もいれました。
加えて、カテゴリーごとの正答率を可視化することで、自分がどの法域を苦手としているかを把握できるようにしました。
ホスティングはGitHub Pagesを利用しており、リポジトリにプッシュするだけで無料で公開できるように頑張りました。
技術構成
技術スタックの選定
ごく単純な画面遷移と問題の出し分けだけ考えればよかったので、フレームワークやビルドツールは使わず、素のHTML・CSS・JavaScriptのみで作りました。
| 検討軸 | フレームワーク採用 | Vanilla JS（採用） |
|---|---|---|
| 要件の複雑さ | 過剰スペック | 要件に見合う |
| デプロイ | ビルド工程が必要 | ファイルをそのまま配置可能 |
| 長期メンテナンス | 依存ライブラリの更新対応が必要 | 依存ゼロで放置耐性が高い |
| GitHub Pagesとの相性 | 設定が必要な場合がある | そのまま公開可能 |
ファイル構成
役割ごとに以下のようにファイルを分離しました。
chizai-quiz/
├── index.html # 画面構造(HTML)
├── style.css # 見た目(CSS)
├── app.js # 挙動制御(JavaScript)
└── data/
└── questions.json # 問題データ
この分離により、見た目を変更したいときはCSSだけを、問題を追加したいときはJSONだけを触れば済みます。
問題データの設計
個々の問題は次のスキーマを持つオブジェクトとし、それを配列にまとめてJSONで保持しています。
| フィールド | 内容 |
|---|---|
id |
問題の識別子 |
category |
カテゴリー名 |
title |
問題タイトル |
question |
問題文 |
options |
選択肢の配列 |
answer |
正解の選択肢 |
explanation |
解説文 |
ロジックとデータを分離したことで、プログラムのコードを一切変更することなく、JSONファイルに問題を追記するだけで出題内容を拡張できます。
これにより、同じ仕組みを別の資格試験の対策アプリに転用できる設計にしています。
画面遷移の実装
複数のHTML要素をあらかじめ用意しておき、表示すべき画面にだけ特定のクラスを付与するという単純な方法で画面遷移を実装しました。状態は以下の4つです。
[トップ画面]----開始---->[出題画面]----全問終了---->[結果画面]
↑ |
|--------------- トップに戻る ------------------|
| | 復習を選択
| v
|----------------- 復習終了 ----------------[復習画面]
単一ページアプリケーションを構築するためのフレームワークを使わなくても、状態の数が少なく遷移のパターンが限定されている場合には、この程度の実装でいいかなと思います。
出題ロジックの流れ
出題対象の決定は、以下の3段階の処理で行っています。
全問題
↓ カテゴリーで絞り込み
絞り込み後の問題群
↓ ランダムモードならシャッフル
順序確定後の問題群
↓ 指定件数で切り出し
出題セット
この三段階の処理によって、カテゴリー選択・出題順・出題数という3つの条件を独立に組み合わせられる仕組みを実現する、というわけです。
誤答管理と復習機能
出題中に不正解だった問題は、その都度専用の配列に蓄積していきます。
全問終了後、この配列に問題が残っていれば復習ボタンが活性化し、押下すると蓄積された問題だけを対象とした別の出題フローが開始されるようにしました。
通常の出題フローと復習フローは画面こそ異なりますが、内部的には同じ考え方で処理されています。
カテゴリー別正答率の集計
出題が終わった時点で出題された全問題とそのうち不正解だった問題をそれぞれカテゴリーごとに集計し、カテゴリー名をキーとした件数の対応表を作成します。
| カテゴリー | 出題数 | 不正解数 |
|---|---|---|
| 特許法 | 5 | 1 |
| 商標法 | 3 | 0 |
| ... | ... | ... |
この対応表をもとに正答数と出題数を並べて表示することで、利用者が自分の弱点を一目で把握できるようにしています。
デプロイ
このアプリはビルド工程を持たない静的なファイルの集合です。
そのため、GitHubのrepositoryにファイル一式をPushし、repositoryの設定画面でGitHub Pagesを有効にするだけで公開が完了します。
特別なデプロイスクリプトや継続的インテグレーションの仕組みを用意する必要はなく、個人の学習用ツールを手軽に世に出す手段として、この構成がよさそうだと考えています。
おわりに
今回作成した知財2級対策クイズアプリのリポジトリとデモのURLを共有します。
皆様の何かの一助になれば幸いです。