【超初心者向け】たった3行でできる！JavaScriptで現在年を表示する方法

2024-05-23

JavaScriptとHTMLを使って現在年をウェブサイトに表示する最短の方法

HTML

<!DOCTYPE html>
<html>
<head>
  <title>現在年を表示</title>
</head>
<body>
  <p id="currentYear"></p>

  <script>
    // JavaScript コードをここに記述
  </script>
</body>
</html>

JavaScript

const currentYearElement = document.getElementById('currentYear');
const currentDate = new Date();
const year = currentDate.getFullYear();
currentYearElement.textContent = year;

解説

HTML:
JavaScript:
- const currentYearElement = document.getElementById('currentYear'); で、HTMLで作成した要素を取得します。
- const currentDate = new Date(); で、現在の日付を取得します。
- const year = currentDate.getFullYear(); で、現在の日付から年のみを抽出します。
- currentYearElement.textContent = year; で、取得した年をHTML要素に書き込みます。

このコードは、JavaScriptで現在の日付を取得し、そこから年のみを抽出して、HTML要素に書き込むというシンプルなものです。コードは短く読みやすく、初心者でも理解しやすいでしょう。

補足

より多くのフォーマットオプションを提供したい場合は、toLocaleString() メソッドを使用できます。
より複雑な日付処理が必要な場合は、Moment.jsなどのライブラリを使用すると便利です。

このコード例を参考に、ぜひご自身のウェブサイトで現在年を表示してみてください。

<!DOCTYPE html>
<html>
<head>
  <title>現在年を表示</title>
</head>
<body>
  <p id="currentYear"></p>

  <script>
    // JavaScript コードをここに記述
  </script>
</body>
</html>

const currentYearElement = document.getElementById('currentYear');
const currentDate = new Date();
const year = currentDate.getFullYear();
currentYearElement.textContent = year;

説明

このコードは以下のように動作します。

HTML部分で、id="currentYear"というIDを持つ<p>要素を作成します。この要素内に、現在年が出力されます。
JavaScript部分で、以下の処理が行われます。
- new Date()を使って、現在の日付を取得します。
- getFullYear()を使って、現在の日付から年のみを抽出します。
- textContentプロパティを使って、取得した年を<p>要素の中に出力します。

実行結果

このコードを実行すると、ブラウザに以下のような表示が現れます。

このコードは、最もシンプルな方法で現在年を表示する方法です。より多くのフォーマットオプションを提供したい場合は、toLocaleString()メソッドを使用できます。

JavaScriptとHTMLを使って現在年をウェブサイトに表示するその他の方法

方法 1: テンプレートリテラルを使用する

<!DOCTYPE html>
<html>
<head>
  <title>現在年を表示</title>
</head>
<body>
  <p>現在の年は ${new Date().getFullYear()} です。</p>
</body>
</html>

この方法は、テンプレートリテラルを使用して、現在年を直接HTMLに書き込むというものです。テンプレートリテラルは、バッククォート (```) で囲まれた文字列リテラルです。リテラル内では、変数や式を埋め込むことができます。

方法 2: Date.now() 関数を使用する

<!DOCTYPE html>
<html>
<head>
  <title>現在年を表示</title>
</head>
<body>
  <p>現在の年は ${(new Date().getTime() - new Date(0, 0, 1)).toPrecision(4)} です。</p>
</body>
</html>

この方法は、Date.now() 関数を使用して、現在時刻を取得し、そこから年を計算する方法です。 Date.now() 関数は、エポックからのミリ秒数を返します。新しい Date オブジェクトを 0 年 0 月 1 日で初期化し、そのミリ秒数と現在時刻のミリ秒数の差を取ることで、経過した年数を計算できます。

方法 3: Moment.js ライブラリを使用する

<!DOCTYPE html>
<html>
<head>
  <title>現在年を表示</title>
  <script src="[無効な URL を削除しました]"></script>
</head>
<body>
  <p>現在の年は <script>document.write(moment().format('YYYY'));</script> です。</p>
</body>
</html>