3.5 ToDoリスト

AI生成コンテンツ / AI-generated content

「明日の午前中に見積書を出す」「今週中に歯医者を予約する」といった、やることメモ（ToDo）は、頭の中に置いておくとかならず忘れる。カレンダーの上に書き込んで、いつ何をするのかが一目で分かる形にしておきたい。しかし、家族の通院予定や仕事の締切といった私的な情報を、無償のクラウドサービスに預けるのは、情報漏えいの心配がある。そこで本項では、月間カレンダーの上でToDoを登録・表示・編集・削除し、データを自分のパソコンの中だけに保存するツール「ToDoリスト」（pahooToDo.html）を作る。

まず作成の動機を説明する。続いて、「1.1 Codexのインストール」から「3.4 簡易メモ帳」までの記事で取り上げていない要素技術を、1項目ずつ順に解説する。カレンダーの画面をどう組み立てるか、ToDoのデータをどう保存するか、誤った入力や想定外のエラーからどう身を守るか、指やキーボードでどう操作しやすくするかという4つの観点である。最後にpahooToDo.htmlのプログラム仕様書を示す。これがCodexに渡すプロンプトそのものになる。

作成の動機
dialog要素で小さなウィンドウを開く
CSS Gridでカレンダーを組み立てる
CSSカスタムプロパティで配色をまとめる
スマートフォンでも使えるようにする
JSONで構造のあるデータを保存する
stateオブジェクトで状態を1か所にまとめる
配列メソッドでToDoを絞り込み、並べ替える
ToDoごとに一意なIDを付ける
HTMLエスケープでクロスサイト・スクリプティングを防ぐ
想定外のエラーを画面に表示して止める
イベント委譲でたくさんのボタンをまとめて扱う
aria属性で読み上げに配慮する
ToDoリストのプログラム仕様書
参考サイト

作成の動機

スケジュール管理のサービスは数多くあり、その多くは無償で使える。だが、無償で使えるということは、こちらが預けたデータが事業者のサーバーに保管されるということでもある。通院の予定、子どもの学校行事、取引先との打ち合わせといった情報は、それ単体では大したものに見えなくても、まとまれば個人の生活と仕事の全体像になる。サービスの終了や仕様変更、アカウントの乗っ取りによって、これらが失われたり流出したりする危険は常にある。

下表に、ToDoを管理する主な手段を比較する。

ToDoを管理する手段の比較
手段	カレンダー表示	編集のしやすさ	外部送信	費用
紙の手帳・カレンダー	あり	書き直しが残る	なし	購入費
OS標準のリマインダー	一覧が中心	容易	あり（クラウド同期）	無償
クラウド型カレンダー	あり	容易	あり（サーバーに保存）	無償～有償
自作のToDoリスト（本項）	あり	容易	なし（ブラウザ内で完結）	無償

自作であれば、データはブラウザのローカル・ストレージ、すなわち自分のパソコンの中にしか置かれない。「3.4 簡易メモ帳」で作ったpahooMemoWin.htmlと同じ考え方である。ただし、メモ帳が扱うのは1本ずつの文章だったのに対し、ToDoリストが扱うのは「日付・時刻・タイトル・内容・優先順位」という複数の項目が組み合わさったデータであり、しかもそれをカレンダーという二次元の表の上に並べなければならない。そのため、これまでの記事では触れなかった要素技術がいくつも必要になる。

下表に、本項で新たに取り上げる要素技術をまとめる。以降、この順に解説する。

本項で新たに取り上げる要素技術
観点	要素技術	ToDoリストでの役割
画面を組み立てる	dialog要素とshowModal()	ToDoの入力・詳細表示の小さなウィンドウ
	CSS Grid	7列×5～6行の月間カレンダー
	CSSカスタムプロパティ	優先順位や曜日ごとの配色をまとめて管理
	メディアクエリ・clamp()	スマートフォンでの表示調整
データを扱う	JSON.stringify()／JSON.parse()	複数項目のToDoを文字列に変換して保存
	stateオブジェクト	表示中の年月と全ToDoを1か所で保持
	配列メソッド	日付での絞り込みと開始時刻での並べ替え
	一意ID生成	編集・削除の対象を取り違えない
安全に動かす	HTMLエスケープ	入力文字列をタグとして解釈させない
安全に動かす	errorイベントの捕捉	想定外の不具合を画面に表示して停止
操作しやすくする	イベント委譲とdata-*属性	数百個の日付・ToDoボタンを1つの処理で扱う
操作しやすくする	aria-label／aria-live	画面読み上げソフトへの配慮

