ToDo・タスク管理アプリ

作りながら基礎が全部学べる、アプリ開発の登竜門

Webアプリ・サイト 初級 ⏱ 目安 1〜2日

どんなもの?

タスクを追加・完了・削除できるToDoアプリ。シンプルながら、データの保存・一覧表示・状態の更新という、あらゆるアプリに共通する基礎がすべて詰まっています。「まず1つ完成させる」成功体験を得るのに最適な題材です。

こんな人におすすめ

初めて「動くアプリ」を作る人。プログラミング学習の第一歩に最適

🎯 完成すると手に入るもの

タスクを追加・完了・削除できる自分専用のToDoアプリが手に入ります。「まず1つ完成させて公開する」というプログラミングの成功体験を最短で得られます。

おすすめの技術スタック

最小構成で「作って公開する」を体験するのが目的。データ保存はSupabase、実装はCursorに任せ、Cloudflareで無料公開。この3つだけで、データベース付きのアプリが1日で公開できます。

費用の目安

✓ 完全無料で始められます

完全無料で作って公開できます。データ保存が不要なら、アカウントすらほぼ不要で始められる最も手軽なプロジェクトです。

項目費用補足
Bolt.new / Cursor無料プランでOK無料枠で作れます
Supabase(任意)無料枠でOKデータを保存する場合のみ
Cloudflare(公開先)無料個人利用は無料枠内
GitHub無料個人利用は無料

必要なアカウント

開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。

Cursor 必須 無料プランあり

AIに指示してコードを書いてもらうエディタ。開発の主役です。

登録ページを開く →
Supabase 必須 無料枠あり

データの保存とログイン機能をまとめて提供。アプリの裏側を担います。

登録ページを開く →
Cloudflare 必須 無料枠あり

作ったものを世界中に高速配信する公開先。無料枠が大きいのが魅力。

登録ページを開く →
GitHub 必須 無料

コードを保存し、公開先へ自動連携するための土台。開発の必需品です。

登録ページを開く →

必要なAPIキー・設定

APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。

Supabase URL と APIキー 取得先: Supabaseプロジェクトの設定画面 アプリからデータベースに接続するための情報。プロジェクト作成時に自動発行されます。

作り方: まずこのプロンプトをClaudeに送る

細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。

📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、ToDo・タスク管理アプリの作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。 【私の状況】 - プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。 - パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください - AIエディタ「Cursor」をインストール済みです。 - 必要な無料アカウント(このページに記載のもの)は作成済みです。 【作りたいもの】 - タスクを追加・完了チェック・削除できるシンプルなToDoアプリ。 - まずはデータベースなしの最小構成で「動くもの」を完成させたい。 - 完成したら、Supabaseにタスクを保存して、リロードしても消えないようにしたい(これは後のステップでOK)。 - 最終的にCloudflareで無料公開したい。 - 私は完全な初心者なので、最初の一本として達成感を得たいです。簡単なところから始めさせてください。 【進め方のお願い】 1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。 2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。 3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。 4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。 5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。 6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。 まずは【1】の全体像から教えてください。

※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。

つまずきやすいポイント

収益化のヒント

入門者向けの間口の広い題材。Cursor・Supabase等の基本ツール紹介が収益の入口です。

関連する作りたいもの

← 他の「作りたいもの」を見る