カレンダー・予定管理アプリ

どんなもの?

予定を登録・編集・削除して、月表示や週表示で見られるカレンダーアプリ。ユーザーごとにデータを保存する仕組み(データベースとログイン)が必要になるため、Webアプリ開発の基礎がひと通り身につきます。

おすすめの技術スタック

カレンダーは「ユーザーごとのデータ保存」と「ログイン」が核。この2つをまとめて提供してくれるSupabaseを使えば、面倒な裏側の実装を大幅に省けます。フロントはNext.js、ホスティングはVercelが定番の組み合わせです。

Cursor

アプリを書くAIエディタ

カレンダーUIの実装もAIに任せられる

詳しく →

Supabase ★ 106.0k

予定データの保存 + ログイン機能

無料枠で十分。RLSで「自分の予定だけ見える」を実現

詳しく →

Next.js SaaS Starter ★ 16.0k

ログイン付きアプリの雛形

認証・DBが最初から組み込み済み

詳しく →

Vercel

アプリの公開先

Next.jsと最も相性が良い

詳しく →

作り方のステップ

1. データの設計から始める 「予定(タイトル・日時・メモ)を保存するテーブルをSupabaseに作りたい」とCursorに相談。AIがSQLまで書いてくれます。
2. カレンダー表示を作る 「月表示のカレンダーを作って、予定がある日にマークを付けて」と指示。ライブラリの選定もAIに任せられます。
3. ログインを付ける Supabaseの認証機能で、メールログインを追加。ユーザーごとに自分の予定だけ見えるようRLS(行レベルセキュリティ)を設定します。
4. 公開する Vercelにデプロイして完成。スマホのブラウザからも使えます。