なお、日曜日・土曜日・国民の祝日の色分け、春分日・秋分日の計算、振替休日と国民の休日の判定については「1.2 カレンダーを作る」で解説済みであるため、本項では繰り返さない。ToDoリストのカレンダー部分は、あのとき作った仕組みをそのまま流用している。

dialog要素で小さなウィンドウを開く

ToDoの入力欄をカレンダーの下に並べると画面が縦に長くなる。必要なときだけ、画面の手前に小さなウィンドウを浮かべたい。こうしたウィンドウをモーダル・ダイアログと呼ぶ。「モーダル」とは「ほかの部分を操作できない状態にする」という意味で、入力を終えるか取り消すまで後ろのカレンダーには触れられなくなり、操作の途中で別のボタンを押す事故を防げる。

かつては、この見た目をdiv要素とCSSで自作していた。背景を暗くする幕を敷き、白い箱を重ね、Escキーで閉じる処理を書き、キーボードのフォーカスが箱の外へ逃げないよう見張る、という手間のかかる作業である。現在のブラウザにはdialog要素が用意されており、これらをブラウザ側が引き受けてくれる。HTMLに <dialog id="formDialog"> と書き、JavaScriptから showModal() を呼べば開き、close() で閉じる。背景の幕の色は ::backdrop という擬似要素で指定する。

pahooToDo.htmlでは入力用と詳細表示用の2つを用意している。ただし古いブラウザではdialog要素が使えないため、showModal() が存在するかを確かめ、無ければ open 属性を直接付け外しする方式に切り替えている。新しい機能があれば使い、無ければ従来の方法で代替する書き方を機能検出（feature detection）と呼ぶ。

モーダル・ダイアログの仕組み

CSS Gridでカレンダーを組み立てる

月間カレンダーは横7列、縦5行または6行のマス目である。「1.2 カレンダーを作る」ではHTMLのtable要素を使ったが、1つのマスに日付、祝日名、複数のToDoを縦に積み重ねる今回のような場合、table要素では高さの調整が思い通りにいかない。

そこで使うのがCSS Grid（グリッドレイアウト）である。親要素に「何列に区切るか」を宣言すると、その中に置いた子要素が自動的に左上から順にマスへ流し込まれる。pahooToDo.htmlの指定は grid-template-columns:repeat(7,minmax(115px,1fr)) である。repeat(7, …) が「7列に区切る」、minmax(115px,1fr) が「各列の幅は最低115ピクセル、余裕があれば残りを均等に分け合う」という意味で、1frのfrはfraction（割合）の略である。

列数を宣言してしまえば、JavaScript側は曜日見出し7個と日付のマスを順番に並べるだけでよく、「何行目の何列目に置くか」を計算する必要がない。行数もその月の日数に応じて自動的に増減する。

7列に区切ると宣言すれば、子要素は左上から順に流し込まれる

CSSカスタムプロパティで配色をまとめる

ToDoリストでは、日曜と祝日を薄赤色、土曜を薄青色にし、優先順位の高を赤色、中をオレンジ色、低を青色にする。同じ色は文字色、枠線、凡例の丸印など複数の箇所で使われる。これらを1か所ずつ色コードで書くと、後から色を調整したいときに修正箇所を探して回ることになり、直し漏れも起きる。

CSSカスタムプロパティ（CSS変数とも呼ばれる）は、色や寸法に名前を付けておき、あとから名前で呼び出す仕組みである。名前は必ずハイフン2本で始める。pahooToDo.htmlでは、スタイルシートの先頭にある :root（文書全体を指す選択子）の中で --high:#d92d20 のように定義し、使う側は color:var(--high) と書く。これで、優先順位「高」の赤色を変えたいときは1行を書き換えるだけで、文字色も枠線も凡例も同時に変わる。プログラムでいえば定数を1か所に集めておくのと同じ考え方である。

1か所で決めた色が、使うすべての場所へ同時に配られる

スマートフォンでも使えるようにする

パソコンの横長の画面とスマートフォンの縦長の画面では、同じ配置のままでは使えない。画面の幅に応じてレイアウトを切り替える手法をレスポンシブデザインと呼ぶ。ここでは3つの道具を組み合わせている。

