はじめに
皆様、こんにちは。『ねむりのガチャ』アプリ開発記の第5回です。
前回までに、Firebaseによる安全なログイン機能と、Cloudflare D1による高速なデータベース（データの保管庫）が完成しました。今回はいよいよ、ユーザーが毎日直接触れることになる画面側（フロントエンド）の構築に進みます。
睡眠記録アプリにおいて、操作が複雑な画面は命取りです。眠い目をこすりながらでも迷わず操作できる、直感的でシンプルな「寝る・起きる」ボタンをReactとTailwind CSSを使ってどのように実装したのか、そのこだわりのポイントをご紹介します。
Tailwind CSSで作る「目に優しい」ダークテーマ
このアプリが最も使われるのは、「就寝直前の暗い部屋」と「起床直後のまぶしい朝」です。そのため、画面の背景が白くて明るすぎると、スマートフォンの光で目が冴えてしまい、肝心の睡眠を妨げてしまう恐れがありました。
そこで、UI（ユーザーインターフェース）のデザインは、深いネイビーや紫を基調とした「ダークテーマ」を標準とすることに決めました。
このスタイリングに大活躍したのが「Tailwind CSS」です。
従来のようにCSSファイルを別途作成してクラス名を考える必要がなく、HTML（ReactのJSX）のタグの中に直接 bg-slate-900（深い青の背景）や text-purple-300（薄い紫の文字色）といったクラスを記述するだけで、洗練されたデザインがサクサクと組み上がっていきます。直感的な色使いと余白の調整が圧倒的なスピードで行えるため、個人開発のフロントエンド構築には欠かせないツールです。
Reactのステート管理で実現する「睡眠タイマー」
画面の中央には、このアプリの主役である巨大なボタンを配置しました。このボタンは、ユーザーの状態（ステート）に応じて役割が変化します。
Reactの useState という機能を使って、現在の状態を管理します。
ユーザーが「寝る」ボタンをタップすると、システムは isSleeping（睡眠中かどうか）を true に切り替え、その瞬間の時刻を sleepStartTime として記録します。すると、画面上のボタンは自動的に「起きる」という表示に切り替わり、静かに時間の計測（タイマー）がスタートします。
そして翌朝、ユーザーが「起きる」ボタンをタップするとタイマーがストップします。システムは現在時刻と sleepStartTime を比較して「何時間寝たか」を計算し、その長さに応じた「睡眠ポイント」を算出する仕組みです。
迷わないUIこそが習慣化の鍵
今回の開発（MVP：最小限の製品）において、あえて複雑なグラフ表示や細かい睡眠分析機能は一切省きました。画面を開いて、大きなボタンを1回押すだけ。この「極限までのシンプルさ」こそが、毎日の習慣化を促す最大の武器になると考えたからです。
ボタンを押したときのアニメーションや、寝ている間に少しずつポイントが貯まっていく（ように見える）タイマー表示など、Reactだからこそ実装できるリッチなユーザー体験（UX）を詰め込みました。
まとめ
今回は、ReactとTailwind CSSを活用したフロントエンドの画面構築についてお話ししました。
複雑なセンサーを使わなくても、UIの工夫ひとつで「睡眠を記録する」という行為を心地よい体験に変えることができます。目に優しいダークテーマと、ワンタップで完結する操作性により、アプリの顔となるフロントエンドが完成しました。
しかし、このままでは画面上で計算されたポイントがブラウザを閉じると消えてしまいます。次回【第6回】では、このフロントエンドと前回作ったデータベース（D1）を繋ぐ架け橋、「APIの構築と連携」について解説します。
【編集後記】
UIデザインを考えていると、つい「あれもこれも」と機能ボタンを増やしたくなってしまいます。しかし、「ユーザーが寝る直前に見たい画面は何か？」と自問自答を繰り返し、削りに削って現在の大きなボタン1つのレイアウトにたどり着きました。
Tailwind CSSでの色選びは本当に楽しく、特に「夜の空」をイメージしたグラデーション背景が綺麗に表示されたときは、一人でパソコンの前でガッツポーズをしてしまいました。見た目が整うと、開発のモチベーションも一気に跳ね上がりますね！