【JavaScript】今年からn年後までの年数を動的に出力する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで今年からn年後までの年数を動的に出力する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

ページにアクセスがあった年を基準とし、n年後までの年数を動的に出力します。アクセスがあった日が2022年9月11日で、今年を含む3年後までの年数を出力する場合、下記のような出力結果となります。

2022
2023
2024

3年後まで出力する必要があるケースはあまりないですが、今年と来年のような年数であれば、商品の予約ページや採用ページで年月日を入力する際に便利かなと思います。

今年からn年後までの年数を動的に出力する

前項の内容をJavaScriptでコーディングします。今年を含む3年後までの年数を動的に出力します。

JavaScript

const date = new Date();
//今年の年数を4桁で取得
const year = date.getFullYear();
//n年後の数値を代入
const end = 3;

for(let i = 0; i < 3; i++){
    console.log(year + i);
}

これでn年後までの年数を出力することができました。

セレクトボックスに年数を表示する

コンソールに出力するだけではあまり実用性がないので、例としてセレクトボックスに今年を含む3年後までの年数を出力してみます。

HTML

<select id="year" name="year">
    <option value="">----</option>
</select>

JavaScript

//select要素を取得
const select = document.querySelector('#year');
//Dateオブジェクトを取得
const date = new Date();
//今年の年数を取得
const year = date.getFullYear();
//n年後の数値を代入
const end = 3;

for(let i = 0; i < 3; i++){
    //option要素生成
    let option = document.createElement("option");
    //option要素のテキストを設定
    option.text = year + i;
    //option要素の値を設定
    option.value = year + i;
    //option要素をselect要素の末尾に追加
    select.appendChild(option);
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果を確認すると、セレクトボックスに3年後までの年数が追加されていますね。n年後の年数を増減したい場合は、変数endの値を変更してご利用ください。

最後に

今年から今年を含む何年後かまでの年数を動的に出力する処理が必要になるケースはほとんどありません。私の経験上でも1～2回あったかなくらいのものです。今回はサイト制作の要件にフォーム入力欄のセレクトボックスの年数を動的に表示するというのが含まれていたので、記事にまとめた次第です。同じように年数を動的に表示するページやフォームを制作される場合に参考にしていただければ幸いです。

以上、JavaScriptで今年からn年後までの年数を動的に出力する方法のご紹介でした！