1つめはメディアクエリである。@media (max-width:650px) と書いた中の指定は、画面幅が650ピクセル以下のときだけ適用される。pahooToDo.htmlはこの中で、カレンダーの1列の最低幅を115ピクセルから90ピクセルへ縮め、入力フォームを2列から1列に変えている。2つめは clamp() 関数で、font-size:clamp(1.55rem,4vw,2.25rem) は「画面幅の4パーセントの大きさ。ただし1.55rem未満にはせず2.25remを超えない」という意味になる。3つめは min() 関数で、width:min(1180px,100%) は「1180ピクセルか画面幅か、小さいほうを採る」となる。

加えて、指で押しやすくするためボタンと入力欄の高さを min-height:42px として確保している。マウスの矢印は数ピクセルの狙いが利くが、指の腹はそうはいかない。

同じプログラムが、画面幅に応じてレイアウトを変える

JSONで構造のあるデータを保存する

「3.4 簡易メモ帳」で解説したとおり、localStorageはブラウザにデータを保存する仕組みだが、保存できるのは文字列だけである。メモ帳が扱うのは文章そのものだったのでそのまま入れられた。しかしToDoは「タイトル・日付・開始時刻・終了時刻・内容・優先順位・ID」の7項目を持ち、それが何十本も並ぶ。この構造は、そのままでは文字列に入れられない。

そこで使うのがJSON（JavaScript Object Notation、ジェイソンと読む）である。データの構造をそのまま文字列として書き表すための決まりごとで、JavaScriptには変換用の関数が最初から備わっている。JSON.stringify() はオブジェクトや配列を文字列に変え、JSON.parse() は逆に文字列を元へ戻す。保存処理は実質1行で、localStorage.setItem(STORAGE_KEY, JSON.stringify(state.todos)) と書けばToDoの配列がまるごと保存される。STORAGE_KEY には 'pahooToDo.todos.v1' という名前を与え、ほかのプログラムと衝突しないようプログラム名を冠し、将来データの形を変えたときに v2 として区別できるようにしている。

なお読み込み時には、戻ってきたものが本当に配列かを Array.isArray() で確かめ、違っていればエラーとして処理を止めている。localStorageの中身は利用者が手で書き換えられるため、保存したときの形で戻るとは限らないからである。外部から受け取った値を無条件に信用しないという原則は、「2.1 プログラム仕様書を作る」で述べた例外・エラー処理の考え方に沿う。

7項目のToDoは1本の文字列に変換して保存し、読み込むときに元へ戻す

stateオブジェクトで状態を1か所にまとめる

ToDoリストが覚えておかなければならないことは3つある。いま何年何月を表示しているか、ToDoは何本あってそれぞれどんな内容か、詳細ウィンドウでいまどのToDoを開いているかである。こうした「プログラムがいま覚えている情報」を状態（state）と呼ぶ。状態をあちらの変数とこちらの変数に散らすと、片方だけ更新して片方を忘れる不具合が起きやすい。カレンダーは7月なのにToDoの一覧は8月のまま、といった食い違いである。

これを防ぐため、pahooToDo.htmlでは state という1個のオブジェクトを作り、viewDate（表示中の月）、todos（ToDoの配列）、selectedId（選択中のID）をまとめて入れている。そして画面の更新は renderCalendar() という関数1本に任せる。この関数はstateの中身を読み取ってカレンダー全体を作り直す。前月ボタンを押したときも、保存したときも、削除したときも、やることは「stateを書き換えて renderCalendar() を呼ぶ」だけである。

毎回全部作り直すのは無駄に思えるが、1か月分は最大42マスであり、現在の機器には何の負担でもない。読みやすさと正しさを、目に見えない速度と引き換えにしないという判断である。この「状態を1つの出所にまとめ、そこから画面を組み立てる」考え方は、Reactなど本格的なライブラリの基本方針でもある。

状態を1か所にまとめ、そこから画面を作り直す

配列メソッドでToDoを絞り込み、並べ替える

ToDoは1本の配列にまとめて持っている。ここから「7月20日のToDoだけを、開始時刻の早い順に取り出す」といった操作が必要になる。C言語の時代なら、for文で先頭から末尾まで回し、条件に合うものを別の配列へ詰め、並べ替える関数を呼ぶ、という手順を書いた。JavaScriptの配列には、こうした定型作業を1行で書けるメソッドが用意されている。下表に、pahooToDo.htmlで使っている主なものをまとめる。

