🎉

Rails API + Vue.jsで、SPAのクイズアプリを作った

2023/06/28に公開

Rails

Vue.js

ポートフォリオ

tech

アプリの概要

登山を楽しみたいハイカーに対して、クイズを解きながら楽しく登山に関する知識をつけられるクイズアプリです。制作期間は、アプリ以外での学習時間も含めて約2~3ヶ月です。

スマホに合わせたデザインです

サイトURL: https://yama-quiz.herokuapp.com/
Github: https://github.com/atsushi101011/yama_quiz

作成したきっかけ

登山を楽しむには専門知識が不可欠です。クイズを通して知識をつけてもらい、登山ライフに活かしてもらうために作りました。対象ユーザーは、登山の知識をつけるのが好きな人、登山に関心を持ったが何から勉強すればいいかわからない人などを想定しています。
　また技術的な背景としては、Railsでの個人開発経験はあったので、新たにVue.jsを使ってSPA(シングルページアプリケーション)を作ってみたいと思ったからです。

使用した技術

フロントエンド

Vue.js 2.6.11
vue-router 3.2.0
vuex 3.4.0
vuetify 2.6.0
axios

サーバーサイド

Ruby 2.7.5
Ruby on Rails 6.0.4.6 (APIモード)
Rspec

インフラ

heroku

ER図

苦労したこと

Vue.jsとRailsのデータのやり取りの理解

Vue.jsを扱うのは初めてだったため、データの受け渡しを理解するのに苦労しました。今回のアプリにはデータ管理としてVuexを採用しました。そこまで複雑な管理ではないので必須ではなかったですが、学習のために使用してみました。

たとえば、クイズの問題を描画するまでの一連の流れは次の通りです。コンポーネントからVuexで定義したアクションを呼び出します。そのアクションでRailsにあるクイズデータを取得しJsonデータを返します。MutateされたStateをコンポーネントで描画します。

https://vuex.vuejs.org/ja/

クイズのプログラム

クイズの正誤判定や回答クリック時の状態変更などのロジックを作るのに、時間がかかりました。
回答クリック時に、色の変更や、正解数を＋１したりするメソッドを定義しています。次の問題へ行く際はこれらを初期値に戻すことや、問題数をカウントしておく必要があります。

今後アップデートしたい機能

ログイン機能を追加して、クイズの履歴、ランキングなどをみれるようにする

今回はクイズの基本的機能をSPAアプリとして実現することを目標にしていました。今後は、ログイン機能を追加したうえで、問題の作成やクイズの解答履歴などがわかる機能を追加したいです。

生成系AIを活用してクイズ作成する

今回は自分で問題内容を考えて管理画面で作成していました。生成系AIがトレンドであることもあり、クイズ作成を自動で行えるシステムを作ってみたいです。

その他、工夫したこと

個人開発で進めていると、どうしても詰まってしまう箇所は出てきてしまいます。また適切なコードの書き方がわからず進めることになるので、MENTAを使って経験豊富なエンジニアの方に、コードレビューと質問を定期的に行っていました。それ以外は、書籍やWebでの有益なサイトを活用して学習を進めていました。