和歌山発！Next.js × Supabase で万葉集タイピングゲームを作ってみた！目指せ伝説の６鶴(6000点)！

はじめに

はじめまして、Ryusei Tagashira(@nanimiru)です。
Next.js × Supabase × vercel でおしゃれなタイピングゲームを爆速でデプロイしました。

まずはプレイしてみてください！

プレイ動画：

Next.js × Supabase × vercelで万葉集を題材にしたタイピングゲームを爆速でデプロイしました。
ぜひ、プレーしてみてください！https://t.co/dyYmdxHEk9 pic.twitter.com/u2vnZH0A7Q

— なにみる (@nanimiru_jp) February 10, 2025

制作した経緯

和歌山に活動拠点を持つわたしは、和歌山にゆかりのある「万葉集」を題材にしたタイピングゲームを作ることで、地方の若者にプログラミングやパソコン操作に興味を持ってもらいたいと思い立ちました。

ただし、よくある古臭いタイピングゲームにはしたくなく、新しい技術スタックを活用して、アニメーションやサウンドなどの演出にもこだわりました。

ゆくゆくは和歌山市内の学校教育で活用されることを目標とし、一緒に開発するワークショップも企画したいと考えています！

タイピングゲームの内容について

万葉集を題材にしたタイピングゲームで、60秒間の制限時間内でスコアを競います！

ポイント

• 連続タイプで秒数が追加！

• オレンジ色のゲージが溜まると、制限時間が延長されます

• 1000点ごとに「鶴」が飛ぶ演出

• 最大6羽の鶴を飛ばせますが、筆者も未だ達成できず！（笑）
  

ランキング機能

• ベストスコアを記録して、他のユーザーと競いましょう！
  

いいスコアが出たときは、ランキングへの登録をお忘れなく！

技術スタック

• Next.js App Router
  • 柔軟なページ管理とサーバーサイドレンダリングでパフォーマンスを確保
• TypeScript
  • 型安全を確保し、開発の生産性とメンテナンス性を向上
• Tailwind CSS
  • シンプルで直感的なスタイリングを実現
• Supabase（データベース）
  • ユーザー情報やランキングデータの保存に使用。リアルタイムなデータ処理が便利
• Vercel（デプロイ）
  • 簡単かつ高速にデプロイし、無料プランでも高パフォーマンスを実現

なるべくシンプルでミニマルな構成を意識しつつ、パフォーマンスは落とさない構成を目指しました。

終わりに

今回は、Next.js × Supabase を使って和歌山の万葉集を題材にしたタイピングゲームを作成した話をご紹介しました。

ぜひ、最高スコアを目指してプレイしてみてください！6羽の鶴を飛ばせる猛者は現れるのでしょうか…？

また授業などでご活用いただける学校関係者の方がいらっしゃいましたら、学内用ランキング（学級クラス別など）を用意いたしますので [e-mail] までご連絡いただけますと幸いです。