MENU
  1. ホーム
  2. テクノロジー・デジタルスキル
  3. AI
  4. ブラウザがチェック状態を記憶するリストの作り方と実用アイデア

ブラウザがチェック状態を記憶するリストの作り方と実用アイデア

テクノロジー・デジタルスキル AI
当ページのリンクには広告が含まれています。

こんにちは。飛鳥です。

今回クライアントさんから頼まれて
WordPressのページで
チェックリストがあり
チェックしたものを表示、チェックしたものを非表示、リセットのボタンで表示の制御
リロードしても記憶している
というコードを作成しました。
ウェブページを閉じても、リロードしても、チェックした状態を記憶してくれるリスト機能があると便利ですよね。
今回は、JavaScriptのlocalStorageを活用して、そんな便利なチェックリスト機能を実装する方法と、実用的な活用アイデアをご紹介します。

目次

こんなチェックリストです

実際に見てもらったほうがイメージが枠と思うので表示します。
これです。

コードの概要と動作の仕組み

以下が今回紹介するコードの全体です。HTML、CSS、JavaScriptを組み合わせた簡単な実装になっています。

<style>
    /* リストのビュレット（・）を非表示にする */
    ul.checklist {
        list-style: none;
        padding: 0;
    }

    /* ボタンのデザイン */
    button {
        margin: 5px;
        padding: 8px 12px;
        border: none;
        background-color: #0073aa;
        color: white;
        cursor: pointer;
        border-radius: 5px;
    }

    button:hover {
        background-color: #005f8d;
    }
</style>

<!-- ▼ リスト（10個） ▼ -->
<ul class="checklist">
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item1"> リスト1</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item2"> リスト2</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item3"> リスト3</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item4"> リスト4</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item5"> リスト5</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item6"> リスト6</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item7"> リスト7</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item8"> リスト8</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item9"> リスト9</label></li>
    <li><label><input type="checkbox" class="filter-checkbox" data-id="item10"> リスト10</label></li>
</ul>
<!-- ▲ リスト（10個） ▲ -->

<!-- ▼ ボタン ▼ -->
<button id="show-checked">チェックしたものを表示</button>
<button id="hide-checked">チェックしたものを非表示</button>
<button id="reset">リセット</button>
<!-- ▲ ボタン ▲ -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    // ページごとの固有キーを設定（例：「001」は1ページ目）
    const pageKey = "001";

    const checkboxes = document.querySelectorAll(".filter-checkbox");
    const showCheckedButton = document.getElementById("show-checked");
    const hideCheckedButton = document.getElementById("hide-checked");
    const resetButton = document.getElementById("reset");

    // --- チェック状態の復元 ---
    checkboxes.forEach((checkbox) => {
        const itemId = checkbox.getAttribute("data-id");
        const storageKey = pageKey + "-" + itemId;
        
        if (localStorage.getItem(storageKey) === "checked") {
            checkbox.checked = true;
        }

        // チェック変更時に localStorage を更新
        checkbox.addEventListener("change", function () {
            if (checkbox.checked) {
                localStorage.setItem(storageKey, "checked");
            } else {
                localStorage.removeItem(storageKey);
            }
        });
    });

    // --- 表示モードの適用関数 ---
    function applyDisplayMode(mode) {
        checkboxes.forEach((checkbox) => {
            const li = checkbox.closest("li");
            if (mode === "show") {
                // チェックされている項目のみ表示
                li.style.display = checkbox.checked ? "block" : "none";
            } else if (mode === "hide") {
                // チェックされている項目のみ非表示
                li.style.display = checkbox.checked ? "none" : "block";
            } else {
                // 全て表示
                li.style.display = "block";
            }
        });
    }

    // --- 直前の表示モードを復元 ---
    const displayModeKey = "displayMode-" + pageKey;
    const savedMode = localStorage.getItem(displayModeKey);
    
    if (savedMode) {
        applyDisplayMode(savedMode);
    } else {
        // 何も保存されていない場合は全件表示
        applyDisplayMode("all");
    }

    // --- ボタン動作 ---
    showCheckedButton.addEventListener("click", function () {
        applyDisplayMode("show");
        localStorage.setItem(displayModeKey, "show");
    });

    hideCheckedButton.addEventListener("click", function () {
        applyDisplayMode("hide");
        localStorage.setItem(displayModeKey, "hide");
    });

    resetButton.addEventListener("click", function () {
        // チェック状態のリセット
        checkboxes.forEach((checkbox) => {
            checkbox.checked = false;
            const storageKey = pageKey + "-" + checkbox.getAttribute("data-id");
            localStorage.removeItem(storageKey);
            checkbox.closest("li").style.display = "block";
        });
        // 表示モードのリセット
        localStorage.removeItem(displayModeKey);
    });
});
</script>

