ToDoリストが欲しいなと思ったんですよ
フリーなものがいろいろありますが、どうせなら自分好みのものを作ろうって気になったのですよ
ログインが面倒だったり、何かのおまけ的な扱いであったり、アプリを立ち上げなきゃいけなかったり、ちょっと面倒だなって
そんな時、こういうの「Google AI Studio」でサクッと作れるんですよ
凝ったものでなければね！
まず、第1ターン
デイリーでやらなきゃいけないことのToDo表作れる？
デイリーToDoアプリを作成しました。毎日の習慣やタスクを簡単に管理できる、シンプルで使いやすいデザインに仕上げています。
主な機能
タスク管理: 毎日のタスクを追加・削除できます。
進捗表示: 今日の達成状況をプログレスバーとカウントで視覚的に確認できます。
リセット機能: 右上のリセットボタンから、すべてのタスクを未完了に戻して新しい一日を始められます。
自動保存: 入力したタスクはブラウザのローカルストレージに保存されるため、ページを閉じても消えません。
アニメーション: タスクの完了や追加時にスムーズなアニメーション（Motion）を採用しています。
初期設定として「朝のストレッチ」などのサンプルタスクを入れていますので、自由に変更して使ってみてください。
項目にチャック入れると、その項目がグレーになる簡易的なデイリーToDo完成
自分の管理したい項目を整理して
第2ターン
X 投稿
アカウント 4アカウント 5投稿
note 記事投稿
Aサイト
ブログ投稿
Bサイト
ブログ投稿
suno 作曲 ブログ投稿
今思い浮かぶことかいたよ
ご要望に合わせて、具体的なタスクリストを初期設定として組み込みました。
アップデート内容
タスクの初期設定:
X 投稿 (4アカウント 各5投稿)
note 記事投稿
Aサイト ブログ投稿
Bサイト ブログ投稿
Bサイト suno 作曲 & ブログ投稿
カウント機能の追加:
Xの投稿など、複数回行う必要があるタスクのために「カウント機能（＋/ーボタン）」を追加しました。
20回（4アカウント×5投稿）に設定しており、カウントが満了すると自動的にチェックが入ります。
UIの最適化:
カウントボタンを追加し、進捗をより細かく管理できるようにしました。
これで、日々のルーティンがより管理しやすくなるはずです！他にも調整したい点があれば教えてください。
第3ターン
あれ、こちらから何かするターン？
はい、実装は完了しています！
画面右側のプレビューで、実際にアプリを触っていただける状態です。
以下の機能を盛り込んでいます：
1.ご指定のタスクを初期設定: X、note、Aサイト、Bサイトのタスクが最初から入っています。
2.X投稿のカウント機能: 「4アカウント×5投稿＝計20投稿」を管理できるよう、＋/ーボタンでカウントできるようにしました。
3.自動保存: ブラウザを閉じても、チェック状態や追加したタスクは保持されます。
もし「ここをもっとこうしたい」「別の機能も欲しい」といったご要望があれば、いつでも教えてください！特になければ、このまま日々のタスク管理にお使いいただけます。
第4ターン
見えているのは初期の提案のままですよ
失礼いたしました！ブラウザの保存機能（キャッシュ）が働いて、古いサンプルが表示されたままになっていたようです。
修正を行い、強制的に新しいタスクリストが表示されるようにしました。
変更点
・タスクリストの強制更新: ご指定いただいた「X、note、Aサイト、Bサイト」のリストが確実に表示されるように調整しました。
・「初期設定に戻す」ボタンの追加: 右上のアイコン（左側）をクリックすると、いつでもこのリストに戻せるようにしました。
・「進捗リセット」ボタン: 右上のアイコン（右側）で、タスクの内容は変えずにチェック状態だけをリセットできます。
プレビュー画面を一度ご確認ください。今度はご要望通りのタスクが表示されているはずです！
だいぶ形になってきたなぁ
一旦、項目名を直すか
第5ターン
あなたの街のIT屋さん ブログ投稿
YLIT ブログ投稿
YLIT suno 作曲 & ブログ投稿
X
・あなたの街のIT屋さん
・YLIT
・星野遥
・みかみん
切り分けよう
各アカウントやサイトごとにタスクを切り分け、より詳細に管理できるようにアップデートしました。
新しいタスクリスト
1.あなたの街のIT屋さん: ブログ投稿
2.YLIT: ブログ投稿
3.YLIT: suno 作曲 & ブログ投稿
4.X 投稿 (5投稿ずつ):
・あなたの街のIT屋さん
・YLIT
・星野遥
・みかみん
機能のポイント
・アカウント別のカウント: Xの投稿はアカウントごとに「0/5」のカウントボタンを付けました。5回クリックすると自動でェックが入ります。
・独立した管理: 各サイトのブログ投稿も個別にチェックできるため、進捗がより明確になります。
プレビュー画面で新しいリストが表示されているかご確認ください。もし以前のリストが残っている場合は、右上の「初期設定に戻す（左側のアイコン）」をクリックしてください。
どれくらい完了しているか、バーつけたいなぁ
第6ターン
進捗をバーで表示できない？
進捗を視覚的に確認できるよう、プログレスバーを強化しました。
アップデート内容
・全体進捗バーの強化:
・画面上部の進捗バーを太くし、グラデーション（青〜紫）を付けてより見やすくしました。
・進捗率は、単なるタスクの完了数ではなく、Xの投稿数（0/5など）も加味した正確な達成率で計算されます。
・タスクごとの進捗バー:
・Xの投稿など、複数回のカウントが必要なタスクには、タスク名の下に小さな進捗バーを表示するようにしました。
・あとどれくらいでそのタスクが終わるかが一目でわかります。
これで、一日の作業がどれくらい進んでいるか、より直感的に把握できるようになりました！ぜひ触ってみてください。
なかなかいいぞ
伝えなきゃいけない要件を言っておこう
第7ターン
今あるタスクは毎日必ず表示するようにしてください
リセットのタイミングは日本時間の0時でお願いします
これ、ローカルで動かせる段階になってる？
ご要望の「日本時間 0時での自動リセット」を実装しました！
アップデート内容
・日本時間 0時の自動リセット:
・ブラウザを開いた際、または開いたまま 0時を過ぎた際に、自動的にすべてのタスクのチェックとカウントがリセットされます。
・タイムゾーンを Asia/Tokyo に固定しているため、海外にいても日本時間の 0時でリセットされます。
・タスクの永続化:
・現在設定されているタスクリストは、リセットされても消えることはありません。毎日同じリストが表示されます。
ローカルで動かせる段階になってる？
はい、すでにローカルで動かせる完成した状態です。
このアプリは標準的な Vite + React + TypeScript で構成されています。ご自身のPCで動かす場合は、以下の手順で実行できます：
1.ソースコードをダウンロード:
・右上のメニュー（設定アイコンなど）から「ZIPでエクスポート」または「GitHubにエクスポート」を選択してコードを取得します。
2.依存関係のインストール:
・ターミナルで解凍したフォルダに移動し、npm install を実行します。
3.アプリの起動:
・npm run dev を実行すると、ローカル環境（通常は http://localhost:3000）でアプリが立ち上がります。
現在のプレビュー画面でもすべての機能（保存やリセットなど）が動作しますので、まずはここで使い勝手を試してみてください！
今日は期首の4月1日なので、一年間データ取ってみたら面白そう
第8ターン
今日から4月でキリが良いので、日々のタスク完了率（100％で緑、0％で赤、その間はグラデーション）を月間カレンダーで表示できるページを追加できませんか？
月別達成率、トータル達成率とか、そんなのも表示出来たら続けられそう
4月からのスタートに合わせて、「達成レポート（カレンダー表示）」機能を追加しました！
新機能：達成レポート
画面右上のグラフアイコン（BarChart）をクリックすると、レポート画面に切り替わります。
1.月間カレンダー:
・各日の達成率に応じて、色が自動で変わります（0%：赤 〜 50%：黄 〜 100%：緑）。
・日付をホバー（スマホならタップ）すると、その日の正確な達成率が表示されます。
2.達成率の統計:
・今月の平均: 4月（表示中の月）の平均達成率を表示します。
・トータル平均: アプリを使い始めてからの全期間の平均達成率を表示します。
3.リアルタイム連動:
・今日のToDoをチェックしたりカウントを増やしたりすると、カレンダーの「今日」の色もリアルタイムで変化します。
データの保存について
・毎日の進捗データは自動的に履歴として保存されます。
・日本時間の0時になると、その日の最終結果が履歴に確定され、ToDoリストがリセットされます。
これで、日々の頑張りが色として積み重なっていくのが見えるようになります。100%（緑色）を目指して、4月も楽しく続けていきましょう！
素晴らしい完成度！
思わず
第9ターン
めっちゃいいじゃん！
売れそうｗ
ありがとうございます！そう言っていただけると嬉しいです！
4月1日という最高のタイミングで、「続けたくなるToDoアプリ」が完成しましたね。
最後にコードの細かいエラー（TypeScriptの警告）もすべて修正し、中身も外見もピカピカの状態に仕上げました。
このアプリの「売り」ポイント
・日本時間 0時リセット: 毎日新しい気持ちでスタート。
・ヒートマップカレンダー: 頑張りが「色」として見える化。
・カウント機能: 複数回の投稿作業も漏らさず管理。
・モダンなデザイン: 触っていて心地よいアニメーション。
今日からぜひ、このアプリと一緒に4月のスタートを切ってみてください！
もし使っていく中で「ここをこう変えたい」というアイデアが浮かんだら、いつでもお声がけくださいね。応援しています！
ローカル環境で動くように、npmインストールしたりして4月1日より使い始める
4月2日
昨日の達成率は25%だった
Xでの投稿を各アカウント5件にしたのはちょっと辛いな
自分で投稿数変えたいなぁ
コード入れ替えて初期化されるのも嫌なので、その辺のことを相談してみる
第10ターン
Xのところ、投稿数を 5から違う数字にするにはどこの引数をいじればいいとかありますか？
出来上がって動かしているものを小変更したい。
ご自身で調整されたいとのこと、素晴らしいですね！
修正が必要な箇所は、src/App.tsx ファイル内の 2箇所 です。
以下の maxCount という数字と、表示用のテキスト (5投稿) を書き換えるだけでOKです。
1. 初期表示の設定（35行目付近）
アプリを初めて開いた時や、新しい日のリセット時に使われる設定です。
// src/App.tsx
// ...
return [
{ id: '1', text: 'あなたの街のIT屋さん ブログ投稿', completed: false },
{ id: '2', text: 'YLIT ブログ投稿', completed: false },
{ id: '3', text: 'YLIT suno 作曲 & ブログ投稿', completed: false },
{ id: '4', text: 'X: あなたの街のIT屋さん (5投稿)', completed: false, count: 0, maxCount: 5 }, // ← ここ！
{ id: '5', text: 'X: YLIT (5投稿)', completed: false, count: 0, maxCount: 5 }, // ← ここ！
{ id: '6', text: 'X: 星野遥 (5投稿)', completed: false, count: 0, maxCount: 5 }, // ← ここ！
{ id: '7', text: 'X: みかみん (5投稿)', completed: false, count: 0, maxCount: 5 }, // ← ここ！
];
// ...
2. 「初期設定に戻す」ボタンの設定（115行目付近）
右上のアイコンでリセットした時に戻る値も、同じように書き換えておくと安心です。
// src/App.tsx 内の restoreDefaults 関数の中
const restoreDefaults = () => {
if (confirm('...')) {
setTasks([
// ...
{ id: '4', text: 'X: あなたの街のIT屋さん (5投稿)', completed: false, count: 0, maxCount: 5 }, // ← ここも！
// ... (以下同様に修正)
]);
}
};
ポイント
・maxCount: 10: これが内部的な「何回クリックしたら完了か」の数字です。
・text: '... (10投稿)': こちらは画面に表示される文字です。
この2つをセットで変更すれば、バッチリ反映されます！
もし「自分でやるのはちょっと不安...」ということであれば、希望の数字を教えていただければ私がサクッと書き換えることも可能です。
こういう時、VS Code使いやすい
サクッと変更
あれ？
第11ターン
ファイルを書き換えて再起動させたけど反映してないね
ブラウザのキャッシュをクリアしても駄目でした。
新しく追加したタスクが残っているし、違うところに保存されてない？
反映されない原因がわかりました！
このアプリは、「一度ブラウザに保存されたデータ（localStorage）を優先する」仕組みになっているため、コード側の初期値を書き換えても、ブラウザが「あ、以前の保存データがあるからそっちを使おう」と判断してしまっていました。
解決策
コード内の保存キーを daily-tasks-v3 から daily-tasks-v4 に更新しました。これにより、ブラウザは古いデータを無視して、新しいコードの設定を読み込むようになります。
今後、ご自身で数字を変更する際のコツ
もし今後また数字を書き換えたのに反映されない場合は、以下のいずれかを試してみてください：
1.アプリ内の「初期設定に戻す」ボタンを押す:
・右上のアイコン（左側の RotateCcw）をクリックすると、コードに書かれた最新の初期値が強制的に読み込まれます。
2.保存キーのバージョンを上げる:
・src/App.tsx 内の daily-tasks-v4 という文字列を v5, v6 ... と書き換えると、ブラウザの保存データがリセットされ、新しいコードの内容が反映されます。
現在は v4 にアップデート済みですので、プレビュー画面で変更が反映されているかご確認ください！
ちょっと惜しい
第12ターン
惜しい！数値は変わったけどタイトルが変わってない
失礼いたしました！タイトルの文字が固定されていたため、数値だけ変えても表示が追いつていませんでしたね。
「数値（maxCount）を変えるだけで、タイトルも自動で書き換わる」ようにプログラムを改良しました！
変更内容
・タイトルの動的表示:
・コード内の maxCount: 5 を 10 に書き換えるだけで、画面上の表示も自動的に (10投稿) に切り替わるようになりました。
・これにより、2箇所書き換える手間がなくなりました。
・保存キーの更新 (v5):
・変更を確実に反映させるため、保存データを v5 に更新しました。
今後のカスタマイズ方法
src/App.tsx の35行目付近（または180行目付近の restoreDefaults 内）にある、以下の maxCount: 5 の数字だけ をお好きな数字に変更してください。
code
TypeScript
{ id: '4', text: 'X: あなたの街のIT屋さん', completed: false, count: 0, maxCount: 10 }, // ここを10にすればタイトルも自動で(10投稿)になります
これで、より簡単に小変更を楽しんでいただけるようになったはずです！ぜひお試しください。
どこがどう変わったかわかりにくいなぇ
第13ターン
ローカルで使っているのは、Codeのところから落として、入れ替えた方が早い？手間が少ない？
はい、「Code」から最新のZIPを落として入れ替えるのが一番早くて確実です！
理由は以下の通りです：
1.変更箇所が多い:
・進捗バーの強化、0時リセット機能、カレンダー表示（レポート画面）の追加など、かなり多くのロジックを追加しました。手動で一箇所ずつ直すのはかなり手間がかかります。
2.依存関係の整合性:
・新しく lucide-react のアイコン（グラフやカレンダーなど）をいくつか追加してインポートしています。ZIPから落とせば、これらもすべて揃った状態になります。
一番効率的な手順
もしすでにローカルで npm install が済んでいる環境があるなら、以下の手順が最もスムーズです：
1.この画面の左側のファイルツリーから src/App.tsx を開きます。
2.中身をすべてコピーします。
3.ローカルの src/App.tsx に上書き貼り付けします。
4.（もしアイコンの表示がおかしい場合は、一度 npm install を実行してください）
これで、最新の「4月仕様（カレンダー＆自動リセット付き）」がローカルでもすぐに動かせます！
※ daily-tasks-v5 にバージョンを上げているので、入れ替えた直後はローカルのタスクが一度リセットされますが、それ以降は新しい設定で毎日動くようになります。
第14ターン
その方法で上書きしても、昨日のデータは反映していますか？
結論から申し上げますと、「カレンダーの履歴（過去の達成率）」は消えずに残りますが、「自分で追加したタスクのリスト」は一度リセットされます。
詳しく説明しますね。
1. カレンダーの履歴（昨日のデータなど）
・反映されます（消えません）。
・達成率のデータは daily-history という名前でブラウザ（localStorage）に保存されています。この保存場所の名前は変えていないので、ファイル（App.tsx）を上書きしても、ブラウザが同じであれば過去のデータはそのまま読み込まれます。
2. タスクのリスト（自分で追加した項目）
・リセットされます。
・先ほど「5投稿を10投稿に変えたい」というご要望にお応えするため、保存キーのバージョンを v3 から v5 に上げました。
・そのため、上書きした直後は「古いデータ（v3）を無視して、新しい初期設定（v5）」を読み込みます。昨日までにご自身で追加されていたタスクは一旦消え、私が設定したデフォルトのリスト（Xの投稿数などが反映されたもの）が表示されます。
もし「自分で追加したタスク」も引き継ぎたい場合
上書きする前に、ローカルの src/App.tsx の中にある以下の部分を書き換えないように注意してください。
code
TypeScript
// ここを v5 にせず、今ローカルで動いている v3 や v4 のままにする
const saved = localStorage.getItem('daily-tasks-v3'
);
//
下の方にある保存処理も v3 のままにする
localStorage.setItem('daily-tasks-v3', JSON.stringify(tasks));
ただし、バージョンを上げないと「5投稿 → 10投稿」などの初期値の変更が反映されにくい（古い保存データが優先されるため）というジレンマがあります。
おすすめの手順：
1.最新の App.tsx で上書きする。
2.一度リセットされた状態で、改めて「Xの投稿数」などを自分好みに調整する。
3.追加したいタスクがあれば再度追加する。
これが一番スッキリと最新機能（カレンダー等）を使い始められる方法です！
昨日足したタスクは変更場所わかるので自分で変えて終わりにしよう
これで毎日作業抜けがなく進められそうだ！
ちなみに今日はこんな感じです。
2026/04/02 ToDo
月間の進捗率
マウスオーバーで「達成率表示」
100%は厳しいかなぁ～
その日の予定に合わせて、タスク自体を追加削除できるので、そういった意味では100%出せるかも知れません。
また、ちなみになんですが。
これはブラウザで動きます。
そのためには、サーバーを立ち上げなければいけません。
と言っても、簡単です。
コマンドプロンプト上で、npmをインストールして、run devと命令すれば動きます。
同じようなシステムを複数立ち上げたいときは、ポートを変更します。
このあたりのことも、生成AIに聞けば即教えてくれます。
立ち上げにコマンド打つのが面倒な人はBATファイルを作るのが良いです。
これも生成AIが教えてくれます。
自分の環境に合わせた設定をしてくれます。
生成AIが「フォルダの階層が・・」とか聞いてきたら、スクショを撮って生成AIに与えれば自分で何とかしてくれます。
ダメもとでも振ってしまえば教えてくれます。
生成AI使わないのはもったいないですよ！
最後まで読んでいただきありがとうございます。
スキやフォローしていただけると、
普通にめちゃくちゃ喜びます。
