🗾

はじめてのReactで都道府県を当てるゲームをつくりました

2022/09/28に公開

14件

（映像もつくりました）
prizmという、市町村から都道府県を当てる新感覚クイズゲームをReactで個人開発した話です。
https://prizm.pw

内容

今までPHPやjQueryなどで開発をしてきた18歳です。
モダンなフロントエンド技術の習得を目的に、今回React・TypeScriptで初めて作った成果物です。
制作期間は1ヶ月弱ほどです。
もしよければ、読んで・遊んでもらえるとうれしいです！

TypeScript
React
Redux
Firebase Realtime Database
UIデザイン・ロゴデザイン

つくったもの

「市町村から都道府県を当てる」
リアルタイム性のある新感覚クイズゲームです。
ランダムなある1つの都道府県から次々と市町村※が出題される中で、一番早く都道府県を答えられた人が勝ちの、地理力と反射神経が問われるゲームです。
モードは初級（市町村）・中級（市町村の頭2字）・上級（市町村の頭文字）・駅などがあり、はじめは初級がおすすめですが、慣れてくると上級がなかなか頭を使うので楽しくておすすめです。
※東京23区を含む
https://prizm.pw

リポジトリ

https://github.com/koluriri/prizm

背景

LINE bot

数年前に同じゲームをLINE botでPHPで開発し、仲間内で遊んでいました。
ただLINE botのAPIの制限に引っかかってしまうので遊べない状態が続いていて、Webベースで作り直したいと考えていました。

PHP+JSで作ったもの

2021年の3月に、当時持っていた技術であるPHPとjavascriptでWebsocket通信を行うものを作ったのですが、PHPはWebsocketには不向きで、バグがとても多くうまくいかず完成しないままお蔵入りとなりました。
またデザインもごちゃごちゃしていて満足のいくものになっていませんでした。

今回の目的

私は今回のゲームをつくるまでPHPやレガシーなjavascriptしか書けなかったので、最新のプロダクトで採用されている技術を新たに習得したいと考え、モダンなフロントエンド技術の習得を目的にこのゲームをサーバーレスSPAとして開発しました。

名称

「prizm」という名前は、Prefecture+Quiz+Gameの造語で、今回新しく命名しました。

技術

言語： TypeScript
ライブラリ： React
状態管理： Redux
CSS in JS: Emotion
データベース： Firebase Realtime Database
ホスティング： Firebase Hosting

学習

今回、こちらの「りあクト！」シリーズに非常にお世話になりました。
https://oukayuka.booth.pm/items/2368045
①〜③まであり、TypeScriptの記法からReactの非同期処理まで網羅的にわかりやすく紹介されていてとても良書でした。ありがとうございます。
一週間かけて3冊の内容をNotionに要約しながら読んだのですが、基礎知識の習得方法として非常に有益でした。
その後は実践として、今回のゲームの開発を通して学んでいきました。

開発フロー

今回始めてVSCodeを利用しましたが、TypeScriptの相性が抜群で、開発体験が飛躍的に向上してとても使いやすかったです！

issueドリブン開発

開発フローとして、issueドリブン開発を試みました。

タスク（機能）をissueとしてすべて書き出す
それぞれに対応するブランチを切って作業、コミットする
プルリクしてマージする

今回は個人開発なのでそこまで厳密な運用はしていないのですが、以下のようなメリットがあったので今後も採用するつもりです。

Milestoneやコメントなどを活用したタスク管理ができる
作業の見通しが立てられる
変更履歴を見たときにどういった作業に属するコミットなのかが分かる

など

参考：

ビジュアルデザイン

実は先行して機能だけを実装していったので、デザイン前はこのような殺風景な状態でした。ここから今のようなビジュアルにどう変化していったのかを書いていきます。

技術

UIデザインはFigma、ロゴなどその他のデザインはIllustratorで行いました。
今回新しい技術を習得したかったのでFigmaも初めて使いましたが、ピクセルに合わせるのが簡単でWebデザインに非常に向いていて、今後も積極的に使っていこうと思います。

ワイヤーフレームの制作

