はじめに
今回、IndieゲームのランキングWebサイトを作成しました。
このサイトは、世界中の個人開発されたゲームを紹介・共有できる場所を作りたいという思いで作成しました。
最新のゲームとランキングを切り替えて表示ができ、ログインした際には掲示板機能も利用することが可能になっております。
まだ開発途中なので、今後のアップデートで機能を順次拡張していく予定です。
※Indieゲームとは小規模で個人で開発されたゲームのことを指します。
アプリ製作のきっかけ
もともと、Steamで個人制作されたゲームをよく遊んでいたのですが、「もっと簡単におすすめのIndieゲームを見られる場所があればいいのに」と感じたのがきっかけでした。
既存のゲームランキングサイトでは、大手企業が開発した人気タイトルばかりが上位を占めており、個人制作のゲームが埋もれてしまうことに課題を感じていました。
SNSや動画サイトでは、個人開発の面白い作品が話題になることもありますが、体系的に探せるランキングサイトはほとんど存在しません。
そこで、「個人開発者が作ったゲームだけを集めて紹介するランキングサイト」を自分で作ろうと考えました。
個人クリエイターの努力や発想がもっと多くの人に届き、ユーザーが“隠れた名作”を簡単に見つけられるようにすることを目指しています。
画面ごとの機能の紹介
1. ランキング画面
2. ログイン画面
3. 掲示板画面
4. ログアウト画面
仕様技術
- フロントエンド：React + TypeScript + Vite
- UIライブラリ：Chakra UI
- バックエンド：Supabase（認証・データベース）
- ホスティング：Firebase Hosting
- CI/CD：GitHub Actions
- テスト：Jest, React Testing Library
アプリ作成にあたって
今回IndieゲームのランキングWebアプリを作成するにあたり、「ランキング機能」と「ログイン後に使用できる掲示板機能」の実装に特に力を入れました。
データベースとAPI通信の基礎を理解
ランキング機能を実現するために、まずはデータベースからデータを正確に取得・反映させる仕組みを構築しました。人気順と新着順を安定して取得・反映させるために、ページ取得 → AppID抽出 → API詳細取得 → データ整形 → JSON保存という一連の流れを自動化し、ランキング反映の精度と安定性を高めることに力を入れました。
特にAPIを活用することで、ゲーム名・開発者・ジャンル・スクリーンショット・リリース日などの最新情報を効率的に取得できるようにし、取得したデータを正確に整形・管理することで、ランキングが常に最新の状態で反映される仕組みを構築しました。
TypeScriptの重要性を実感
開発を進めるうえで改めて感じたのがTypeScriptの重要性です。
型定義をしっかり行うことで、データの受け渡しや状態管理が明確になり、フロントエンドとバックエンドのデータの整合性を保つことの大切さを実感できました。
ログイン機能の実装
今回の開発では、初めてログイン機能を実装し、ユーザー認証の仕組みを学びました。UserContext を利用してユーザー情報をアプリ全体で管理し、onAuthStateChange によって認証状態をリアルタイムで検知できるようにしています。
この機能を実装する過程では、特に supabase 側の設定や認証情報の紐づけに多くの時間を費やしました。トークンの管理やリダイレクトURLの設定など、フロントエンドだけでなくバックエンド側の理解も深めることができました。
CI/CDでの自動化
データの取得処理が完了した段階で、CI/CDも導入しました。
CI/CDはとても便利で、ビルド、テスト、デプロイなどをまとめて実行することができそのことについて改めて体感しました。
今回特に苦労したのは、実装したサーバーのデータをGit上に保存し、そのままデプロイすることでランキングを自動更新する仕組みを GitHub Actions で構築することでした。
トライ＆エラーを繰り返しながら設定を調整した結果、データ取得からデプロイまでを自動化できるようになり、GitHub Actions の理解度を向上させることができました。
アプリ製作についての気づき
今回、APIからデータを取得してアプリを作る過程で、私はサーバーやデータ取得の仕組みについてほとんど知りませんでした。しかし学んでいくうちに、どのようにデータが取得され、どこまで操作できるのかを理解したいという思いが強くなりました。
その結果、サーバー構築やAPI連携の方法について幅広く勉強することができ、実際に自分でサーバーやデータフローを組み立てる経験を積むことができました。
技術的な学びだけでなく、開発を通して「課題を自分で分解して解決策を考える力」や、「想定外の問題にも柔軟に対応する力」の重要性にも気づきました。また、ユーザーが使いやすいサービスを作るためには、ただ技術を実装するだけではなく、ユーザー視点で考えることの大切さも実感しました。
まとめ
今回の開発では、IndieゲームのランキングWebサイトをゼロから構築し、フロントエンド、バックエンド、CI/CDまで一通りの開発フローを経験できました。
この経験をもとに、今後はより便利で使いやすいサイトを実装するように努力しようと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