【第10回】デプロイと今後の展望編:ついに世界へ公開!そして「自動計測アプリ」への夢

はじめに
全10回にわたってお届けしてきた『ねむりのガチャ』アプリ開発記も、ついに今回が最終回です。
前回までに、美しいダークテーマのUI、魔法のように連携するCloudflareとFirebaseのバックエンド、ワクワクするガチャシステム、そして鉄壁のセキュリティがすべて完成しました。手元のパソコン(ローカル環境)では、一切の妥協なく完璧に動作しています。
今回は、完成したすべてのコードをインターネットの世界へ公開(デプロイ)する総仕上げの工程と、このMVP(手動ボタン版)の先に見据える「次なる野望」についてお話しします。

歓喜の最終デプロイ、そして世界へ
すべてのコードを書き終え、ターミナル(黒い画面)を開いて最後の最終確認を行います。
不要な初期ファイルが残っていないか、アイコンは適切に設定されているかを確認したら、いよいよ本番用の変換作業(ビルド)です。

ターミナルに npm run build と打ち込みます。
この数秒間で、私たちがこれまでに書いてきたReactのコンポーネントやTailwind CSSのスタイリングが解析され、最も効率よく動く極限まで圧縮されたファイル群として dist フォルダに出力されます。

準備はすべて整いました。構築してきたCloudflareへのデプロイパイプラインに、この完成形のデータを流し込みます。
ターミナルで npx wrangler pages deploy dist を実行します。

画面に次々とアップロードのログが流れ、最後に緑色の文字で本番URL(https://〇〇〇.pages.dev)が表示された瞬間……。あなたのパソコンの中だけで動いていた魔法の睡眠アプリが、正式に世界中のスマートフォンやパソコンからアクセスできる本物のWebサービスとして産声を上げました!

ぜひ、お手持ちのスマートフォンのWi-Fiを切り、4G/5G回線からそのURLにアクセスしてみてください。自分がゼロから組み上げたボタンが反応し、ポイントがチャリンと貯まり、ガチャが回る感動を、ぜひその手で味わってください。

MVPの完成、そして「ネイティブアプリ」への野望
今回、私たちはブラウザのバックグラウンド制限という技術的な壁を考慮し、あえて「手動で寝る・起きるボタンを押す」というMVP(最小限の実行可能な製品)の形でアプリを完成させました。
しかし、私の構想はこれで終わりません。次のフェーズ(バージョン2.0)では、スマートフォンのマイクによる寝息検知や、加速度センサーによる寝返り検知を活用した「全自動睡眠計測アプリ」への進化を目論んでいます。

Webブラウザの限界を超えるためには、アプリをiOSやAndroidのストアで配信する「ネイティブアプリ」にする必要があります。
素晴らしいことに、今回構築した「Cloudflare D1 + Pages Functions + Firebase」という強力なバックエンドは、そのまま全く変更せずに使い回すことができます!フロントエンド(画面側)だけを、同じReactの技術である「React Native (Expo)」で作り直せば、バックグラウンドでセンサーを動かし続ける本格的なヘルスケアアプリへと生まれ変わらせることができるのです。

連載を振り返って
「ただ寝るだけじゃつまらない」という小さなアイデアから始まり、最新の技術スタックを駆使して、ひとつのWebサービスを独力で完成させることができました。
「自分だけのサービスを作る」という経験は、プログラミングスキルを飛躍的に向上させるだけでなく、モノづくりの圧倒的な楽しさと達成感を教えてくれます。この連載が、これから個人開発を始めようとしている皆様の背中を押す、小さなきっかけになれば幸いです。

【編集後記】
全10回におよぶ開発ストーリーが、ついに本当の終わりを迎えました。
スマートフォンから自分の本番URLにアクセスし、自分で書いたコードの通りに美しいダークグラデーションが広がり、ガチャのカプセルがフワッと揺れた瞬間。その完璧な動作を見つめながら、静かにパソコンのディスプレイを閉じました。ゼロから作り上げたこの達成感は、何物にも代えがたい最高の報酬です。
さあ、今夜は完成したばかりの自作アプリで「寝る」ボタンを押し、明日の朝、はじめての本番ガチャを回すのを楽しみにしながら眠りにつきたいと思います!最後までご愛読いただき、本当にありがとうございました!