Rork で作る睡眠トラッカーアプリ完全チュートリアル — 就寝・起床時刻の記録から睡眠スコア分析まで

睡眠トラッカーアプリを作ろう — Rork で健康管理アプリ開発入門

「毎日何時間寝ているか把握したい」「睡眠の質を記録してパターンを分析したい」そんなニーズは多くの人に共通しています。ヘルスケアアプリの中でも睡眠トラッカーは根強い人気を誇り、App Store でも常に上位カテゴリの一つです。

本チュートリアルでは、AI アプリ開発ツール Rork を使って、就寝・起床時刻を記録し、睡眠スコアを計算・表示する本格的な睡眠トラッカーアプリを開発します。Rork へのプロンプトを段階的に示すので、プログラミング未経験の方でも手順通りに進めれば動くアプリが完成します。

このチュートリアルで作るアプリの主な機能は以下の通りです。

就寝時刻・起床時刻をワンタップで記録
睡眠時間を自動計算して睡眠スコアを表示
過去7日間の睡眠ログを一覧表示
AsyncStorage を使ったローカルデータ保存（オフライン対応）
シンプルで直感的なダークテーマUI

Step 1: プロジェクト作成と初期プロンプト

Rork を開いて新しいプロジェクトを作成します。プロジェクト名は「SleepTracker」など分かりやすい名前にしましょう。

最初のプロンプトとして次のように入力します。

睡眠トラッカーアプリを作ってください。

機能:
- ホーム画面に「就寝する」「起床する」ボタンを配置
- ボタンを押したら現在時刻を記録
- 起床ボタンを押すと睡眠時間（時間・分）を計算して表示
- 睡眠スコア（推奨7〜9時間を100点満点で換算）を表示
- AsyncStorage で記録を永続化
- ダークテーマのシンプルなUI

スタイル: ミニマルでモダン、背景色 #1a1a2e、アクセントカラー #7c3aed

Rork がコードを生成したら、プレビューで動作確認します。就寝・起床ボタンが表示されれば Step 1 は完了です。

Step 2: 睡眠ログ一覧画面の追加

ホーム画面だけでなく、過去の記録を確認できる画面を追加します。次のプロンプトを入力します。

睡眠ログ一覧画面（HistoryScreen）を追加してください。

要件:
- 下部タブナビゲーションで「ホーム」「履歴」「分析」の3タブ
- 履歴タブでは AsyncStorage に保存された睡眠ログを日付の新しい順に表示
- 各ログに: 日付、就寝時刻、起床時刻、睡眠時間、スコアを表示
- スコアが8時間以上なら緑、6〜8時間なら黄色、6時間未満なら赤でハイライト
- スワイプで削除機能を追加

このプロンプトで睡眠ログ一覧が追加されます。色分けによる視覚的なフィードバックが、ユーザーの健康意識向上に役立ちます。

Step 3: 睡眠スコアのロジック実装

睡眠スコアの計算ロジックを詳細に実装します。単純な睡眠時間だけでなく、就寝時刻も考慮したスコアリングにするとアプリの価値が上がります。

睡眠スコアの計算をより詳細にしてください。

スコア計算ルール:
- 基本スコア: 7〜9時間=100点、6〜7時間=80点、9〜10時間=80点（寝過ぎ）、
  5〜6時間=60点、4〜5時間=40点、4時間未満=20点
- 就寝時刻ボーナス: 22:00〜24:00に就寝→+10点、24:00〜1:00→+5点、1:00以降→-10点
- 最終スコアは0〜100点に正規化
- ホーム画面に円グラフ（Animated.View で実装）でスコアを表示
- スコアに応じたコメント表示（例: 90点以上→「素晴らしい睡眠です！」）

コードを確認します。スコア計算の核心部分は次のような形になります。

// 睡眠スコア計算関数
const calculateSleepScore = (bedTime, wakeTime) => {
  // 睡眠時間を計算（分単位）
  const sleepMinutes = calculateSleepDuration(bedTime, wakeTime);
  const sleepHours = sleepMinutes / 60;
 
  // 基本スコア（睡眠時間ベース）
  let baseScore = 0;
  if (sleepHours >= 7 && sleepHours <= 9) {
    baseScore = 100;
  } else if ((sleepHours >= 6 && sleepHours < 7) || (sleepHours > 9 && sleepHours <= 10)) {
    baseScore = 80;
  } else if (sleepHours >= 5 && sleepHours < 6) {
    baseScore = 60;
  } else if (sleepHours >= 4 && sleepHours < 5) {
    baseScore = 40;
  } else {
    baseScore = 20;
  }
 
  // 就寝時刻ボーナス
  const bedHour = new Date(bedTime).getHours();
  let timeBonus = 0;
  if (bedHour >= 22 && bedHour <= 23) {
    timeBonus = 10;    // ゴールデンタイム
  } else if (bedHour === 0) {
    timeBonus = 5;     // やや遅め
  } else if (bedHour >= 1 && bedHour <= 3) {
    timeBonus = -10;   // 深夜帯
  }
 
  // 最終スコア（0〜100で正規化）
  return Math.min(100, Math.max(0, baseScore + timeBonus));
};
 
// 期待する出力例:
// 22:30就寝 → 7:00起床（8.5時間）→ スコア: 100点
// 1:00就寝  → 7:00起床（6時間）  → スコア: 65点
// 23:00就寝 → 6:00起床（7時間）  → スコア: 100点

Step 4: 週間サマリー分析画面の実装

「分析」タブに週間の睡眠データをまとめたサマリー画面を追加します。

分析タブに週間睡眠サマリーを追加してください。

表示内容:
- 今週の平均睡眠時間
- 今週の平均睡眠スコア
- 最も睡眠が良かった日・悪かった日
- 過去7日間の棒グラフ（react-native-chart-kit または Animated で実装）
- 「あなたの睡眠傾向」コメント（例: 「平日の睡眠が短い傾向があります」）

週間データの可視化により、ユーザーは自分の睡眠パターンを客観的に把握できるようになります。データドリブンな健康管理はユーザーのエンゲージメントを高める上で非常に効果的です。

Step 5: アラームとリマインダー機能

睡眠トラッカーをより実用的にするため、就寝リマインダー通知を追加します。

就寝リマインダー通知を追加してください。

要件:
- 設定画面でリマインダー時刻を設定できる（デフォルト: 23:00）
- expo-notifications を使って毎晩指定時刻にプッシュ通知
- 通知文: 「そろそろ就寝の時間です。今夜も良い睡眠を 🌙」
- 通知を受け取ったら就寝ボタンへのディープリンクで直接記録できる
- 通知の ON/OFF 切り替えスイッチを設定画面に追加

プッシュ通知の実装について詳しくは、Rork でプッシュ通知を実装する完全ガイドも参考にしてください。

Step 6: データのエクスポートと共有機能

記録した睡眠データを CSV でエクスポートしたり、SNS でシェアする機能を追加します。

データエクスポートと共有機能を追加してください。

- 設定画面に「データをエクスポート」ボタンを追加
- 全睡眠ログを CSV 形式で生成して Share API で共有
- 週間レポートをテキスト形式で生成（例: 「今週の平均睡眠: 7.2時間 / 平均スコア: 82点」）
- Instagram Stories 向けに睡眠スコアカードを画像として生成する機能（react-native-view-shot を使用）

全体を振り返って

本チュートリアルでは、Rork を使って睡眠トラッカーアプリを段階的に構築しました。完成したアプリには以下の機能が含まれています。

就寝・起床時刻のワンタップ記録
睡眠スコアの計算と可視化
過去の睡眠ログ一覧（色分け表示）
週間サマリーと傾向分析
就寝リマインダー通知
データエクスポート機能

Rork の強みは、日本語のプロンプトだけでこれだけの機能を持つアプリを数時間で作れる点にあります。睡眠トラッカーで得た経験を活かして、次は体重記録・食事管理・運動ログなど他のヘルスケア機能を追加して、より本格的な健康管理アプリへと発展させてみてください。

さらに HealthKit 連携や Apple Watch 対応など、ネイティブ iOS の高度な機能を実装したい方には、Rork Max で作る本格フィットネストラッカーで詳しいアーキテクチャ設計と実装手法を解説しています。

健康管理アプリの開発を通じて、一人でも多くの方が良質な睡眠を意識するきっかけになれば嬉しいです。開発を楽しんでいただければ幸いです！