キャラクターガチャゲーム「Elementia」
作品・ソースコードを見る
以下、「制作のポイント」もぜひご覧ください。
制作のポイント
私がReactの学習を開始してから約1週間で制作した、初めてのReact作品です（公開日：2025年7月6日）。
※このゲームは2日ほどで制作しました。
Reactに本格的に触れたのは今回が初めてで、以前会社でReactの勉強会に参加した際には、自分にはまだ難しいと感じていました。
しかし、これからのフロントエンド開発でのスキルアップには、jQueryからの脱却が不可欠と考え、改めて独学でReactに挑戦することにしました。
学習方法としては、ハンズオン形式の動画講義を複数視聴し、基本的な構文やコンポーネントの構造、フックの使い方などを学んだ上で、このガチャゲームの制作に取りかかりました。
使用技術と実装ポイント
- React + Vite によるSPA構築
- React Router を用いたページ遷移（HOME / GACHA / RESULT / MYPAGE）
- useState, useEffect, useRef, useNavigate などReactフックの活用
- キャラクター情報をJS配列で管理し、map・filterでの動的表示
- LocalStorageを使わず、React内の状態管理だけで所持キャラを記録
- react-rewards を用いた高レアリティ排出時のクラッカー演出
- CSS Modules によるスタイル分離と、レアリティに応じた動的なカラー変更
- Vercel での公開・デプロイ
画像素材について
キャラクター画像は、Microsoft Designer（AI画像生成ツール）を使用してオリジナルで出力したものを使用しています。
工夫した点・今後の展望
- 初学者でも視覚的に楽しめる作品を目指し、高レアリティ演出やキャラカードの色分けなど、UI面も意識しました。
- 状態管理をわかりやすく保つため、useStateをルートコンポーネントにまとめ、各ページへPropsで渡しています。
- 今後はLocalStorageの導入、10連ガチャ機能やピックアップ演出など、より楽しめる機能追加にも挑戦したいです。