このコードを整理すると、主に以下の3つの機能があります：

  1. チェック状態の保持と復元
    • localStorage を使って、ユーザーがチェックしたかどうかをブラウザに記憶します。
    • 各チェックボックスは data-id 属性を持ち、その属性値（例：item1）をキーにして、ページ固有の情報（例：001-item1）としてローカルストレージに保存されます。
    • ページをリロードしても、チェックが付いた状態を復元できます。
  2. 「表示モード」の切り替え
    • 「チェックしたものを表示」ボタンを押すと、チェックが付いている項目だけが表示され、チェックが付いていない項目は非表示になります。
    • 「チェックしたものを非表示」ボタンを押すと、チェックが付いている項目だけが隠れ、チェックが付いていない項目は表示されます。
    • どの表示モードにしているか（「show」「hide」「all」）も localStorage に保存されます。
  3. リセット
    • 「リセット」ボタンを押すと、チェック状態を全て解除し、リスト項目は全て表示されるように初期化されます。
    • この際、localStorage の該当データも消去されます。

ユーザーがページを閉じたりリロードしても、チェックの状態や前回設定した表示モードをブラウザが記憶しているため、再度開いたときに同じ表示状態を保てるのが大きな特徴です。

実用的な活用アイデア

1. 料理レシピの材料チェッカー

レシピブログを運営している場合、各レシピページにこのチェックリストを実装すると読者体験が格段に向上します。

  • 実装例：レシピの材料リストをチェックボックス形式にします。
  • 活用方法：
    • 読者は買い物前に、家にある材料にチェックを入れて「チェックしたものを非表示」にすれば、買うべき材料だけが表示されます。
    • スマートフォンでスーパーにいながら、必要な材料だけを確認できるので買い忘れを防止できます。
    • 複数のレシピを作る場合は、各レシピページ（pageKeyを変えて実装）で独立したチェックリストを管理できます。

拡張アイデア：「全ての材料を一覧表示」ボタンを追加して、複数レシピの材料をまとめて確認できる機能も実装できます。

2. 旅行の荷造りアシスタント

旅行ブログやライフスタイルサイトに最適な活用法です。

  • 実装例：旅行タイプ別（ビジネス、海外、キャンプなど）の持ち物リストを作成します。
  • 活用方法：
    • 読者は準備が完了した項目をチェックしていき、進捗を視覚的に確認できます。
    • 「チェックしたものを非表示」にすると、まだ準備していない項目だけが表示されるので、漏れを防げます。
    • ブラウザに情報が保存されるため、旅行準備を数日かけて行う場合も便利です。

拡張アイデア：カテゴリー分け（衣類、電子機器、書類など）を実装して、さらに使いやすくすることも可能です。

3. 季節の行事・イベント準備チェックリスト

季節のイベントや行事の準備に役立つリストです。

  • 実装例：正月準備、クリスマス、ハロウィンなどの季節イベントの準備項目をリスト化します。
  • 活用方法：
    • 毎年同じリストを使いまわせるため、「去年やったこと」を参考にしながら今年の準備を進められます。
    • 家族と共有して分担作業の進捗確認にも使えます（同じデバイスを使う場合）。
    • 「チェックしたものを非表示」にすれば、残りのタスクに集中できます。

拡張アイデア：複数の行事を1ページにまとめる場合は、カテゴリー分けして視覚的に分かりやすくできます。

4. 健康習慣トラッカー

健康・ライフスタイルブログで読者のエンゲージメントを高める機能として実装できます。

  • 実装例：毎日の健康習慣（水をこまめに飲む、ストレッチをする、野菜を食べるなど）をリスト化します。
  • 活用方法：
    • 日付ごとにpageKeyを変更すれば（例：「20250306」）、日々の記録として使用可能です。
    • 達成した習慣にチェックを入れて視覚化することで、モチベーション維持に役立ちます。
    • 1週間単位でリセットして新たな週を始めることもできます。

拡張アイデア：この基本コードをさらに発展させて、週間・月間の達成状況を視覚化する機能を追加すれば、より長期的な習慣形成をサポートできます。

AIを活用したコード開発について

このコードは実はChatGPTで作りました。HTML？CSS？JS？という人でもAIを上手に使うことができたら、このようなページを作ったりすることができます。日本人はあまりAIを実用していないという数字があるのですが、AIをフル活用して仕事の効率をUPしたり、作りたいものを作ってみてはいかがでしょうか。

プログラミングの知識がなくても、「ブラウザで情報を保存できるチェックリストが欲しい」というような要望を具体的に伝えれば、AIが適切なコードを提案してくれます。あとは少しカスタマイズするだけで、オリジナルの機能を持ったウェブページを作成できるのです。

まとめ

このシンプルながら効果的なコードは、単なるチェックリスト以上の可能性を秘めています。ユーザーのブラウザ内に情報を保存するlocalStorageの機能を利用することで、サーバーサイドの実装なしでもユーザー体験を大きく向上させることができます。

日常生活のさまざまな場面で活用できるこの機能は、あなたのブログやウェブサイトの価値を高め、読者のリピート率向上にも貢献するでしょう。Webの知識がある方なら、このコードを拡張して独自の機能（日付記録、カテゴリ分け、優先順位など）を追加することも可能です。

ぜひこのコードをカスタマイズして、あなたのサイトに合った形で実装してみてください！

テクノロジー・デジタルスキル AI
AI WordPress
シェアしてくださればウレシイです。
  • URLをコピーしました！
目次