ToDoリストで使っている配列メソッド
メソッド	働き	プログラム内での用途
filter()	条件に合う要素だけを集めた新しい配列を返す	その日付のToDoを取り出す／削除対象を除いた配列を作る
sort()	並べ替える	開始時刻の早い順に並べる
find()	条件に合う最初の要素を返す	IDから該当するToDoを探す
findIndex()	条件に合う最初の要素の位置を返す	編集時に置き換える位置を求める
map()	各要素を別の値に変換した配列を返す	ToDoからHTMLの断片を作る
join()	配列を1本の文字列に連結する	HTMLの断片をつなげる

並べ替えでは localeCompare() を使っている。文字列を辞書順に比べて負の数、0、正の数のいずれかを返すメソッドで、sort() はこの符号を見て順序を決める。開始時刻は "09:00" のように2桁ずつ0で埋めた文字列にしてあるため、辞書順に並べれば時刻の早い順になる。数値に直す手間をかけずに済ませる工夫である。なお削除処理では、配列から要素を取り除くのではなく filter() で「削除対象以外」を集めた新しい配列を作って差し替えている。元の配列を書き換えない書き方は、途中の状態が中途半端になる事故を防ぐ。

ToDoごとに一意なIDを付ける

「編集」「削除」ボタンを押したとき、どのToDoに対する操作かを取り違えてはならない。同じ日に同じタイトルのToDoが2本あることもあるし、配列の何番目かで覚えておくと、ほかのToDoを削除した瞬間に番号がずれて別のToDoを消してしまう。そこで、ToDoを1本作るたびに二度と重複しない名札を貼る。これを一意ID（unique ID）と呼ぶ。

pahooToDo.htmlのIDは `${Date.now()}-${Math.random().toString(36).slice(2, 9)}` で作る。Date.now() は1970年（昭和45年）1月1日からの経過ミリ秒を返す。同じミリ秒に2本作られる可能性に備え、うしろに乱数を付ける。Math.random() が返す0以上1未満の小数を toString(36) で36進数（0～9とa～zの36文字）の文字列に変え、"0." の2文字を切り落として7文字だけ使う。結果は "1786932587248-k3f9a1c" のような文字列になる。バッククォートで囲み ${ } で値を埋め込む書き方はテンプレートリテラルと呼ばれ、+ でつなぐより読みやすい。

なお、現在のブラウザには crypto.randomUUID() という、規格に沿った36文字のUUIDを生成するメソッドもある。ただし使えるのは2022年（令和4年）以降のブラウザで、かつhttps、localhost、file:// といった安全なコンテキストに限られ、httpで配信する社内サーバーに置くと動かない。動作環境を広く取りたいという前提条件から、どこでも動く Date.now() と Math.random() の組み合わせを採用している。技術の選択が、実現したい機能ではなく動作環境の前提条件で決まる一例である。

番号で覚えると削除で番号がずれるが、一意なIDなら変わらない

HTMLエスケープでクロスサイト・スクリプティングを防ぐ

カレンダーのマスにToDoのタイトルを表示するとき、プログラムは文字列をつなぎ合わせてHTMLを組み立てている。ここに落とし穴がある。利用者がタイトルに「<b>重要</b>」と入力すると、その文字はHTMLのタグとして解釈され、太字の「重要」が表示されてしまう。表示が崩れるだけならまだよいが、scriptタグを書き込めば、そこに書いたJavaScriptがそのまま実行される。これがクロスサイト・スクリプティング（XSS）と呼ばれる脆弱性である。

対策は、「<」「>」「&」といった特別な意味を持つ文字を、単なる文字として表示するための別の書き方に置き換えることである。これをHTMLエスケープと呼ぶ。置き換えの表を自分で書くこともできるが、pahooToDo.htmlはブラウザ自身にやらせている。escapeHtml() の中身は3行で、まず画面に出さない空のdiv要素を1つ作り、element.textContent = 文字列と代入する。textContentは中身を文字そのものとして扱うためタグに解釈されない。最後に element.innerHTML を読み出すと、エスケープ済みのHTMLが返ってくる。

自分でエスケープの規則を書くと置き換え漏れが起きやすい。ブラウザが必ず正しく行う処理を借りるほうが確実である。なお、詳細ウィンドウで本文を表示するときは innerHTML ではなく textContent に直接代入している。エスケープすら不要で、これがもっとも安全な書き方である。

そのまま組み立てるとタグとして解釈され、エスケープすれば文字として表示される

想定外のエラーを画面に表示して止める

