親の介護の合間に、未経験が「Backspace必須」の全国ランキング搭載の実践型タイピングゲームを作ってみた
はじめに
はじめまして。現在、親の介護（ALS）と並行しながら、エンジニアへの転職を目指して学習を続けている者です。
限られた時間の中で独自のこだわりを組み込んだタイピングゲーム『CRITICAL TYPING』を個人開発しました。
この記事では、未経験なりに技術的な意思決定のプロセスをまとめたので共有したいと思います。
🎮 作ったもの：CRITICAL TYPING
「正確性×継続性」を重視した、実戦的かつ爽快感のあるタイピングゲームです。
🔗 リンク
- App: https://typing-game-eta-lime.vercel.app/
- Repository: https://github.com/mori-3-desu/Typing-game
🔥 こだわりの仕様
間違えた文字は赤字で残り続け、自分で BackSpace を押して修正しない限り次の単語へ進めません。
気づかずに打ち続けると正解文字まで消すことになり、再度入力しないといけない手間をゲームで再現しました。
また、自分は音楽ゲームが好きなので音ゲー的な要素でコンボ機能を採用し、爽快感と緊張感を味わえる設計にしました。
正確性×継続性がスコアを伸ばす鍵となっており、速度だけだとスコアが出ないようになっております。(全部揃ってたら最強になりますが(笑))
🛠️ 使用技術 (Tech Stack)
技術選定の軸
「流行っているから」ではなく、「保守性」「安全性（型）」「開発効率」を最大化できる構成を自分なりに調べて選定しました。
| Category | Tech Stack |
|---|---|
| Frontend | React, TypeScript, Vite, CSS3 |
| Backend | Supabase (PostgreSQL) |
| Testing | Vitest |
| Deploy | Vercel |
💡 技術的な工夫と意思決定
開発中に、ノートへ書き留めていた「設計の意図」や「苦労した点」を深掘りします。
1. Vanilla JS から React への移行決断
開発当初は HTML/CSS/JavaScript のみで構築していましたが、機能を追加するにつれてDOM操作が複雑化し、コードの見通しが悪くなる「スパゲッティコード化」の兆候が見え始めました。
「Reactは生のJSより速いわけではない（むしろオーバーヘッドがある）」ことは理解していましたが、状態管理による保守性の向上と拡張性の確保を優先し、Reactへの移行を決断しました。
2. バックエンド構築のコスト削減とセキュリティ (Supabase)
ランキング機能を実装するにあたり、バックエンドを一から構築する工数を削減するため Supabase (BaaS) を採用しました。
特に意識したのは RLS (Row Level Security) の設定です。
他人のデータを勝手に書き換えられない設計にするため、DB側で行レベルのアクセス制御をかけました。
また、SupabaseはPostgreSQLベースであるため、データの型定義が厳格であり、ランキングデータの整合性を保ちやすい点も採用の決め手となりました。(あと、せっかくOSS-DB Silverを取得したのでPostgreSQLを勉強で使ってみたかった)
3. 設計原則の学び (DRY / YAGNI)
独学での開発ではありますが、学んだ設計原則です。今後のコード改善で意識していきたいです。
-
DRY (Don't Repeat Yourself):
- 同じコードやロジックを複数書かず、一箇所にまとめることでコードの保守性や可読性の向上が見込める
-
YAGNI (You Ain't Gonna Need It):
- 必要となる機能以外はやたらむやみに追加しない
- 複雑な設計になることを避け、コスト削減や保守性を高める
- スパゲッティコード化の防止
🕰️ 介護と開発の両立（タイムマネジメント）
親の介護という環境下では、まとまった開発時間を確保することが困難でした。
そこで、1日30分でもコードに触れたり思考の整理をする、機能単位で細かくタスクを分解するというアジャイル的な動きを徹底しました。(毎日開発日記をノートにまとめているので別の記事でお届けできたらと思います。)
手書きのノートに「今日やる機能」「解決すべきバグ」を書き出し、迷う時間を減らすことで、細切れの時間でも集中して開発を進めることができました。
また、介護の関係で時間がなかなか取れないときもあるので、効率化のためにAIをフル活用しましたが、ロジックの実装には一切妥協しませんでした。特に入力処理の実装はフル活用しても10日かかって疲れました(笑)
🚀 さいごに：エンジニアとしての姿勢
タイピングゲーム作成に当たって、AIを活用する代わりにReact×TypeScriptの選定理由、DBの整合性、セキュリティ、テストの重要性など、動くものの裏側にある技術的な根拠を徹底的に調べ、実装に落とし込んできました。
プログラミングの学習は果てしないですがそこが楽しくて毎日少しでも技術や情報の基礎を学んでおります。
ですが、独学で到達できる場所には限界があることも痛感しています。
実際に実務を経験しないと学べないこともたくさんあると思っております。
ゲームは動いていますが、コードの保守性は高くないと自覚しております。
実務で通用する高品質なコードが書けるよう、これからも自己研鑽していきAIに頼らずともコードが書けたり、設計思想を的確に説明できるエンジニアになりたいと思っております。
また少しずつ、将来機能を追加したりバグ修正する際にコードの保守性を高められるよう改善していき、これからもこのタイピングゲームを運営していきます。
もしよろしければ、GitHubのリポジトリを覗いていただき、アドバイスをいただけると泣いて喜びます！
Github: https://github.com/mori-3-desu/Typing-game
Special Thanks & Credits
開発にあたり、素晴らしい素材をお借りしました。
- BGM: しゃろう様, kyatto様
- SE: 効果音ラボ様, 魔王魂様, Springin'様