Zenn
Open8

nuxt3を使ってruby silverの問題集を基にクイズアプリを作る

Docker
Nuxt
Vue.js
ShurijocShurijoc

○ 背景
Ruby技術者認定試験 Silverの練習問題を探していたところ現在はgist 管理していることがわかりました

gistだと「問題を解く→解説を見る」の流れが非効率で途中で読むのを辞めてしまったのでクイズアプリとすることにしました。

ShurijocShurijoc

今回はまだ触ったことがないnuxt3を使ってみようと思います。
また時間をかけたくないので、完成までの時間の速さも意識したいです。

ShurijocShurijoc

ということで早速 docker nuxt3 で検索してこちらの記事がヒットしましたのでセットアップ。

基本的には書いてあるとおりで問題ないですが head.addEntry の undefined function Errorが出てきて少し詰まりました。

結局 公式のissue に上がっていたpackage.jsonにresolutionsを追加する方法で解決して無事localでの起動を確認。

{
  "resolutions": {
    "@vueuse/head": "v1.0.0-rc.14"
  }
}

ShurijocShurijoc

サービス概要

このmarkdown形式のファイルを基にクイズアプリを作る。

MVPユーザーフロー

  1. トップページから開始ボタンを押して、試験スタート。
  2. 問題文と選択肢が出てきて、ユーザーが選択できる。
  3. 選択後、解答するボタンを押す。
  4. その後正誤と解説が表示される。
  5. 最後に合計得点が出てくる。

あとから追加機能

  • 正誤の演出 or silver合格・不合格演出の追加（jsのpluginを後で探す）
  • twitterでシェア
  • 問題の順番のランダム化
  • ランキング（weekly）
  • 制限時間

ページ/Commponent設計

  • トップページデザイン
    • 問題を開始する
  • 問題詳細ページ
    • 問題/解答データ
      • fetch markdown
      • parse markdown
      • デザイン当て込み
    • 共通
      • 現在の問題数
      • かかった時間
    • 問題component
      • 解答フォーム
      • 答え合わせボタン
    • 答えcomponent
      • 正誤表記
      • 解説
      • 次の問題へ

デザインはtailwindと必要ならtailwinduiの予定
↓をmvpのイメージとして
https://vuejsexamples.com/simple-quiz-app-using-vue-3-and-tailwind-css/

markdownのparseは https://zenn.dev/hankei6km/articles/transform-markdown-to-json 参考にmd to jsonする

ShurijocShurijoc

実装内容

  • tailwind導入
  • トップページ
    • デザイン当て込み
    • 次のページへボタン設置
    • 問題詳細ページのベース作成
  • 問題詳細・問題解答component
    • デザイン
      • 問題タイトル + 問題文
      • 回答選択肢
      • 解答するボタン
      • （ボタン押下後）正誤表示
    • 実装
      • markdownのfetch
      • markdownのparse
      • 解答時の正誤判定
  • 答えcomponent
    • デザイン
      • 答え + 解説
      • 次へボタン
    • 実装
      • 次へボタンで次の問題表示へ
  • 共通
    • デザイン
      • 経過時間
      • 解答数/総問題数
    • 実装
      • 経過時間
      • 解答数/総問題数
ShurijocShurijoc

次はトップページ。

よくある感じので良いと思うのでtailwinduiから無料のやつ を使用。

# yarn add @headlessui/vue@insiders
# yarn add @heroicons/vue@latest