概要

制限時間内に「スタート」ボタンが何回押せるかを競うミニゲームを作成しました。

このゲームは、シンプルながらもユーザーの反射神経と速さを試すことができます。

また、ログインするとランキングに参加できます。ユーザ名とパスワードで登録できるので、興味がある方は試してみてください。

技術構成

バックエンド

RUNTEQで学んだRailsを活用しました。

ただ、RailsではURIの管理のみにし、画面作成はReactに任せました。

このRailsとReactのつなぎの部分には、react-railsというgemを使用しました。
一行書くだけでReactに値を渡せるのでかなり便利です。

フロントエンド

画面作成はすべてReactに任せました。

UIの部分では、最近日本で発表されたYamadaUIコンポーネントライブラリを採用しました。
このライブラリは日本発なので、ドキュメントも丁寧で非常にわかりやすかったです。

ホスト

当初はRender.comを利用しようとしましたが、デプロイに問題が生じたため、Herokuに切り替えました。
DBにはMySQLを採用しました。
Herokuの「JawsDB MySQL」アドオンを利用することで、一定の制限はありますが、MySQLを無料で使用することが可能です。

苦労した点

環境構築

初めはRender.comでデプロイしようとしましたが、Webpackのコマンドがないという下記のようなエラーに直面しました。

error Command "webpack" not found.

Herokuにデプロイしても同様でした。

調べたところ下記の状況と似ていたので、Herokuでビルドパックの順序を決め、package.jsonにnodeとyarnのバージョンを追加したら上手くいきました。

効果音挿入

効果音の挿入も一筋縄ではいかず、Shakapacker経由ではmp3の変換に下記のエラーが発生しました。

ERROR in ./app/javascript/sounds/correct.mp3 1:3
Module parse failed: Unexpected character '' (1:3)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./app/javascript/components/GameBoard.js 6:0-49
 @ ./app/javascript/components/ sync ^\.\/.*$ ./GameBoard.js ./GameBoard
 @ ./app/javascript/packs/application.js 17:30-65

最終的には音声ファイルをプロジェクトのpublicディレクトリに配置し、直接ファイルを使用することで対応しました。

React

Reactは初めて触れたため、useEffectやuseStateなどの概念に慣れるのが大変でした。

しかし、生成AIを活用しながら何とか形にすることができました。この経験を活かして、今後はUdemyなどでさらに学びを深めたいと考えています。

感想

期限もあったので、シンプルなミニゲームになってしまいましたが、Reactや気になっていたYamadaUIを触るきっかけになって良かったです！

RUNTEQのミニアプリウィークは定期的にやっているみたいなので、次回も参加したいですね。

次は生成AIを活用したアプリ開発に挑戦したいです！

リポジトリ