【Laravel9×Vue3】本の貸し出しシステム８（日付の処理）

2023年 02月 20日

タグ：

Laravel

Vue

日付の処理

アプリケーションを開発する際に日付の処理が必要なときは多々あります。

まずは、JavaScript で日付を扱うときに必須になる Date オブジェクトについて解説します。

JavaScript の Date オブジェクトとは

JavaScript の Date オブジェクトは、単一の瞬間の時刻を表すオブジェクトです 1。Date オブジェクトは、協定世界時 (UTC) の 1970 年 1 月 1 日からの経過ミリ秒数を表す Number の値を含んでいます。

Date オブジェクトの生成方法

Date オブジェクトを生成するには、new 演算子を使ってインスタンスを作成します。引数によって、現在時刻や指定した日付や時刻などを表す Date オブジェクトが作られます。

/// 現在時刻を表すDateオブジェクト
const now = new Date();

// 指定した日付や時刻を表すDateオブジェクト
const date1 = new Date(2023, 1, 21); // 2023年2月21日
const date2 = new Date('2023-02-21T01:04:48Z'); // ISO形式の文字列
const date3 = new Date(1645400688000); // ミリ秒数

Date オブジェクトの操作方法

Date オブジェクトから日付や時刻を取得したり、設定するときは以下のメソッドを使います。

日は 1~31 がそのまま使えるのに、月の場合は 1 月~12 月に 0~11 の数字に当てられている点に注意が必要です。

const date = new Date(); // 現在時刻

// 日付や時刻の取得
console.log(date.getFullYear()); // 年 (4桁)
console.log(date.getMonth()); // 月 (0～11)
console.log(date.getDate()); // 日 (1～31)
console.log(date.getHours()); // 時 (0～23)
console.log(date.getMinutes()); // 分 (0～59)
console.log(date.getSeconds()); // 秒 (0～59)
console.log(date.getMilliseconds()); // ミリ秒 (0～999)

// 日付や時刻の設定
date.setFullYear(2024); // 年を2024年に設定
date.setMonth(11); // 月を12月に設定
date.setDate(25); // 日を25日に設定
date.setHours(12); // 時間を12時に設定
date.setMinutes(30); // 分数を30分に設定
date.setSeconds(15); // 秒数を15秒に設定
date.setMilliseconds(500); // ミリ秒数を500ミリ秒に設定

日時の計算方法

経過時間や差分時間など、日時の計算方法もあります。

たとえば、下記のように書くことでプログラムの処理に要した時間を計測することができます。

const start = new Date(); // 開始時間

// 処理内容（省略）

const end = new Date(); // 終了時間

// 経過時間（ミリ秒）= 終了時間 - 開始時間
const elapsed = end - start;

この Date オブジェクトを使って、BookDetail 内で日付に関する操作を行なってみます。

本を借りる日を本日とし、返却日を２週間後する場合は下記のようになります。

BookDetail.vue

// 略
methods: {
        async rentBook() {
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";

            const now = new Date();
            const loanDate = now.toLocaleDateString();
            // 返却日は２週間後とする
            // P279を参照
            const twoWeekLater = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 14);
            const returnDate = twoWeekLater.toLocaleDateString();

             // この本を借りることをAPIに送る
            const response =
                await axios.post(
                    url,
                    {
                        book_id: this.$route.params.id,
                        user_id: 2,
                        loan_date: loanDate,
                        return_date: returnDate
                    }
                );
        }
    }

Dateオブジェクトを扱うライブラリを利用する

このDateオブジェクトは仕様が少々煩雑で、扱うのに苦労する点があります。

たとえば、上記で書いた「今日から２週間後」を表すコードをもっと楽に書きたいところです。

Dateオブジェクトを扱うライブラリとして、下記のようなものがあります。

・moment.js
・Day.js
・Luxon
・date-fns

この中で今回は、date-fnsを利用していきます。

インストールとインポート

ターミナルでは前回と同じようにnpmを使い、-Dのオプションを利用します。

npm install -D date-fns

このdate-fnsが持っているaddWeeks()というメソッドを利用して、２週間後を簡単に表現することができます。

BookDetail.vue

import axios from 'axios';
import { addWeeks } from 'date-fns'; // 追加

export default {
    name: 'BookDetail',

    // 中略

    methods: {
        async rentBook() {
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";

            const now = new Date();
            const loanDate = now.toLocaleDateString();
            // 返却日は２週間後とする
            

            // const twoWeekLater = new Date(now.getFullYear(),now.getMonth(),now.getDate()+14);
            const twoWeekLater = addWeek(now,2);

            const returnDate = twoWeekLater.toLocaleDateString();

            // 略
        }
    }

}