Codexでチェックリストに保存機能を付ける｜再読み込みとリセットを確認

チェックを付けたはずなのに、ページを開き直すと元に戻る。小さなチェック表でも、保存する範囲を決めておくと、使うときの行き違いを減らせます。

今回は、Codex入門③で紹介した3項目のチェック表を練習用に作り、チェック状態を残す機能を付けました。架空の項目だけを使い、再読み込み・開き直し・リセットを実際に確認しています。

確認日：2026年10月23日。この記事用のサンプルをパソコンのアプリ内ブラウザーで試した記録です。職場で運用した道具の紹介ではありません。

保存先を「このブラウザーの中」と決める

今回作るのは、自分で確認するための小さなチェック表です。項目は「資料の部数を確認する」「共有の道具をそろえる」「机の配置を確かめる」の3つに固定しました。名前や予定などを自由に入力する欄は付けていません。

チェック状態は、ブラウザーのlocalStorage（ローカルストレージ）に保存します。ブラウザー内に小さなデータを残す仕組みで、通常の利用ではページを閉じた後も保存内容を読み出せます。MDNのlocalStorageの説明

このサンプルには、別の端末との共有やバックアップの機能はありません。まずは同じ端末・同じブラウザーで、同じ確認用URLを開く範囲に絞ります。

Codexには、保存の条件と確認方法を伝える

3項目を表示してチェックできるページがある、練習用フォルダーで依頼します。まだページがない場合は、Codex入門③の手順から進めてください。

依頼では、残したい状態に加えて、保存できない場合の表示やリセットの動きも伝えます。OpenAIの公式ガイドでも、変更したい動作・保ちたい条件・確認方法を具体的に伝える考え方が案内されています。OpenAIの依頼の書き方

そのまま使える依頼文の例

練習用の3項目チェックリストに、保存機能を追加してください。
対象は、練習用フォルダーの index.html です。

・項目は「資料の部数を確認する」「共有の道具をそろえる」「机の配置を確かめる」。
・チェックを変えたら、このブラウザーの localStorage に自動保存する。
・開き直したら、前回のチェック状態を表示する。
・保存に成功したときだけ「保存しました」と表示する。
・保存できない場合は、そのことを画面に表示する。
・「チェックをすべて外す」ボタンには、実行前の確認と取り消しを付ける。
・外部送信、ログイン、端末間共有、インターネットへの公開はしない。
・変更は index.html だけにし、外部ライブラリは追加しない。

このPC内だけで開く確認用サーバーを起動し、確認用URLを教えてください。
再読み込み、開き直し、取り消し、全解除後の再読み込みを確認してください。
実際に確認できたことと、未確認のことを分けて教えてください。

今回は、HTMLファイルを直接ダブルクリックする方法ではなく、Codexが起動した確認用URLから開きます。ファイルを直接開いた場合のlocalStorageの動きは、ブラウザーによって異なるためです。MDNの保存先に関する説明

「保存しました」の後に、再読み込みしてみる

できたページで上から2項目にチェックを付け、表示が「2 / 3 件」になったことを見ます。その後、ブラウザーの再読み込みを押します。ここで、同じ2項目にチェックが残るかを確かめます。

保存なしの比較用ページも作り、同じ操作を試しました。記事用サンプルで確認できた結果は、次のとおりです。

試した操作	確認できた結果
保存なしの版で2件を選び、再読み込み	チェックは0件に戻った
保存ありの版で2件を選び、再読み込み	同じ2件のチェックが残った
タブを閉じ、同じURLを開き直す	同じ2件のチェックが残った
全解除の確認画面で「取り消す」	2件のチェックを保った
全解除を実行し、再読み込み	チェック0件のままだった

確認するときは、保存できたという表示と、開き直した後の状態をセットで見ます。チェック件数に加えて、どの項目を選んだかまで一致していれば、確かめやすくなります。

リセットは「取り消す」動きまで試す

次に「チェックをすべて外す」を押し、まずは確認画面で「取り消す」を選びます。元のチェックが残ることを見てから、もう一度開いて全解除を実行します。最後に再読み込みして、未選択の状態が残るかを確認します。

スマホサイズの表示では、文字が途中で隠れないか、項目とチェック欄を一緒に押しやすいかも見ます。今回のサンプルは画面幅390pxで横にはみ出さず表示できました。スマホ実機での操作は、それぞれの端末で確かめてください。

うまく残らなければ、操作の順番を添えて直してもらう

もし再読み込み後にチェックが消える場合は、どこを押して、どうなったかを順に伝えます。次は、不具合が起きたときに使う依頼文の例です。

同じ確認用URLで、上から2項目にチェックを付けました。
再読み込みすると、3項目とも未選択に戻ります。

チェック状態が復元されるように直してください。
項目名と見た目、全解除の確認画面は保ってください。
修正後に同じ操作を試し、2項目が残ることを確認してください。

直した後は、同じ操作をもう一度試します。保存が直っていても、リセットの取り消しなど、もともと動いていた部分が保たれているかまで見ておくと安心です。

保存できる範囲を画面にも残す

ブラウザー内の保存は、データをずっと保管する保証にはなりません。シークレットモードでは、最後のシークレットタブを閉じるとlocalStorageのデータが消えます。また、設定によって保存が許可されないこともあります。MDNのlocalStorageの注意点

サンプルの画面にも、「保存先は、このブラウザーの中です」と表示しました。保存に失敗したときは、そのことを表示するようにしています。保存が禁止された環境での動作までは、今回のブラウザー確認では試していません。

今回の練習に入れるのは、架空の3項目とチェック状態だけです。実際の業務記録や、消えると困る記録を扱う場合は、保存先や復元の方法を別に考える必要があります。

自分の道具を直すときも、「どこに残すか」「どう戻すか」「何を確かめるか」を一つずつ決めてみてください。小さな変更でも、作ってから開き直してみるところまでを1回の作業にすると、次に頼むことがはっきりします。

Codexを開く準備から始める場合は、Codex入門① 公式アプリの準備と最初のチャットをどうぞ。

確認日と参考資料

動作と公式資料の確認日：2026年10月23日。掲載画面はすべてこの記事用の架空サンプルです。依頼文は、今回の練習に合わせて作成した例です。

• OpenAI：Prompting Codex
• MDN：Window.localStorage