タスクリマインダー - Task Reminder

初級〜中級エンジニア向けの学習テンプレートとして設計されたタスク管理アプリです。 Next.js（App Router + Server Actions）と Mantine UI を活用し、シンプルかつモダンな UI・構造を備えています。

概要

本プロジェクトは、期日管理とリマインダー機能を備えたタスク管理アプリです。 過剰な技術を使用せず、学習効果が高い構成を目指しています。

プロジェクト全体を基に開発を進めていただいても、必要な部分のみを抜粋してご利用いただいても構いません。

技術スタック

• Framework: Next.js 16 (App Router・Server Actions)
• UI Library: Mantine UI 7
• Language: TypeScript 5
• Date Handling: dayjs
• Animation: framer-motion
• Icons: Tabler Icons React
• Storage: localStorage

主な機能

基本機能

• タスクの追加・編集・削除
• タスクの完了/未完了チェック
• 背景色設定

期日管理

• タスクに期日を設定可能
• 今日 / 今週末 ショートカット
• 期日のバッジ表示（今日 / 今週末 / 期限切れ / 未設定）

フィルタリング・ソート

• すべて / 今日 / 今週末 / 期限切れ でフィルタリング
• 期日順 / 作成日順 / タイトル順 でソート

設定画面

• 期日間近のタスクの強調表示: 期日が近いタスクを強調表示するかどうかを切り替え可能
  • 強調表示する場合、何日前から強調するかを1〜10日の中から選択可能
• 期限切れタスクの強調表示: 期日が過ぎたタスクを強調表示するかどうかを切り替え可能

アーキテクチャ

本プロジェクトは、関心の分離を意識した3層構造を採用しています。

フォルダ構成

src/
  actions/              # ロジック層: Server Actionsによるバリデーションとサーバー側処理
    taskActions.ts
  app/                  # UI層: Next.js App Routerによる画面単位のルーティング
    layout.tsx          # 共通レイアウト、styles/globals.cssを読み込む
    page.tsx            # トップページ（一覧）
    settings/
      page.tsx          # 設定ページ
    task/
      [id]/
        page.tsx        # 詳細ページ（編集・削除）
  components/           # UI層: 再利用可能なUIコンポーネント
    TaskForm.tsx        # タスク入力フォーム
    TaskItem.tsx        # タスクアイテム表示
  lib/                  # ロジック層: データ操作（CRUD）とユーティリティ関数
    localStorage.ts     # データ層: localStorage操作（タスクのCRUD、設定の保存・取得）
    types.ts            # TypeScript型定義（Task、Settings、FilterType等）
  styles/               # プロジェクト共通のグローバルスタイル
    globals.css

セットアップ

npm install
npm run dev

開発サーバーはデフォルトで http://localhost:3000 で起動します。ポートを変更する場合は npm run dev -- -p 3100 のように指定できます。

スクリプト

コマンド	説明
npm run dev	開発サーバー起動
npm run build	本番ビルド
npm run start	本番サーバー実行
npm run lint	ESLint 実行

拡張ポイント

localStorage

• すぐに実行できる環境を提供するため、localStorageを使用しています
• lib/localStorage.tsの実装をデータベース（Supabase、Prisma等）に置き換えることで、DB化することが可能です