作ったきっかけ

このアプリを作ろうと思ったきっかけは、株式会社ゆめみ様のTwitterアカウントで投稿されたとあるツイートでした。

【ゆめみからの挑戦状★第3弾】
好評につきシリーズ化するやで～☺

【JSクイズ】
/* ここに回答を書いてください */ の部分を埋めてくださいやで！

【回答方法】
引用RTで回答お願いしますやで！

【正解発表】
8/25（木）

【出題者】
無職やめ太郎（本名）@Yametaro1983#ゆめみからの挑戦状 pic.twitter.com/5WbLMkitwL

— 株式会社ゆめみ | YUMEMI (@yumemiinc) August 18, 2022

アーキテクチャ

図の通りです。

フロントエンド

フロントエンドはVercel というPaaS上にデプロイしています。主な使用技術はNext.js、TypeScript、TailwindCSS、NextAuth.jsです。

認証部分

認証にはNextAuth.jsとFirebaseのFirestore Databaseを使用しています。現在はTwitterによるOAuth認証のみ対応しています。

バックエンド

クイズ情報管理

クイズ情報の管理には microCMS というヘッドレスブラウザを採用しています。自前でテーブルを作ってデータのCRUDを実装するよりも圧倒的に楽にデータ管理が可能となり、短期間で作り上げるにあたってはうってつけのサービスです。

フロントエンドはmicroCMSが提供するAPIを叩いてクイズ情報を取得しています。

回答情報管理

回答情報管理のこだわりポイントは、回答を受け付ける処理と回答結果を判定する処理を分けている点です。 APIは回答を受け付けてメッセージキュー(MQ)にイベントを送信して早期にフロントエンドにAckを返します。回答の正誤判定はMQからのメッセージを受け取ったCode Executerというコンポーネントが行います。こうした理由は回答によっては判定に時間がかかるケースも考えられるためです。仮に回答を受け付けて結果を判定する処理をAPIだけで行っていると、レスポンスに時間がかかってしまってアプリのUXに悪影響を与えてしまいます。回答の正誤判定をMQを挟んで非同期的に行うことでUXの向上に努めました。