現在の見出し:6.5節：【Cursor×ChatGPT】Todoアプリをカスタマイズする方法
見出し一覧
✕
- 6.5節：【Cursor×ChatGPT】Todoアプリをカスタマイズする方法
- - ChatGPTに追加機能を提案してもらい、Todoアプリをカスタマイズする手順
【PR】『Python』を学べる企業・個人向けのプログラミングコース
ChatGPTに追加機能を提案してもらい、Todoアプリをカスタマイズする手順
はじめにCursorでどのような機能を作るか、ChatGPTにアイデアを出してもらいます。既に作りたい機能が決まている場合はスキップしてかまいません。
ここでのポイントですが、ChatGPTのチャットはTodoアプリの要件を作成したときと同じチャットを使ってください。同じチャットを使うことで、Todoアプリの要件に配慮した機能や要件を作成してくれます。
「ユニークな機能を提案してほしい。」と質問したところ、以下のような機能を提案してくれました。
| 🔔 リマインダー通知 | 締切1時間前や当日朝に通知。 Notification APIAPIは、他のソフトやアプリが自分の機能を利用できるようにするためのインターフェースです。 + setTimeout で簡易実装可。 さらに発展：Slack連携、LINE通知もできる。 |
|---|---|
| ⏱ ポモドーロタイマー連携 | タスクごとに「25分集中タイマー」を開始できる。 集中モードのUIUIはユーザーがデバイスやアプリケーションを操作するための画面やボタン、メニューなどインターフェース全般のことです。に切り替え。 終了後「このタスク、完了にしますか？」の自動提案。 |
| ✍️ 自然言語入力インターフェース | 例：「明日の15時にプレゼン準備、高優先度」。 自動でタイトル・締切・優先度を解析して登録（NLP + ルールベース）。 |
| 📈 週間進捗チャート | 完了タスク数を曜日別にグラフグラフはデータや情報を視覚的に表現したもので、様々な形式があり、情報を一目で理解しやすくするために使われます。表示。 ユーザーの「達成感」が爆上がり⤴️。 recharts や chart.js などでサクッと可視化。 |
| 😌 気分タグ | タスクを登録するときに「今の気分」もセット。 例：🔥やる気MAX / 😫やりたくない。 後から振り返って「どんな気分でどんなタスクこなしたか」がわかる。 |
| 🌗 タスクに「エネルギーコスト」設定 | 1～3でエネルギー量を設定（例：3＝重い仕事、1＝軽い作業）。 その日の自分の気力で、やるべきタスクを選びやすくなる。 “バッテリー低いとき用”フィルターが神。 |
今回はこの中から「気分タグ」を実装してみます。ではさっそくChatGPTに要件を作成してもらいましょう。
質問内容
以下の機能を追加してほしいのですが、Cursorにどのようなプロンプトで指示した方が良いですか？ 😌 気分タグ タスクを登録するときに「今の気分」もセット 例：🔥やる気MAX / 😫やりたくない 後から振り返って「どんな気分でどんなタスクこなしたか」がわかる
ChatGPTの回答
Todoアプリに「気分タグ」機能を追加してください。
【機能要件】
- タスクを追加するときに、「今の気分」を選べるようにしてください
- 気分タグは以下から選択：
- 🔥 やる気MAX
- 😊 普通
- 😫 やりたくない
- 😴 眠い
- 😡 イライラ
- タスクリストにも、各タスクの気分が視覚的に表示されるようにしてください（アイコン＋テキスト）
- 気分タグはローカルストレージにも保存され、ページリロード後も保持されるようにしてください
【UI要件】
- タスク追加フォームに「気分セレクト（ドロップダウンやボタン）」を追加
- タスクリストに気分タグを小さく表示（バッジ、またはアイコンと文字）
- Tailwind CSSCSSはWebページを装飾するスタイルシート言語です。で簡潔にスタイリングしてください
【追加で可能なら】
- 気分ごとのフィルター（例：今週やる気があったタスクを見返したい）もあると便利です
上記の要件をこれまでと同じく、Cursorのチャット欄へ入力します。
要件を入力・実行すると、その内容に応じたプラグインプラグインは既存ソフトウェアに機能を追加する拡張モジュールで、必要機能だけを選択的に追加でき、柔軟性と拡張性を向上させます。のインストールやコードを生成してくれます。
タグ機能の実装が完了したようなので、ターミナルを開いて「npm start」コマンドを実行します。実際にできたカスタマイズ版のTodoアプリは下記の通りです。
Todoアプリの機能は無事実装できました。