ブラウザで動くJavaScriptの困ったところは、エラーが起きても画面には何も出ず、ただ黙って動かなくなる点である。開発者ツールを開けばメッセージが読めるが、利用者がそれを開くとは限らない。「ボタンを押しても何も起こらない」という状態は、原因が分からず、しかもデータが壊れつつあるかもしれない点でもっとも悪い。

try文とcatch文でエラーを受け止める書き方は広く知られているが、それは囲んだ範囲の中だけで働く。ボタンを押したときに呼ばれる処理のように、あとから実行される部分は起動時のtry文では捕まえられない。そこで、window（ブラウザの窓全体）に対して2つのイベントを見張る。1つめはerrorイベントで、どこかで捕まえられなかったエラーが発生したときに起きる。2つめはunhandledrejectionイベントで、Promise（あとで結果が返る処理）の失敗が誰にも受け止められなかったときに起きる。

この2つを addEventListener() で監視し、いずれかが起きたら showError() を呼ぶ。showError() は画面上部の赤い枠にエラーの内容を表示したうえで、すべてのボタン、入力欄、選択肢を disabled にして操作できなくする。中途半端な状態で操作を続けさせ、保存済みのToDoを壊してしまうより、はっきり止めるほうが安全だという判断である。起動処理そのものも try 文で囲み、初期化に失敗した場合も同じ赤い枠に出る。

イベント委譲でたくさんのボタンをまとめて扱う

カレンダーの1か月分には最大42のマスがあり、それぞれに日付ボタンが1つある。さらに各マスにはToDoのタイトルを表示するボタンが並ぶ。全部で100個を超えることもある。これらすべてに「押されたときの処理」を個別に登録すると、ボタンの数だけ登録処理が必要になる。しかもカレンダーを作り直すたびにボタンは新しくなるので、そのつど全部に登録し直さなければならない。

ここで使うのがイベント委譲（event delegation）である。ブラウザでは、ある要素が押されたとき、その知らせが親、その親、と外側へ順に伝わる性質がある。これをバブリング（bubbling、泡が浮かび上がる様子）と呼ぶ。この性質を使えば、個々のボタンではなく、それらを囲む親要素1か所だけを見張っておけばよい。pahooToDo.htmlはカレンダー全体を包むdiv要素にクリックの監視を1つだけ登録し、押されたときは event.target（実際に押された要素）から closest() を呼んで、自分自身とその祖先を外側へたどり、目印の付いた要素を探す。

目印にはdata-*属性を使う。日付ボタンには data-date="2026-08-18"、ToDoのボタンには data-todo-id="…" と書いておき、JavaScript側では dataset.date、dataset.todoId として読み出せる。data-*属性はHTMLの標準として定められた「開発者が自由に使ってよい属性」である。この仕組みのおかげで、カレンダーを何度作り直しても登録処理は1つのままで済む。

押されたことは外側へ伝わるので、親1か所で受け止められる

aria属性で読み上げに配慮する

pahooToDo.htmlのボタンには aria-label="前月" のような属性が付いている。ariaはWAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）の略で、視覚に頼らずWebページを使う人のための情報をHTMLに書き添えるための決まりごとである。画面読み上げソフトは、この情報をもとに要素の役割を音声で伝える。「←　前月」というボタンは目で見れば意味が分かるが、読み上げソフトには矢印記号の扱いに困る。aria-label="前月" と書いておけば確実に「前月」と読み上げられる。

もう1つ使っているのが aria-live="polite" である。「この部分の文字が書き換わったら、利用者の操作を邪魔しない間合いで読み上げてほしい」という指示である。前月・翌月ボタンを押すと年月の見出しが「2026年（令和8年）8月」から「2026年（令和8年）7月」へ変わるが、画面を見ていない人にはその変化が分からない。aria-live を付けておけば、変わったことが音声で伝わる。

加えて :focus-visible という擬似クラスで、Tabキーで移動してきた要素のまわりに太い枠を表示し、いまどこにいるかが分かるようにしてある。マウスでクリックしたときには表示されない。こうした配慮は、Codexに「スマホでも利用できること」と伝えるだけでは出てこないことが多い。仕様書に明記するか、できあがったものを確認して追加を依頼する必要がある。

ToDoリストのプログラム仕様書

以上を踏まえて、ToDoリスト「pahooToDo.html」のプログラム仕様書を示す。これがCodexに渡すプロンプトそのものになる。国民の祝日については、外部との通信を原則として禁じたうえで、祝日情報の取得だけは例外として許可している。「1.2 カレンダーを作る」で作った計算式をCodexが再利用するか、通信して取得するかは、Codexの判断に委ねている。

