はじめに
プログラミングの学習で最初に作ることが多い「ToDoアプリ」。
でも、ただのToDoアプリを作るだけじゃつまらない…ということで、見た目はクリーンで使いやすいのに、裏側が「量子力学」や「物理学」の用語で動いている、少し中二病テイストなToDoアプリを作ってみました！
しかも、ReactやVueなどの難しい環境構築は一切不要。たった1つのHTMLファイルだけで動いています。
プログラミング初心者の方にとって「アプリの仕組み」がとても分かりやすい作りになっているので、コードの解説も交えながら紹介します。
どんなアプリ？（主な機能）
一見すると、シンプルでキレイな普通のToDoアプリです。
- 基本機能: タスクの追加、完了、削除、編集
- 便利機能: 検索、未完了/完了済みのフィルター
- データ管理: タスクのデータをJSONファイルとしてパソコンに保存（エクスポート/インポート）可能！
隠し機能：システムモニタ画面
画面右上の「歯車アイコン」を押すと、このアプリの真骨頂である「内部物理エンジンモニタ」が開きます。
- タスクの数 は 「事象総数 (N)」
- 完了したタスク は 「波束収縮 (Obs)」
- タスクを削除すると 「熱放射（エントロピー）」 が増大する
という、謎のSF設定が仕込まれています（笑）。
初心者必見！このアプリの裏側（仕組み）
このアプリが「プログラミング初心者」にとてもおすすめな理由が3つあります。
1. 環境構築がゼロ！
初心者が一番つまずく「Node.jsのインストール」や「Webpackの設定」などが一切ありません。
メモ帳（エディタ）を開いて、HTMLファイルにコードを書き、ブラウザでダブルクリックして開くだけで動きます。
デザイン（CSS）も「Tailwind CSS」という便利なツールをURLから読み込んでいるだけです。
2. 関数名（命令の名前）は自由に付けていい！
プログラムの中で「タスクを追加する」「タスクを消す」といった命令（関数）には、プログラマーが好きな名前を付けられます。
普通なら addTodo や deleteTodo と名付けますが、このアプリではこうなっています。
-
タスクを追加する ＝
confineToLightCone（単一光円錐への封じ込め） -
タスクを完了する ＝
collapseWaveFunction（波束の収縮） -
タスクを削除する ＝
castToEventHorizon（事象の地平線への投棄）
一見難しそうですが、中身はただの「配列（データのリスト）への追加・削除」です。「プログラムの名前は自分がワクワクするものにしていいんだ！」という自由さを感じてください。
3. 「データ」と「見た目」のシンプルな関係
このアプリは、最近のWeb開発で一番大切な「データが変われば、画面も変わる」というルールだけで動いています。
裏側には events という「タスクのリスト（配列）」が1つあるだけです。
// ↓これが全てのタスクのデータ
let events = [
{ id: 1, description: "牛乳を買う", isObserved: false }, // 未完了
{ id: 2, description: "本を読む", isObserved: true } // 完了（波束収縮済み）
];
何か操作（追加や削除）をしたら、この events の中身を書き換えます。
そして最後に必ず render()（画面を描画する魔法の関数）を呼び出します。すると、最新の events のデータをもとに、画面がパッと一瞬で書き換わる仕組みです。
// タスクを削除（事象の地平線へ投棄）する仕組み
window.castToEventHorizon = function(id) {
// 選んだID以外のタスクだけを残す（＝削除）
events = events.filter(ev => ev.id !== id);
// 削除した熱量としてエントロピーを増やす（遊び心）
entropy += 1.38;
// 画面を更新！
render();
}
この「データ」→「画面を描画（render）」という流れは、ReactやVueといった現代のプログラミングの基礎と全く同じ考え方です。
おわりに
プログラミングと聞くと「正しい英単語を、正しいルールで書かなければいけない」と堅苦しく考えてしまいがちですが、実際はとても自由でクリエイティブなものです。
「完了」を「波束の収縮」と呼んだり、タスクを消すたびに「熱放射（エントロピー）」の数値を上げたりする遊び心を入れるだけで、プログラミングは一気に楽しくなります。
ぜひ公開URLから実際に触ってみて、もし興味が湧いたらご自身のパソコンでも同じようにHTMLファイルを作って遊んでみてください！