tomoe
オリジナルアプリ第2弾「CanvasBattle」リリース！
2025年04月30日
学習振り返り
Tips
要約を生成中...
オリジナルアプリ第2弾を開発しました。
今回は、
・React（js）が理解できるようになったら、何かゲーム的なものを作ってみたかった
・息子が好きなものを詰め込んだ
・自分の復習としてアウトプットしたい
という思いから、「描いた絵でじゃんけんゲームができるアプリ」を作りました！
作り始める前、茜さんにちらっと「じゃんけんゲーム作ろうと思ってて」と話したら、
「オリアプ第一弾よりめちゃくちゃ簡単やん！」と言われました（笑）
確かに簡単なゲームですが、私にとっては時間がかかりました💦くやしい、、
今の自分が一人でもくもく開発できるレベルにした…というのが正直なところです。
でも、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 を使用しています。
以下、どんなライブラリを使ったか、一部ピックアップして簡単に記録に残します。解釈など間違ってたらお手柔らかに教えていただけますと幸いです✏️
おなじみのフォーム入力を管理する定番ライブラリ。私は13章で初めて使ったので復習！
Zod と組み合わせてバリデーションも実装しました。
…が、型に振り回されることも多く、何度も「なんでや～😢」となりました（笑）
いい学びになりました！
GETリクエストでデータ取得＆キャッシュが簡単にできるライブラリ。
正直、もう少しで忘れそうになってたので、これを機にちゃんと体に染み込ませたい！次の開発も使おう！
React でお絵描き機能（手書きキャンバス）を簡単に実装できるライブラリ。他にもスペックがすごそうなライブラリがあったのですが、これは簡単に線の色・太さなどを設定でき、描いた内容を画像として保存できるということで採用しました！めちゃくちゃ簡単にcanvasが作れて、幸せでした。笑
ルーレットUIを簡単に作れるライブラリ。
導入後に SSR 非対応（window/document 依存）なことが発覚💦ちょっと焦りましたが、少し工夫して導入完了。とても学びになったし、こだわってルーレット入れて良かったです。これは別記事で詳しく残そうと思っています！
ずっと使ってみたかったアニメーションライブラリ！
実は第一弾の時、ぶべさんに「まず機能面のスキルを上げよう」とアドバイスされて一度断念したやつです（笑）
今回はやっと使えて満足！「動きがあるって楽しいな〜」と実感しました🎉
その他にもありますが、使ってみたかった主なライブラリは以上です。
今回は、自分の学びと息子の「好き」を詰め込んだ、ちょっと遊び心あるアプリ作りになりました。
React に初めて触れたときの「三目並べ」からは、少し成長できた気がします。
これからも、UIなど改善していくとともに、これあったらいいな✨を作って、少しずつでも力をつけていけたらと思っています🔥
読んでくださりありがとうございました 😊
そして、もし使ってくださった方いらっしゃれば、どんなモンスター描いたか見せてください！楽しみです🧑🎨🙌🎶
何かアドバイスや感想などあれば、ぜひ教えてください！
要約
コメント
まだコメントはありません。
本気で学ぶなら、ShiftB
本気で学ぶなら、ShiftB