FigJamで描きました。ワイヤーフレームは個人的にPCではなく手書き（iPad）の方が直感的に描けるので、手書きにしています。

伝統色に基づいて表現するカラーパレット

日本の伝統色には「桜」「抹茶」などの意味のある色が多数あるので、これらの伝統色をもとにポップなゲームに合うように色を調整し、カラーパレットを作成しました。

デザインコンセプト

まず、このゲームは「日本」をテーマにしたものではなく、「都道府県」をテーマにしたものなので、
デザインコンセプトとしては、和を基本にするより、ポップなゲームという土台の上で少しだけ和の要素を取り込む程度にし、あくまでポップなゲームを作ることを念頭に置きました。

都道府県ってどういう存在？

桜や四季、神社など、色々モチーフは考えられたましたが、突き詰めれば、都道府県とは 「山や海がある47のもの」 だと考えました。
また、日本という国は文字通り「日出ずる国」です。
そこから都道府県という存在は「山」「海」「日」の3つの要素で表現できるのではないか？と思いました。

山、海、日をどう表現するか

三角形を並べれば、山並みにも海の波にも見えることに着目しました。
日は国旗に表されるように赤い丸で表現します。

そして、三角と丸という2つのエレメントで、山と海、そして日を表現してみました。

三角と丸で都道府県を表現する

山と海と日という要素で47都道府県のモチーフを制作しました。
色は伝統色カラーパレットを置いています。

ロゴ

モチーフとなる47という数

都道府県のもう1つのキーワードは「47」という数です。
今回のプロダクトは「日本」や「和」がテーマのものではないので、桜や神社などのモチーフをロゴにするより、47という数字をそのままロゴにする方が適していると考えました。

三角と丸で47を表現する

三角と丸という2つのエレメントで「47」という数字を構成したロゴをつくれないかを模索しました。
ロゴは抽象化したもので十分であり、47という数字を認識できるまでの解像度はいらないので、一番上の最もシンプルなものをベースに進めることにしました。

なおここまでの作業は、都道府県のデザインとカラーパレットの作成を除きすべてiPad Proで行っています。

ロゴの制作

モチーフが決まったので、Illustratorで清書を行いました。詳しいところは省きます。

デザインの制作

こうしてポスターが完成しました。

出題デザイン

日の丸をセンター表示すると国旗に見えることに着目し、出題デザインに応用しました。
CSS animationによる立体的なモーションをつけて楽しくみせました。
※画像の文字は適当なダミーテキストです

UIデザイン

FigmaでUIデザインを行いました。
iPhoneやiPadにFigmaアプリを入れておくと、それぞれ実機でリアルタイムにプロトタイプが確認できるので非常に重宝しました。

モーション

CSS animationで随所にアニメーションをつけていきました。
出題部分や、答え合わせ画面の都道府県部分など、3Dの立体表現は、ztext.jsというSVGや文字を3D化できるライブラリを使用し、回転アニメーションなど動きの表現はCSS animationで実装しています。
https://bennettfeely.com/ztext/

まとめ

今後の課題

Reduxは既にあまり見なくなってきている気がするので、RecoilやJotaiなど新しい状態管理ライブラリを使ってみたい。
CSS in JS、特に今回採用したEmotionはコードの見通しが悪くなりがちだったので、次回開発するときはstyled-componentsを使ってみたい。
React Nativeを使ってこのゲームをスマホアプリにしてみたい。
バックエンド処理がなく、すべてフロントエンドで処理しているので、オンライン・オフライン処理などUXが悪い部分がある
ルーム分けがなく、アクセスした段階で待機中とみなされるので、同時接続数が多くなると破綻する
接続数が増えるとFirebase Realtime Databaseの利用料が発生してしまう

今回のゲーム開発でReactのことがある程度わかったので、いま、ずっと作ろうと思っていたWebアプリを本腰を入れて制作中です🥳まだしばらくかかりそうですが…

長くなってしまいましたがお読みいただきありがとうございます。もしよかったら遊んでもらえると嬉しいです✨

※Firebaseの無料プランで運用しているので、利用量が上限に達した場合プレイできなくなる可能性があります。ご了承ください。