30分で最初のアプリを作る方法

プログラミング未経験でも、30分でToDoアプリが作れます。一緒に作りましょう。

準備するもの

• Cursor（無料でOK）
• インターネット接続

タイムライン

時間	作業
0-5分	Cursorの準備
5-15分	アプリ生成
15-25分	機能追加
25-30分	動作確認

ステップ1: Cursorの準備（5分）

1.1 Cursorをダウンロード

1. cursor.comにアクセス
2. 「Download」をクリック
3. インストール

1.2 フォルダを作成

1. デスクトップに「my-todo-app」フォルダを作成
2. Cursorで開く（File → Open Folder）

ステップ2: アプリを生成（10分）

2.1 チャットを開く

Cmd + L（Mac）または Ctrl + L（Windows）

2.2 プロンプトを入力

以下をコピペ:

ToDoアプリを作ってください。

要件:
- タスクの追加（入力欄 + 追加ボタン）
- タスクの完了チェック
- タスクの削除
- モダンなデザイン

技術:
- HTML, CSS, JavaScript
- 1つのindex.htmlにまとめる

デザイン:
- 白背景、角丸のカード
- 青いアクセントカラー
- 影をつけて立体感を出す

2.3 生成を待つ

AIがコードを生成します。完了したら「Apply」をクリック。

2.4 ファイルを確認

index.htmlが作成されていることを確認。

ステップ3: 動作確認（5分）

3.1 ブラウザで開く

1. index.htmlを右クリック
2. 「Open with Live Server」を選択 （または直接ブラウザにドラッグ）

3.2 テスト

• タスクを追加してみる
• チェックボックスをクリック
• 削除ボタンをクリック

ステップ4: 機能追加（10分）

4.1 ダークモードを追加

チャットで:

ダークモードを追加して。
- 右上にトグルボタン
- ボタンで切り替え可能

4.2 データ永続化

チャットで:

タスクをローカルストレージに保存して。
ページをリロードしても消えないように。

4.3 アニメーション追加

チャットで:

タスク追加時にふわっと表示されるアニメーションを追加して。
削除時はフェードアウト。

完成！

30分でToDoアプリが完成しました。

作ったものの振り返り

• ✅ タスクの追加
• ✅ タスクの完了
• ✅ タスクの削除
• ✅ ダークモード
• ✅ データ永続化
• ✅ アニメーション

うまくいかない時は

エラーが出た場合

エラーメッセージをそのままチャットに貼り付け:

以下のエラーを修正して:
[エラーメッセージ]

思った通りにならない場合

具体的に指示:

ボタンの色を青(#3B82F6)に変えて

次のチャレンジ

30分アプリが作れたら、次に挑戦:

難易度	アプリ
★☆☆	カウンターアプリ
★★☆	メモ帳アプリ
★★☆	ポモドーロタイマー
★★★	天気予報アプリ

まとめ

• 30分でアプリが作れる
• AIに指示を出すだけ
• エラーもAIに直してもらう
• 慣れれば何でも作れる

次のステップ

• プロンプトの基本
• Cursor入門ガイド
• ToDoアプリの作り方（詳細版）