Webページの更新履歴をJSONで一元管理し、JavaScriptでHTMLに自動表示する方法

複数ページを運用する中で、更新履歴の管理が煩雑になっていませんか？
本記事では、更新履歴を外部 JSON ファイルで一元管理。JavaScript で HTML に自動表示する仕組みを紹介します。

なぜ外部JSONで管理するのか？

従来は各Webページに直接HTMLで更新履歴を記載していました。

1ページずつ更新する場合は問題ありません。複数ページをまとめて更新する際には、履歴の記載が大きな負担になります。

そこで、更新履歴を外部JSONファイルに集約。そして、JavaScriptでHTMLに自動出力する方法を採用しました。

この仕組みにより、履歴の記述作業を効率化でき、保守性も向上します。

更新履歴を管理する JSON の構造

Web ページごとに更新履歴を管理する JSON を作成しました。更新履歴の id，更新日時（ISO 形式）の date，更新内容を description としています。

[
    {
        "id": 1,
        "date": "2025-10-05",
        "description": "新規作成"
    },
    {
        "id": 2,
        "date": "2025-10-26",
        "description": "誤植を訂正"
    }
]

HTML を操作する JavaScript

jQuery（v3.7.1）を用いて、外部JSONを読み込み、HTMLの table に更新履歴を表示します。

• 外部ファイルの JSON を読み込み
• HTML の table フォーマットで出力

$(document).ready(function () {
    const $table = $("table[data-json-path]");
    const jsonPath = $table.data("json-path");

    if (!jsonPath) {
        console.warn("更新履歴の JSON パスが指定されていません。");
        return;
    }

    $.getJSON(jsonPath)
        .done(function (data) {
            const $tbody = $("#update-history-body");
            $tbody.empty();

            data.forEach((entry) => {
                const row = `
          <tr>
            <th scope="row">${entry.id}</th>
            <td><time datetime="${entry.date}">${entry.date}</time></td>
            <td>${entry.description}</td>
          </tr>
        `;
                $tbody.append(row);
            });
        })
        .fail(function () {
            $("#update-history-body").html('<tr><td colspan="3">更新履歴の読み込みに失敗しました。</td></tr>');
        });
});

HTML 部分

更新履歴は table 形式で形成しています。tbody 部分を先ほどの JavaScript で書き込んでいきます。

<table class="table table-striped" data-json-path="js/update-history.json">
    <thead>
        <tr class="table-primary">
            <th scope="col">#</th>
            <th scope="col">更新年月日</th>
            <th scope="col">更新内容</th>
        </tr>
    </thead>
    <tbody id="update-history-body">
        <tr>
            <td colspan="3">読み込み中...</td>
        </tr>
    </tbody>
</table>

まとめ

更新履歴を外部JSONで管理することで、Webページの保守性と作業効率が大幅に向上します。

今後は他の共通要素にもこの仕組みを応用し、よりスケーラブルなWeb運用を目指していきます。