Zenn
🙂

初学者が１からゲーム閲覧サイトを作ってみた(Nuxt3 × Firebase)

2024/04/03に公開
Firebase
Vue 3
Nuxt 3
tech

はじめに

タイトル通り、異業種からの転職にあたって１からプログラミングを学び、ゲームレビューサイトを作る挑戦を記録した記事になります。
目的としては開発を独走してみて、一連の流れを知ることや、技術を身につけることです。
初学者が急発進で走り出して作成したため、拙い部分が多いです。
スペックとしては、

  • HTMl、CSS、JavaScriptを使って模写ができるレベル
  • それ以外は全くの未経験
  • 独学がメイン（書籍やUdemyなどは利用しています）

何を作るか

わたし自身、ゲームが好きで何か面白いゲームはないかと探すことはよくあったため、手段になればと思い、見やすくシンプルなゲームレビューサイトを作ろうと思いました。

ゲーム版ネットフリックスをイメージ

何で作るか

私はフロントエンド志望なのでモダンな言語のReactとVueどちらかにしようと考えました。
調べてみるとReactはVueに比べて学習コストが高いことがわかったので、初学者として今回はVueを選びました。
また、ゲーム閲覧サイトを作るにあたってバックエンドは自分で１から作ることは難しそうだったため、ゲームソフトを取得できるようなWebAPIはないかと調べた結果、TwichAPIがヒットしました。
ただ、当時うまく使えず時間もあまりなかったため他の方法を模索。
結果、Googleが提供している開発プラットフォームであるFirebaseで作成することにし、今回Nuxt3×Firebaseで開発を進めるに至ります。

開発の大まかな流れ

  1. デザインを決める
  2. ファイル構成を決める
  3. DB設計

デザインを決める

小さなプロジェクトなのでデザインからやってみました。
大まかな外枠はwhimsicalで、細かなデザインや色はFigmaで作成しました。

whimsical


Figma

ファイル構成を決める

デザインとほぼ同時にどういったページが必要なのかざっくり考えました。
今回私は、大きく分けて管理画面と顧客画面を作りました。
管理画面は、

  1. ログインページ
  2. メインページ
  3. 動的なゲーム詳細画面
  4. 登録画面

顧客画面では、

  1. ログインページ
  2. メインページ
  3. 動的なゲーム詳細画面
  4. ジャンル別の全ゲームページ
  5. マイページ
  6. レビューページ

DB設計

DBはFirebaseのRealtimeDatabaseを使用します。
その他、ユーザー管理にはAuthentication、画像管理にはStorageを使用しています。
まずgames、reviews、usersの３つに大きく分け、
必要なノードを足していった結果が以下になります。

games

gamesノード

gamesには、ゲーム情報を保存しています。

  • id
    RealtimeDatabaseではプッシュすると自動で生成されるユニークキーが付与されます。
    このユニークキーを用いて、後々、削除や更新、検索が楽になるため、idをgamesに持たせてあります。

  • image
    今回画像についてはFirebaseのStorageを使いました。
    imageには下記のように対応ゲーム画像のフルパスを入れてあるのでこれで互換性を持たせています。

//関数内でStorageにアップロードする際の処理例
await uploadBytes(storageRef, gameFile.value!).then((snapshot) => {
    game.value.image = snapshot.metadata.fullPath;
  });

reviewsノード

レビュー機能を持たせるため、下記のreviewsノードも追加しています。


reviews
reviewsには、

  • 対応するゲームユニークキー
  • UID
  • 評価値
  • gamesと同じような自身のユニークキー

usersノード


users
usersには

  • UID
  • 名前

を持たせました。が、名前に関しては後から取れるため、別に要らなかったです。
reviewsやusersでも出ましたUIDはAuthenticationでアカウント作成時に付与されるIDです。
正直ここまで、最初に全て決めて作り始めたわけではなく、追加したノードは多いです。

実際のやりとりの例は下記をご覧ください。
https://zenn.dev/hisann/articles/038a2f24dce5c5

管理画面

下記はメインページと動的な登録画面になります。

対応するゲームのユニークIDをパラメータとして渡す→遷移後、パラメータからユニークIDを受け取る→ユニークIDを用いてDBからデータを取って、表示しています。
最低限のバリデーションチェックも導入し、誤った内容のプッシュは防いでいます。

顧客画面


マイページでアカウントの画像、名前、メールアドレスを表示したかったため、ログイン方法はgoogleログインで統一。

気づき

課題点

  1. コンポーネントの活用

ファイル間で重複しているコードは多く、効率が悪いと感じましたし、単一ファイル内で依存しているUIが多いため、修正がしづらかったです。
再利用可能な機能はコンポーネント化し、利用することで効率的で管理しやすくエラーの少ないものになったと思っています。
画面設計の段階で、どのように分割して設計していくか考える必要があったと思います。
https://ja.vuejs.org/guide/essentials/component-basics

  1. 基礎的な知識の欠如

Vue.jsやNuxt.jsに限らず、そもそもTypeScriptやCSSなどコーディングが汚い部分も多く、基礎的な部分からしっかりと学び直そうと強く思いました。

  1. APIを使用する

今回学習のためだったので良かったですが、管理画面で自分でゲームを登録する作業は確実に現実的ではないこともわかりました。

工夫した点

  1. 読み込みアニメーションの導入

DBとの通信の最適化がうまくできておらず、読み込み時間が長いものになってしまいました。
そこで読み込み時のアニメーションはLottieで導入。
https://lottiefiles.com/
導入もすごく簡単で、顧客画面がリッチになりました。
今後も積極的に使っていこうと思います。

まとめ

Discussion