Quiz Hub スタンダードver.（一般的な学習アプリのカラー）

使い所でしっかりコードが書ける
エンジニアの思考を身につけるアプリです！

【何を課題に感じて作ったか】

ハッカソン1週目に作った「engineer-simulator」は形になったものの、「本当に自分をペルソナにしたアプリになっているか？」という疑問が生まれました。

「実務を体験できるアプリ」ではなく、「実務に向けて学習できるアプリ」を作りたい。
今後の自分の学習に実際に使えるものを作ろうと、題材をやり直すことにしました。

【自分で設計から考えたこと】

まず自分がJS学習の中で躓いていることを洗い出しました。

・やりたいことは日本語で言語化できる

・「日本語で組み立てる→コードに落とし込む」の段階で詰まる

・メソッドの存在は知っているが、実際の使いどころで咄嗟に出てこない

これらの躓きに焦点を当てて設計しました。

使いどころでコードが書けるようになるには、
まずメソッドやWeb APIが引き出しに入っていないと取り出せない。
だからこそ「場面と紐づけて覚える」問題形式にこだわりました。

▼ 差別化ポイント

ペルソナは「今の自分」ではなく「3ヶ月前の自分」。AIに聞けばなんでも答えてくれますが、「答えが聞きたいんじゃなくて導き方（過程）を知りたい」とAIに伝えられない初学者のためのアプリです。

▼ 設計で意識したこと

・MVPと「あったら嬉しい機能」をきちんと線引きして完成を優先

・正誤判定は「コードとして通用する範囲」の揺れのみ許容（大文字小文字は厳密に判定、前後のスペースは除去）

・あくまでも実務を意識した問題文にこだわる

【バイブコーディングをどう活用したか】

今の自分の実力では手が届かないReactとTypeScriptを技術スタックに採用しました。
これから学習を開始する予定の技術で作ることで、アプリが学習教材にもなるという一石二鳥を狙いました。

また開発の手順や変更内容を逐一「初学者向けに噛み砕いた表現でdocsへまとめてもらう」を徹底し、開発と教材作りを同時進行で進めました。

【実際に使ってみてどうだったか】

UI/UXの細かな修正はまだあるものの、使い勝手はいいです。仕事の休憩中や子育ての合間など、隙間時間に自分の引き出しを増やすという目的にとても合っています。操作もシンプルにしたので煩わしさもありません。

デザインは2パターン用意しました。
下記は別パターン。
自身と同じ大人の女性向けに、少し落ち着いたブラウンをメインにした色のアプリです。

▼ マイスタイルver.（20〜40代・50代の女性向け）

まずは自分の学習ツールとして使い続けながら、引き続きブラッシュアップしていく予定です。

エンジニアを目指している方や、学習中の方にぜひ使ってみていただけると嬉しいです！

他の実績