コピーライトなどの年号をJavaScriptで自動更新する方法

Webサイトのフッターのコピーライト表記など、今年の年を表示したい場合がありますよね。

HTMLでベタ書きしてもよいのですが、そうすると毎年書き直す必要があります。

そこで今回の記事では、JavaScriptで現在の年を自動更新する方法を紹介します！

サイト上に現在の年を表示する必要がある場合は、ぜひ参考にしてみてください。

現在の年を自動更新する実装コードの紹介と解説

さっそく実装コードを紹介していきます。

ここでは、フッターのコピーライト部分の年号を更新する場合を想定しています。

まずはHTMLから見ていきましょう。

<footer>
  <p>© 2020 - <span id="current-year"></span> Your site name</p>
</footer>

空のspanタグを用意し、current-yearというidを付与します。

この空タグをJavaScriptで取得し、中の年号を自動挿入します。

続いてはJavaScriptのコードを見ていきます。

document.getElementById("current-year").innerText = new Date().getFullYear();

まずHTML上のcurrent-yearというidがついた要素を探します。

現在の年はDateオブジェクトのgetFullYearメソッドで取得できるので、値をinnerTextで書き換えてあげることで完成です！

これらのコードを実行すると、以下のような結果になります。

空のspanタグがある箇所に、現在の年が表示されているのが確認できたかと思います。

これでコードの解説は終わりです。

【1行で実装可能】コピーライトなどの年号をJavaScriptで自動更新する方法

JavaScriptで現在の年を自動更新する方法を紹介しました。

毎年コードを書き換える必要がなくなるので、サイト上に現在年を表示したい場合はぜひこの方法を試してみてください。

今回使用したDateオブジェクトについては、別記事で解説してますのでそちらもどうぞ。

あわせて読みたい

JavaScriptで今日の日付や現在時刻を取得する方法【Dateオブジェクト】 サイト上に今日の日付や、現在時刻を表示したいという場面がありますよね。 今回の記事では、JavaScriptのDateオブジェクトを使って、今日の日付と時間を取得する方法を…