個人開発で初めてReactを使って、タイピングゲームを作った話
初めて個人開発をしてみて、「JOJOタイピング」というタイピングゲームを開発してみました。
今回の記事では、開発したタイピングゲームの紹介と使用した技術の話をできればと思います。
※技術について、今回はあんまり深くは触れません、、
（別の記事で、技術周りで詰まったところなどの記事作ろうと思っています！）
改めましてこんにちは、ぐらじえです。
2022年入社の新卒エンジニアです。
私自身まだまだ未熟者ではありますが、この記事を読んで同じように個人開発に取り組む方々などのモチベーションにつながれば幸いです！
開発したタイピングゲーム
HOME画面
PLAY画面
SCORE画面
『ジョジョの奇妙な冒険』をモチーフにした、タイピングゲームです！
筆者はJOJOファンです！笑
ジョジョの中で出てくる独特のワードやセリフをタイピングし、タイピングの練習をできるゲームになっています！
（日本語版のの実装がめんどくさそうだったので英語の文章をタイピングする仕様💦）
1~5部までのコースを用意しているので、自分の好きな部ごとに楽しめるようにしてみました。
（この記事の投稿時は3部コースしか選択できませんが、、、）
BGMや効果音、スコア画面なんかにも、ちょこっとだけこだわりを入れてみました！
もしよければ、プレイしてみて体感してみてください！🌟
※このゲームはキーボードなしではプレイできません。
（スマホオンリーとかじゃ遊べないです、、）
今回の個人開発における目的・背景
目的
新しい技術を習得したかった！
- React（IT初心者ながら、なかなか熱いフレームワークな気がしている。Vue.jsは触ったとこがあったが、これを機にReactも使えるようになりたい！）
- GitHub（仕事の方で、SVNを使うことが多いのでGitHubの操作にも慣れておきたい！）
- AWS（個人的に資格勉強もしていますし、インフラ面で使いたい！結果的にFirebaseで実装することになるのですが、、）
- その他ツール（Figmaなどなど）
背景
IT関連に携わってから、タイピングゲーム（特に寿司打）が好きで、毎日のようにプレイしているうちに、自分でも自分好みのタイピングゲームを作りたくなった！笑
技術とその感想、開発期間など
開発期間
開発期間は約4か月ほど。
他の勉強なども並行していたこともあったが、思ったより時間がかかってしまったという印象。
（言い訳、、）
言語：JavaScript
言語は自信が使い慣れているJavaScriptを使いましたが、完成間近になってから、「ここで型指定できたらなー」みたいな場面も多く、TypeScriptでの実装をすればよかったと後悔したので、次何かの開発を行うときは迷わずTypeScriptを選択しようと思います。
フレームワーク：React
今回の個人開発のメインはこれです！
よく似たフレームワークであるVue.jsは使ったことがあったのですが、一般的にはReactの方が採用率が高いということで、使ってみることにしました。
（※筆者はこの個人開発で、はじめてReactを使いました！）
せっかくなので、ざっくりと筆者の勉強方法を紹介します。
とはいっても、やったこととしては
- Reactの紹介動画みたいなYouTubeを見漁り、なんとなくReactについて知る。
- 公式ドキュメントで紹介されている『Reactの流儀』を学習する。
これだけでも、大枠ぐらいは理解できたつもりにはなれました！
あとは開発最中に詰まったところが出れば、その都度ググりということを繰り返してました。
個人的には、わからないながらも一つ一つ問題を解消すれば開発はできるフレームワークだと思います！（ググればほとんどの調べたい内容はヒットしました！）
ググればいいといっても、やはり難しい部分も多く、ほんとに一部しか使いこなせていませんが、少しでも理解できれば開発していて楽しい言語でした！
CSSフレームワーク：Tailwind CSS
筆者はほんとにCSSが苦手で、この開発において最も苦戦した個所といえば、デザイン周りの部分になります。デザインに関しては本当に改善の余地しかないです、、
そんな中でも、Tailwind CSSは大活躍してくれました。共通部分のレイアウトなどにはcssファイルを使って記述し、それ以外にはTailwind CSSを使用してデザインを設計しました！
もっと使いこなせたらもっといいデザインができると思うのですが、そこは勉強不足です、、
ソース管理：GitHub
いまだ、Gitの操作が難しいなーと思っていますが、やはり便利なのでGitHubで管理しています。
今回の開発では、『Issueドリブン開発』というもの見つけたので実践してみました。
やるべきタスクがかなり明確化できたので、開発効率が上がった気がしています！
Issueドリブン開発
以下の記事を参考にしました！
インフラ関連：AWS・Firebase
最初はAWSでホスティングしていました。
ACM、Route53、ELB、EC2を使った構成！
ただ料金的に断念、、
（おそらく1か月で$40ほどかかる見込み😥もっと金額を抑えられる構成はあると思います。やってみたかった構成がこれだった！）
勉強しているだけあって、使いたかった～笑
ただAWSでも実装は一度テストとして実施済みなので、その際はすごく勉強にはなりました。
AWS構成図
「AWS金かかるな～どうしよ、、」ってなってた時にで色々ホスティング方法について、調べたところ個人開発レベルであればFirebaseの無料プランで良さそうな気がしたので、すぐさまFirebaseでホスティングを実施！
少し調べただけで簡単に実装できたので、すごく使いやすかったです！
ちなみにドメインはお名前ドットコムで取得しています。
デザイン：Figma
デザインは軽くFigmaで作成して、イメージを沸かせてから開発に取り掛かりました。
ただ、Figmaをあまりうまく活用できていないどころか、自分の納得できるデザインのギリギリでの開発（デザインに対する知識が少なすぎました、、）となった気がするので、次回以降の開発ではより良いデザインを作成できるように、デザインの勉強なんかもしてみようと思います。
Figmaで作成したデザイン
設計：スプレッドシートなど
一応気持ち程度にスプレッドシートで作成はしてみたもののしょぼすぎるので、紹介できるような設計書などはないです、、笑
開発において、一番重要かなって思っている、設計をおろそかに開発を進めてしまったので、次回はER図やフローチャートなど、より細かな設計書を作成できたらいいなぁと思っています。
（※今回の開発で設計段階のパートが一番重要だと個人的には感じました、、次は設計に力を入れたい！）
まとめ
今回は「JOJOタイピング」というタイピングゲームを作ってみた話を紹介させてもらいました。
Reactをはじめや学習してみたかったことにたくさん触れることができ、時間こそかかりましたが、すごくいい経験になりました。
今後も個人開発はできる範囲で続けてみようと思います。👌
今回の開発において、ピックアップして部分部分でまた別の記事を書こうと思っています。
もし興味がある方はそちらも楽しみにしてもらえればと思います！
長くなってしまいましたがお読みいただきありがとうございます。
もしよかったら「JOJOタイピング」を遊んでもらえると嬉しいです！！！
Discussion