プログラム仕様書（プロンプト）

# 目標
やることメモ（ToDo）をカレンダーに書き込み、表示、編集、削除ができる。

# プログラム・ファイル名
pahooToDo.html

# プロジェクト・フォルダ作成
- プログラム・ファイル名の拡張子を除いた主ファイル名と同じ名前のサブフォルダを作成し、以降の作業はサブフォルダで行う。
- すでにサブフォルダがあれば、そのサブフォルダに移動して以降の作業を進める。

## 出力
- プログラム上部にタイトル「ToDoリスト」、バージョン番号、製作者「(c)pahoo.org Powerd by Codex」と記載する。
- 月間カレンダーを1ヶ月分表示する。初期状態では当月。
- 日曜日と国民の祝日は薄赤色、土曜日は薄青色で表示する。
- 表示するカレンダーを単位で前後に移動できる。
- 表示するカレンダーを、年と月の選択することで変更できる。
- ToDoが記録されている日付に、ToDoのタイトルが表示される。優先順位に応じて表示色を変える（高：赤色、中：オレンジ色、低：青色）
- ToDoのタイトルをクリックすると、小さいウィンドウが開いて内容を表示する。

## 入力
- 新規：ユーザーはカレンダーの該当日付、もしくは、年・月・日の選択肢を選んで、新規にToDoを入力する。
- 編集：ユーザーは小さいウィンドウで開いているToDo内容の右下にある「編集」ボタンをクリックすると、当該ToDoの内容を編集できる。
- 削除：ユーザーは小さいウィンドウで開いているToDo内容の右下にある「削除」ボタンをクリックすると、当該ToDoの内容を削除できる。削除する前に確認メッセージを表示する。
- ToDoとして入力できる内容は次の通り。
-- タイトル：1行
-- 開始時刻～終了時刻：いずれも時、分を選択する
-- 内容：複数行
-- 優先順位：高・中・低の3つから選択

## 処理
- カレンダー及びToDoの表示、登録、編集、削除

## 記録
- 本プログラムが終了しても、入力したToDoは消えない。

## 通信
- 原則として、外部と通信しない。
- ただし、国民の祝日情報が必要な場合のデータ通信は許可する。

## 例外・エラー処理
- 無限ループに陥ったり、システム・エラーが出たときは、画面にエラー情報を表示して終了すること。

# テスト観点・合格条件
- Codexは、ダミーのToDoを10本作成し、上記仕様の通りに動作するか検証する。
- 前提条件、制約条件が守られていること。

# 前提条件
- 仕様で分からないことがあれば、ユーザーに質問すること。
- JavaScriptを使った1本のプログラム・ファイルにすること。
- クライアントPCのブラウザ（OSやブラウザの種類は問わない）で動作すること。
- スマホでも利用できること。
- httpサーバなどやNode.jsなどサーバ技術は使わず、ブラウザの機能で完結すること。
- コーディングは「Airbnb JavaScript Style Guide」にのっとること。
- プログラムファイルにコメントとして次の情報を記載すること。
  - プログラムの名称
  - バージョン
  - 目的
  - 動作環境
  - 著作権表示および使用条件
  - インストール方法
  - お問い合わせ

# 制約条件
- 外部ライブラリを使用する場合は、下記のサイトに限定すること
  https://cdn.jsdelivr.net/
  https://cdnjs.cloudflare.com/
  https://ajax.googleapis.com/
  https://code.jquery.com/
  https://ajax.aspnetcdn.com/
- プログラムがMIT Licenseに違反していないこと。

この仕様書をCodexに渡すと、最初の実装が出てくる。「テスト観点・合格条件」にダミーのToDoを10本作って検証するよう書いてあるため、Codexは自らダミー・データを作り、登録・表示・編集・削除の一連の動作を確かめてから結果を報告する。「2.5 複数のExcelファイルを結合、集計する」で述べたように、実データではなくダミー・データで検証させるのは、私的な情報をAIに渡さないための基本である。

できあがったpahooToDo.htmlは、1本のHTMLファイルで完結しており、外部ライブラリもサーバーも要らない。ファイルをダブルクリックすればブラウザが開き、そのまま使える。「3.4 簡易メモ帳」で紹介したWebページのアプリ化機能を使えば、タスクバーに常駐させることもできる。