IP03-06 ネットワークで広がるWebページ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Day.js 日付サンプル</title>

    <!-- Day.js を CDN から読み込む -->

    
    <style>
        body {
            font-family: sans-serif;
            background-color: #f5f5f5;
            padding: 30px;
        }

        .box {
            background-color: #ffffff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        input {
            padding: 5px;
            width: 80px;
        }

        button {
            padding: 6px 12px;
            margin-left: 10px;
        }
    </style>
</head>
<body>

    <h1>Day.js 日付の表示</h1>

    <!-- 今日の日付 -->
    <div class="box">
        <h2>① 今日の日付</h2>
        <p id="today"></p>
    </div>

    <!-- n日後の日付 -->
    <div class="box">
        <h2>② n日後の日付</h2>
        <p>
            何日後？：
            <input type="number" id="days" value="7"> 日
            <button onclick="showFutureDate()">表示</button>
        </p>
        <p id="future"></p>
    </div>

    <script>
        // 今日の日付を表示



        // n日後の日付を表示する関数
       
        





    </script>

</body>
</html>

作成手順

ステップ1. CDN を使って Day.js を読み込む
ステップ2. JavaScript で現在の日付を表示する

それではステップ1から行きましょう。

ステップ1 CDN を使って Day.js を読み込む

Day.js は JavaScript のライブラリなので、 <script>タグで読み込みます。

<head> タグの8行目に、次の1行を追加しましょう。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

SweetAlert2 と同じで、CDNから読み込んでるんだね！

そうです。ライブラリによって使い方は違いますが、 CDNで読み込む流れは共通しています。

ステップ2 現在の日付を表示する

次に、Day.js を使って今日の日付を表示してみましょう。

次のプログラムを58、59行目に当てはめてみましょう。

const today = dayjs().format('YYYY年MM月DD日');
document.getElementById('today').textContent = today;

プログラムのポイント

58行目

現在の日付をコンピュータから取得し、表示形式を指定しています。

dayjs()：現在の時刻をコンピュータから取得する

format()：日付の表示形式を指定する
59行目

58行目で取得した現在時刻をWebページに当てはめています。

確認しよう

ファイルを保存して、ブラウザで開いてみましょう。

今日の日付が表示されていれば成功です！

ステップ3 n日後の日付を表示する

次に、Day.js を使って日付の計算を行い、表示してみましょう。

今回は、n日後の数字を入力して計算します。

処理手順は次のようになります。

n日後の日付を計算し表示する処理の手順

1. 入力された数値を取得する
2. 取得した数値を現在日付に加算し、日付の表示形式を指定します。
3. n日後の日付を指定したHTMLの場所に当てはめます。

下記のプログラムを62行目に当てはめてみましょう。

 function showFutureDate() {
    const n = document.getElementById('days').value;
    const futureDate = dayjs().add(n, 'day').format('YYYY年MM月DD日');
    document.getElementById('future').textContent = n + '日後の日付は ' + futureDate + ' です。';
}

プログラムのポイント

63行目

入力された値を取得します。
64行目

日付を加算し、n日後の日付を求めます。

.add(n,'day')は n を日付として加算するという意味です。

確認しよう

ファイルを保存して、ブラウザで開いてみましょう。

今日の日付が表示されていれば成功です！

正しく実装できると次のように表示されます。

Day.jsのサンプルページを開く

まとめ

Day.js は日付・時刻を簡単に扱えるライブラリ
CDN を使うことで、すぐに利用できる
Webページに「今の日時」を表示するのに便利

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる