1. はじめに
自分は10月よりAPPRENTICE SHIP(内定直結型エンジニア学習プログラム)のカリキュラムに２期生として参加しています。
この記事はオリジナルアプリ開発の備忘録として書いています。
間違いがありましたらご指摘いただけると幸いです
2. 今回の内容
今回は、オリジナルアプリを開発する際に使用したDay.jsについて紹介します。
このライブラリを採用するまでは、JavaScriptの標準機能を使って日本時間と世界標準時（UTC）の時間差を計算していましたが、Day.jsを使うことで、その煩わしさから解放されました。
とても効率的に時間周りのことが実装できたので、共有したいと思います。
3. まずタイムゾーンとは？
タイムゾーンとは、地球を24の時間帯に分け、それぞれの地域で標準時を定めるシステムのことです。タイムゾーンを使用することで、地域ごとに異なる時間を一貫して管理することが可能になります。
UTC (協定世界時)
- UTC（Universal Time Coordinated）は、グリニッジ標準時(GMT)から派生した世界標準時です。
- UTCは、国際的な時間調整の基準として用いられ、原子時計に基づいています。
JST (日本標準時)
- JST（Japan Standard Time）は、UTCに9時間を加えた日本の標準時です。
日本国内では、この時間帯を基準としてすべての公式な時間が設定されます。
4. 簡単に変換してくれるDay.jsを使おう
Day.jsは、日付と時刻を操作するためのJavaScriptライブラリです。特にタイムゾーンの変換に便利な機能を備えています。
使わない場合のコード
JavaScriptのDateオブジェクトを使ってUTCとJSTを手動で変換する例：
// 現在のUTC日時を取得
const now = new Date();
const utc = now.toISOString();
// JSTへ手動で変換（UTC+9）
const jstDate = new Date(now.getTime() + (9 * 60 * 60 * 1000));
const jst = jstDate.toISOString();
使う場合のコード
Day.jsを使って、簡単にUTCとJSTを変換する方法：
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
// UTCの現在時刻を取得
const now = dayjs().utc();
// JSTへ簡単に変換
const jst = now.tz('Asia/Tokyo');
インポートなどで行数は増えてしまいますが、計算部分が省けたりと簡素にかけるのが分かると思います。
5. インストールとインポート
インストール
Day.jsをプロジェクトに追加するには、npmまたはyarnを使用します：
npm install dayjs
# または
yarn add dayjs
インポート
Day.jsと必要なプラグインをプロジェクトにインポートします：
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
6. 書き方
- Day.jsを使った日付と時刻の操作方法の基本：
// 現在の日付と時刻
const now = dayjs();
// 特定のタイムゾーンでの日時
const timeInTokyo = now.tz('Asia/Tokyo');
// formatで形を指定
const formatTimeInTokyo = timeInTokyo.format('YYYY/MM/DD HH:mm');
console.log(formatTimeInTokyo); // 出力例: "2023/05/09 15:00"
formatメソッドの使用時の注意点
formatメソッドは、日時を指定した形式に整形するために使用します。ここで使用する形式指定子には次のような意味があります：
- YYYY: 西暦年を4桁で表示します（例: 2023）
- MM: 月を2桁で表示します（例: 05）。Mを使用すると、先行する0がない形式で表示されます（例: 5）
- DD: 日を2桁で表示します（例: 09）。Dを使用すると、先行する0がない形式で表示されます（例: 9）
- HH: 24時間表記での時間を2桁で表示します（例: 15）
- mm: 分を2桁で表示します（例: 00）
その他の形式指定子
- ss: 秒を2桁で表示します（例: 00）
- a or A: AM/PM表記で午前または午後を表示します（例: AM, PM）
7. まとめ
今回はDayjsについて紹介させて頂きました。
フロントエンドで時間を表示するにはとても便利なものですね。
使い方としてはフォーマット以外にも、アプリ自体の国際化などにも活躍するそうです。
ぜひ、アプリ開発に活用してみてください！