💰 おてつだい給料

💰 おてつだい給料アプリとは

子どもたちが日々のタスク(お手伝い・勉強・運動など)を達成してポイントを貯め、 2週間サイクルで「お給料」として受け取れるアプリです。 タスクの完了状況に応じて達成率が計算され、基本給料と連動します。

📖 使い方

利用者(子ども)

  1. ホーム画面で自分のアイコンをタップ
  2. 今日のタスク一覧が表示される
  3. タスクを完了したら ⬜ をタップして ✅ にする
  4. 自分だけのタスクも追加できる(当日限定、デフォルト1pt)
  5. 「履歴」で日ごとの達成状況と累計ポイントを確認

管理者(保護者)

  1. /admin にアクセスしてダッシュボードを表示
  2. タスク管理: タスクの追加・編集・削除、ポイント数の変更
  3. ユーザー管理: 利用者の追加・削除、基本給料・ボーナス率の設定
  4. 目標設定: 月間・年間の目標を各カテゴリごとに設定
  5. ボーナス: 2週間〜1年単位の達成ボーナス、3ヶ月ごとのボーナス設定
  6. 過去記録の編集: ユーザー詳細から過去のタスク完了状況を修正可能

🔄 2週間サイクル

このアプリは2週間(14日間)を1サイクルとして運用します。

  • サイクル開始日は金曜日
  • サイクル終了時に達成率と給料が確定
  • 達成率100%超で「オーバーアチーブボーナス」が発生
  • 管理者が「次のサイクルへ」ボタンで更新
  • 過去の記録は1年間保持

💵 給料の計算方法

基本給料 = 管理者が設定した金額

実際の給料 = 基本給料 × 達成率

ボーナス = (達成率 - 100%) × 基本給料 × ボーナス率

例: 基本給 ¥1,000、達成率 120%、ボーナス率 10% の場合
→ 給料 ¥1,200 + ボーナス ¥20 = 合計 ¥1,220

📂 カテゴリ

📚
勉強
宿題、読書、英語など
🏠
家のこと
掃除、食器洗い、洗濯など
部活
部活の練習、自主トレなど
🎵
習い事
習い事の練習・宿題
🎨
趣味
創作活動、趣味の時間
🧠
メンタル
日記、家族との会話
💪
ボディ
ストレッチ、外遊び

🛠 技術スタック

フレームワークHono (JSX SSR)
ランタイムCloudflare Workers
ホスティングCloudflare Pages
データベースCloudflare D1 (SQLite)
言語TypeScript
スタイリングCSS (カスタム、フレームワーク不使用)
デプロイGitHub → Cloudflare Pages (自動)

🏗 アーキテクチャ

┌─────────────────────────────────────────────┐
│                  ブラウザ                      │
│  ┌──────────────┐  ┌───────────────────┐     │
│  │  利用者画面    │  │   管理者画面        │     │
│  │  /            │  │   /admin           │     │
│  │  /user/:id    │  │   /admin/tasks     │     │
│  │  /user/:id/   │  │   /admin/users     │     │
│  │   history     │  │   /admin/goals     │     │
│  │  /about       │  │   /admin/bonuses   │     │
│  └──────┬───────┘  └────────┬──────────┘     │
│         │    HTML Form POST  │                 │
└─────────┼───────────────────┼─────────────────┘
          │                   │
          ▼                   ▼
┌─────────────────────────────────────────────┐
│        Cloudflare Workers (Hono)             │
│  ┌─────────────────────────────────────┐     │
│  │  routes/public.tsx  (利用者ルート)    │     │
│  │  routes/admin.tsx   (管理者ルート)    │     │
│  │  routes/api.ts      (APIルート)      │     │
│  │  routes/about.tsx   (説明ページ)     │     │
│  └──────────────┬──────────────────────┘     │
│                 │                             │
│  ┌──────────────▼──────────────────────┐     │
│  │  lib/db.ts  (データベース操作)        │     │
│  └──────────────┬──────────────────────┘     │
└─────────────────┼─────────────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────────┐
│          Cloudflare D1 (SQLite)              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐     │
│  │  users   │ │  tasks   │ │  cycles  │     │
│  ├──────────┤ ├──────────┤ ├──────────┤     │
│  │completions│ │daily_tasks│ │  goals  │     │
│  ├──────────┤ ├──────────┤ ├──────────┤     │
│  │  results │ │ bonuses  │ │quarterly │     │
│  └──────────┘ └──────────┘ └──────────┘     │
└─────────────────────────────────────────────┘
            

📁 プロジェクト構成

task-family/
├── functions/
│   └── [[path]].ts      # Cloudflare Pages エントリ
├── src/
│   ├── index.tsx         # Hono アプリ定義
│   ├── types.ts          # 型定義・定数
│   ├── components/
│   │   └── Layout.tsx    # レイアウトコンポーネント
│   ├── lib/
│   │   ├── db.ts         # D1 データベース操作
│   │   └── utils.ts      # ユーティリティ関数
│   └── routes/
│       ├── public.tsx    # 利用者ルート
│       ├── admin.tsx     # 管理者ルート
│       ├── api.ts        # API エンドポイント
│       └── about.tsx     # このアプリについて
├── schema.sql            # DB スキーマ
├── seed.sql              # 初期データ
├── package.json
├── tsconfig.json
└── wrangler.toml