オリジナルアプリ第2弾「CanvasBattle」リリース！

はじめに

オリジナルアプリ第2弾を開発しました。
今回は、
・React（js）が理解できるようになったら、何かゲーム的なものを作ってみたかった
・息子が好きなものを詰め込んだ
・自分の復習としてアウトプットしたい
という思いから、「描いた絵でじゃんけんゲームができるアプリ」を作りました！

「Canvas Battle」

作り始める前、茜さんにちらっと「じゃんけんゲーム作ろうと思ってて」と話したら、
「オリアプ第一弾よりめちゃくちゃ簡単やん！」と言われました（笑）

確かに簡単なゲームですが、私にとっては時間がかかりました💦くやしい、、
今の自分が一人でもくもく開発できるレベルにした…というのが正直なところです。
でも、React に初めて触れたときの「三目並べ」と比べると、かなり成長を感じることができた開発でした。とはいえ、まだまだ細かい部分で理解が浅いところも多く、今回も学びの多い復習になりました。

アプリの概要

このアプリは、子どもが描いた絵を使って、じゃんけんゲームができるというもの。

ログインしたユーザーが絵を登録できるようにしていて、
出先で小さな子供が退屈しちゃう時に、ちょっとでも楽しく遊んでもらえるような仕組みにしたいと思って作りました。

技術スタック

フロントエンド

• TypeScript

• Next.js 15

• React 19

• Tailwind CSS 4

• React Hook Form + Zod

• SWR

• React Hot Toast

• React Icons

• React Modal

• React Sketch Canvas

• React Custom Roulette

• Canvas Confetti

• Framer Motion

• Browser Image Compression　（←圧縮せずとも元が小さく、いらんかったかもしれない。。。）

バックエンド & データベース

• TypeScript 5

• Next.js 15

• Prisma 6

• @supabase/supabase-js
  
  デプロイは Vercel を使用しています。

  
  
  

  
  

使用ライブラリ ピックアップ

以下、どんなライブラリを使ったか、一部ピックアップして簡単に記録に残します。解釈など間違ってたらお手柔らかに教えていただけますと幸いです✏️

React Hook Form + Zod

おなじみのフォーム入力を管理する定番ライブラリ。私は13章で初めて使ったので復習！
Zod と組み合わせてバリデーションも実装しました。
…が、型に振り回されることも多く、何度も「なんでや～😢」となりました（笑）
いい学びになりました！

SWR

GETリクエストでデータ取得＆キャッシュが簡単にできるライブラリ。
正直、もう少しで忘れそうになってたので、これを機にちゃんと体に染み込ませたい！次の開発も使おう！

React Sketch Canvas

React でお絵描き機能（手書きキャンバス）を簡単に実装できるライブラリ。他にもスペックがすごそうなライブラリがあったのですが、これは簡単に線の色・太さなどを設定でき、描いた内容を画像として保存できるということで採用しました！めちゃくちゃ簡単にcanvasが作れて、幸せでした。笑

React Custom Roulette

ルーレットUIを簡単に作れるライブラリ。
導入後に SSR 非対応（window/document 依存）なことが発覚💦ちょっと焦りましたが、少し工夫して導入完了。とても学びになったし、こだわってルーレット入れて良かったです。これは別記事で詳しく残そうと思っています！

Framer Motion

ずっと使ってみたかったアニメーションライブラリ！
実は第一弾の時、ぶべさんに「まず機能面のスキルを上げよう」とアドバイスされて一度断念したやつです（笑）
今回はやっと使えて満足！「動きがあるって楽しいな〜」と実感しました🎉

その他にもありますが、使ってみたかった主なライブラリは以上です。

おわりに

今回は、自分の学びと息子の「好き」を詰め込んだ、ちょっと遊び心あるアプリ作りになりました。
React に初めて触れたときの「三目並べ」からは、少し成長できた気がします。

これからも、UIなど改善していくとともに、これあったらいいな✨を作って、少しずつでも力をつけていけたらと思っています🔥

読んでくださりありがとうございました 😊
そして、もし使ってくださった方いらっしゃれば、どんなモンスター描いたか見せてください！楽しみです🧑‍🎨🙌🎶
何かアドバイスや感想などあれば、ぜひ教えてください！