🦑

好きなゲームの非公式Webサービスを作った話

2025/01/14に公開

経緯

任天堂Switchの大人気ゲーム、スプラトゥーン3のアルバイトモード「サーモンランNW」の大会機能が2024年11月の何日かにリリースされました
https://x.com/SplatoonJP/status/1859431567569146319

個人が自由に大会を開催できて、任天堂のアプリから大会を作るとURLが発行され自由に募集をかけられます
私はこのサーモランが大好きなフロントエンドエンジニアです🐟

この大会を検索する機能がないので作ってみました
これです

その開発メモです
もっとこうしたほうがいいんじゃない?などあれば教えてください🙇

使ったもの

Nextjs
Vercel
Recoil
Jotai
GoogleForm
GoogleSheetAPI
GoogleAnalytics

サーバーを立てずにデプロイできるVercelを使いました

流れ

本当は任天堂のAPIが使えればそれを使いたかったけど、非公開なので人力でやっていきます

  • 大会主催者にGoogleFormから大会の情報を入力、登録してもらう
  • GoogleForm に GoogleSheetを紐付け、大会の情報を保存
  • Next.jsのサーバーサイド処理でGoogleSheetAPIを使い GoogleSheetのデータを取得し返すAPIを作成(IDやトークンが必要になるためフロントで行わない)
  • IDやGoogleSheetのIDなどはVercel側の環境変数に保存しておく
  • 作成したAPIを使ってGoogleSheetのデータを取得しアプリ側で使用

躓いた点

Next.js と Recoil

Next.jsとRecoilのバージョンの組み合わせが悪かったらしくuseRecoilStateするとエラーが発生、やむなくNext.jsのバージョンを下げる
続く

Next.js とVercel

上記で下げた Next.jsのバージョンと Vercelの組み合わせだとcacheが残りAPIで新しいデータが取得できないバグが発生
あげたらRecoilが使えなくなるどうしよう...

Jotai

状態管理はRecoilをやめてJotaiを使用するようにしました
Rootなどは不要、元々用意していたatomを少し変更するだけでほとんどそのまま使えました

おわりに

リリース時はたくさん登録されていたこのシステムも若干下火気味になってきました
もっと便利にして使ってもらえるように頑張りたいです🔥
今後の課題として、
GoogleSheetのデータが多くなった場合(そんなことあるのか?)の処理なども考えねば

それではみなさまマンメンミ🧑‍🚒

Discussion