JavaScriptで簡単年数更新：コピーライト自動更新の実装

javascript 2024/01/20

1 JavaScriptを使用して年数を取得
2 HTMLに年数を表示する要素を作成
3 JavaScriptで年数を更新する関数を作成
4 自動更新の実装
5 まとめ

ウェブサイトのフッターに表示されるコピーライト年数を手動で更新するのは面倒ですよね。この記事では、JavaScriptを使用してコピーライト年数を自動的に更新する方法を解説します。手間いらずでサイトの最新情報を維持しましょう。

JavaScriptを使用して年数を取得

まず、JavaScriptを使って現在の年数を取得します。

const currentYear = new Date().getFullYear();

このコードは、現在の年数を currentYear 変数に格納します。

HTMLに年数を表示する要素を作成

次に、HTMLファイルに年数を表示するための要素を作成します。

<footer>
    <p>© <span id="copyright-year"></span> Your Website Name</p>
</footer>

年数が表示される <span> 要素には id="copyright-year" が設定されています。

JavaScriptで年数を更新する関数を作成

JavaScriptで年数を更新する関数を作成します。

function updateCopyrightYear() {
    const currentYear = new Date().getFullYear();
    document.getElementById('copyright-year').textContent = currentYear;
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', updateCopyrightYear);

この関数は、ページが読み込まれたときに呼び出され、現在の年数でコピーライトを更新します。

自動更新の実装

最後に、1年ごとに年数が自動的に更新されるようにするために、setInterval を使用します。

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', function () {
    updateCopyrightYear();

    // 1年ごとに実行
    setInterval(updateCopyrightYear, 1000 * 60 * 60 * 24 * 365);
});

これにより、ページ読み込み時に初回の年数更新が行われ、その後は1年ごとに setInterval で指定した間隔で更新されます。