はじめに
前回は『ねむりのガチャ』アプリの企画と、MVP(最小限の実行可能な製品)として手動ボタン方式を採用するまでの経緯をお話ししました。
設計図とコンセプトが固まれば、次はいよいよ「どんな技術を使って家(アプリ)を建てるか」を決めるステップに入ります。世の中には星の数ほどのプログラミング言語やサーバー環境が存在しますが、個人開発において最も重視すべきは「開発のスピード」と「保守の手軽さ」、そして何より「ランニングコスト」です。
第2回となる今回は、このアプリの心臓部となる技術スタックとして採用した「Cloudflare × Firebase」という最強の組み合わせについて、それぞれの選定理由を詳しく解説していきます。
フロントエンド:React + TypeScript
ユーザーが毎日直接触れる画面(フロントエンド)の開発には、世界中で最も採用されているUIライブラリである「React」と、それに型安全をもたらす「TypeScript」を採用しました。
今回のアプリは「寝る」「起きる」のボタン切り替えや、ポイントの増減、ガチャの演出、コレクションの表示など、画面上で状態(ステート)が目まぐるしく変化します。Reactの強力な状態管理とコンポーネント指向(UIを部品ごとに分けて作る考え方)は、こうしたインタラクティブなWebアプリの構築に非常に適しています。
また、TypeScriptを導入することで、「ポイントは必ず数値(Number)である」「ユーザー名は文字列(String)である」といったルールを厳密に定めることができます。これにより、開発中のつまらないバグを未然に防ぎ、コードの品質を担保することが可能になります。
バックエンド&データベース:Cloudflareの圧倒的パワー
裏側の処理(バックエンド)とデータの保存場所には、現在フロントエンド界隈で熱い注目を集めている「Cloudflare」のエコシステムをフル活用することにしました。
1. Cloudflare Pages (Functions)
アプリの公開先(ホスティング)とAPIサーバーには、Cloudflare Pagesを採用しました。通常のレンタルサーバー(WordPressなどを動かす環境)とは異なり、サーバーの構築や保守といった面倒な作業が一切不要です。GitHubなどのリポジトリと連携するだけで、コードをアップロード(デプロイ)すれば全世界にあるCloudflareのサーバーに即座に配信されます。さらに「Pages Functions」を使えば、APIなどのサーバー側の処理も同じプロジェクト内で簡単に構築できるのが魅力です。
2. Cloudflare D1
ユーザーの保有ポイントやガチャの履歴を保存するデータベースには、Cloudflare D1(エッジ環境で動くSQLite)を採用しました。従来、Webアプリにデータベースを組み込むのは設定が複雑でコストもかかりがちでしたが、D1ならコマンドライン(wrangler)から一瞬で作成でき、ローカル環境でのテストも極めて容易です。
何より、これらCloudflareのサービスは「無料枠が非常に大きい」ため、アクセスが爆発しない限りコストゼロで運用し続けられる点が個人開発者にとって最大の武器となります。
認証システム:Firebase Authentication
どんなWebアプリでも必ず壁となるのが「ログイン(認証)機能」です。パスワードの暗号化やセッション管理などを自作するのはセキュリティリスクが高く、開発工数も膨大になります。
そこで今回は、Googleが提供する「Firebase Authentication」を採用しました。これを使えば、わずか数行のコードを追加するだけで、安全性の高い「Googleアカウントでのログイン機能」をアプリに実装できます。ユーザーにとっても、新しくパスワードを覚える必要がなく、ワンタップで使い始められるため、アプリの離脱率を下げる効果も期待できます。
まとめ
今回は『ねむりのガチャ』アプリを支える技術スタックについて解説しました。
UIを効率よく作る「React + TypeScript」、保守ゼロで高速なサーバー&DB環境を提供する「Cloudflare Pages & D1」、そして安全で簡単なログインを実現する「Firebase Auth」。このモダンな技術の組み合わせにより、個人開発でもエンタープライズ(企業向け)レベルの堅牢なWebアプリケーションを爆速で構築する準備が整いました。
次回【第3回】では、この構成の要となる「Firebase Authを使ったGoogleログインの実装」について、実際の開発で直面したつまずきポイントを交えながら詳しくお届けします。
【編集後記】
数年前まで、個人でWebサービスを作ろうと思ったら、レンタルサーバーを契約して、Linuxのコマンドを叩いてデータベース(MySQLなど)をインストールして……と、プログラミングを始める前の「環境構築」だけで週末が終わってしまうことがザラにありました。
しかし現在、CloudflareやFirebaseのような「BaaS(Backend as a Service)」の進化により、私たち開発者は「インフラの管理」から解放され、「どんな面白いアプリを作るか」という本質的な開発作業に100%の時間を注げるようになりました。便利な時代になったものだと技術の進化に感動しつつ、次回はいよいよ実際のコードを書き始めるフェーズに突入します!