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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptで今年から3年後、5年後のような形で年数を動的に出力したいな。良い方法ないかな?

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

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

本記事でやりたいこと

ページにアクセスがあった年を基準とし、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年後までの年数を動的に出力する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら