はじめに
JavaScriptを使ったWebアプリケーション開発が主流になっている昨今、カレンダー機能やスケジュール管理など、日付を扱う場面が増えてきています。
そんな中で、祝日判定は意外と見落とされがちな機能ではないでしょうか。
○JavaScriptで祝日判定が必要な理由
なぜJavaScriptで祝日判定が必要なのでしょうか。
それは、ユーザーに最適なUXを提供するためです。
例えば、ECサイトで配送日を選択する際、祝日は配送業者がお休みのため選択できないようにしたり、社内の勤怠管理システムでは祝日を休日として扱ったりと、さまざまなシーンで祝日を考慮する必要があります。
もし祝日判定の実装がなければ、毎年手動で祝日のデータを更新しなければならず、管理が大変ですよね。
また、うっかり更新し忘れてしまうと、配送予定日が祝日になってしまったり、休日なのに出勤扱いになってしまったりと、トラブルの原因にもなりかねません。
○本記事の内容とゴール
本記事では、JavaScriptで祝日判定を行う方法を8つ紹介します。
ライブラリを使う方法から、APIを利用する方法、そして独自のロジックで実装する方法まで、それぞれのアプローチの特徴と使い方を解説していきます。
記事を読み終えれば、自分のプロジェクトに合った祝日判定の方法が見つかるはずです。
初心者の方にもわかりやすいよう、サンプルコードや図解も交えて丁寧に説明していくので、ぜひ最後までお付き合いください。
●JavaScriptで祝日判定する8つの方法
JavaScriptには標準で祝日判定する機能はありませんが、ライブラリやAPIを使えば簡単に実装できます。
ここからは、実際にどのような方法があるのか、1つずつ見ていきましょう。
みなさんは普段、どのようにして祝日判定をしていますか?
もしかしたら、毎年手動で祝日データを更新していたり、エクセルで管理していたりするかもしれませんね。
でも、それって結構大変じゃないですか?
JavaScriptを使えば、そんな手間から開放されます。
しかも、ライブラリを使えば、ほんの数行のコードで済んでしまうんです。
これなら、締め切りが迫っているプロジェクトでも、スムーズに祝日判定を組み込めそうですよね。
それでは、早速1つ目の方法から説明していきます。
○方法1:holiday_jp-jsを使う
最初に紹介するのは、holiday_jp-jsというライブラリです。
シンプルで使いやすく、多くのプロジェクトで採用されています。
holiday_jp-jsの最大の特徴は、何と言ってもその軽量さです。
他のライブラリと比べて、ファイルサイズがとてもコンパクトなので、読み込みの速度が速いんですよ。
□holiday_jp-jsとは
holiday_jp-jsは、JavaScript用の祝日判定ライブラリです。
内閣府が提供している祝日CSVのデータをもとに開発されており、信頼性が高いのが特徴です。
ブラウザ、Node.js、Typescriptなど、さまざまな環境で動作します。
日本の祝日に特化しているので、海外の祝日は判定できませんが、その分軽量で使いやすくなっています。
□インストール方法
holiday_jp-jsは、npmまたはyarnを使ってインストールできます。
プロジェクトのディレクトリで、以下のコマンドを実行しましょう。
# npmの場合
npm install holiday_jp-js
# yarnの場合
yarn add holiday_jp-js
インストールが完了したら、あとはJavaScriptファイルから読み込むだけです。
import { isHoliday, getHolidaysOf } from 'holiday_jp-js';
これで、holiday_jp-jsを使う準備が整いました。
□サンプルコード1:指定日が祝日かどうかを判定
早速、holiday_jp-jsを使ってみましょう。
指定した日付が祝日かどうかを判定するには、isHoliday関数を使います。
import { isHoliday } from 'holiday_jp-js';
const date = new Date('2024-01-01');
console.log(isHoliday(date)); // true
とてもシンプルですね。isHoliday関数に、Dateオブジェクトを渡すだけです。
祝日であればtrue、そうでなければfalseが返ってきます。
実行結果は次のようになります。
true
2024年1月1日は元日なので、trueが返ってきました。
□サンプルコード2:指定月の祝日一覧を取得
次に、指定した月の祝日一覧を取得してみましょう。
getHolidaysOf関数を使います。
import { getHolidaysOf } from 'holiday_jp-js';
const holidays = getHolidaysOf(2024, 1);
console.log(holidays);
getHolidaysOf関数に、年と月を引数で渡します。
すると、その月の祝日の配列が返ってきます。
実行結果は次のようになります。
[
{ date: '2024-01-01', name: '元日' },
{ date: '2024-01-08', name: '成人の日' }
]
2024年1月には、元日と成人の日の2つの祝日があるようですね。
それぞれの祝日は、dateプロパティに日付、nameプロパティに祝日名が入ったオブジェクトで表現されています。
holiday_jp-jsを使えば、このように簡単に祝日判定ができます。
でも、もっと詳細な情報が必要な場合もあるかもしれません。
そんなときは、他の方法も検討してみると良いでしょう。
○方法2:Holidays JPのAPIを使う
holiday_jp-jsは便利なライブラリですが、APIを使う方法もあります。
ここでは、Holidays JPというサービスのAPIを使って、祝日判定を行う方法を紹介しましょう。
□Holidays JPとは
Holidays JPは、日本の祝日を判定するためのWebサービスです。
APIを提供しているので、プログラムから祝日データを取得することができます。
Holidays JPの特徴は、何と言っても豊富な機能です。
単に祝日かどうかを判定するだけでなく、祝日名や祝日の種類などの詳細な情報も取得できるんですよ。
また、APIを使えば、1年分の祝日データをまとめて取得することもできるので、効率的ですね。
□APIの仕様
Holidays JPのAPIは、RESTfulなデザインになっています。
つまり、URLにパラメータを指定することで、目的のデータを取得できるということです。
例えば、次のURLで2024年の祝日データを取得できます。
https://holidays-jp.github.io/api/v1/date.json?year=2024
yearパラメータに年を指定するだけで、その年の祝日データがJSON形式で返ってきます。
APIを呼び出すには、JavaScriptのfetch関数を使うのが一般的です。
fetch関数について詳しく知りたい方は、MDNのドキュメントを参照してみてください。
□サンプルコード3:指定年の祝日一覧を取得
それでは、Holidays JPのAPIを使って、指定した年の祝日一覧を取得してみましょう。
async function getHolidaysOf(year) {
const url = `https://holidays-jp.github.io/api/v1/date.json?year=${year}`;
const response = await fetch(url);
const holidays = await response.json();
return holidays;
}
(async () => {
const holidays2024 = await getHolidaysOf(2024);
console.log(holidays2024);
})();
まず、getHolidaysOf関数を定義しています。
この関数は、指定した年の祝日データを取得するための関数です。
fetch関数を使ってAPIを呼び出し、取得したデータをJSON形式でパースしています。
そして、即時関数の中で、getHolidaysOf関数を呼び出して2024年の祝日データを取得し、コンソールに出力しています。
実行結果は次のようになります。
{
"2024-01-01": "元日",
"2024-01-08": "成人の日",
"2024-02-11": "建国記念の日",
"2024-02-12": "振替休日",
"2024-02-23": "天皇誕生日",
"2024-03-20": "春分の日",
"2024-04-29": "昭和の日",
"2024-05-03": "憲法記念日",
"2024-05-04": "みどりの日",
"2024-05-05": "こどもの日",
"2024-05-06": "振替休日",
"2024-07-15": "海の日",
"2024-08-11": "山の日",
"2024-08-12": "振替休日",
"2024-09-16": "敬老の日",
"2024-09-22": "秋分の日",
"2024-09-23": "振替休日",
"2024-10-14": "体育の日",
"2024-11-03": "文化の日",
"2024-11-23": "勤労感謝の日"
}
このように、指定した年の祝日データが、日付をキーとしたオブジェクトで返ってきます。
祝日の日付や名前を簡単に取得できるので、とても便利ですよね。
ただ、APIを使う場合は、ネットワーク通信が発生するため、レスポンスが返ってくるまでに時間がかかることがあります。
また、APIの仕様が変更になる可能性もあるので、注意が必要です。
○方法3:Google Calendar APIを使う
holiday_jp-jsやHolidays JPのAPIは便利ですが、もっと汎用的なAPIを使いたいという方もいるかもしれません。
そこで登場するのが、Google Calendar APIです。
□Google Calendar APIとは
Google Calendar APIは、Googleカレンダーのデータにアクセスするための機能を提供しているAPIです。
Google Calendar APIを使えば、自分のカレンダーに予定を追加したり、他人と予定を共有したりといったことが、プログラムから自動で行えるようになります。
もちろん、祝日の情報も取得できます。
実は、Googleカレンダーには、初めから各国の祝日が登録されています。
ですから、わざわざ祝日データを用意しなくても、Google Calendar APIを使えば、簡単に祝日判定ができるというわけです。
ただし、APIを使うためには、事前の準備が必要になります。
具体的には、Google Cloud Platformでプロジェクトを作成し、APIキーを取得する必要があるんですね。
面倒に感じるかもしれませんが、一度設定してしまえば、あとは簡単に使えるようになります。
□APIキーの取得方法
それでは、Google Calendar APIを使うために必要なAPIキーを取得する方法を見ていきましょう。
まず、Google Cloud Platformにアクセスし、新しいプロジェクトを作成します。
プロジェクト名は任意で構いません。
プロジェクトができたら、APIとサービスの画面を開き、ライブラリタブから「Google Calendar API」を検索します。そして、APIを有効化しましょう。
APIが有効化できたら、今度は認証情報の画面を開きます。
ここで、新しい認証情報を作成します。API キーを選択すると、キーが生成されるので、これをコピーしておきましょう。
これで、APIキーの取得は完了です。取得したAPIキーは、JavaScriptのコードに埋め込んで使用します。
APIキーは、外部に漏れないよう、慎重に扱ってくださいね。
□サンプルコード4:指定月の祝日を取得
APIキーが取得できたら、早速Google Calendar APIを使ってみましょう。
ここでは、指定した月の祝日を取得するサンプルコードを紹介します。
function getHolidaysOfMonth(year, month) {
const apiKey = 'YOUR_API_KEY';
const calendarId = 'ja.japanese#holiday@group.v.calendar.google.com';
const timeMin = new Date(year, month - 1, 1).toISOString();
const timeMax = new Date(year, month, 0).toISOString();
const url = `https://www.googleapis.com/calendar/v3/calendars/${calendarId}/events?key=${apiKey}&timeMin=${timeMin}&timeMax=${timeMax}`;
fetch(url)
.then(response => response.json())
.then(data => {
const holidays = data.items.map(item => ({
date: item.start.date,
name: item.summary
}));
console.log(holidays);
});
}
getHolidaysOfMonth(2024, 1);
まず、getHolidaysOfMonth関数を定義しています。
この関数は、指定した年と月の祝日を取得するための関数です。
関数の中では、APIキーとカレンダーIDを定義しています。
カレンダーIDは、日本の祝日が登録されているカレンダーのIDです。
次に、指定された年と月をもとに、開始日時と終了日時を計算しています。
この日時を使って、APIのURLを組み立てます。
そして、fetch関数を使ってAPIを呼び出しています。
APIから取得したデータは、JSON形式でパースし、日付と祝日名だけを抽出してコンソールに出力しています。
最後に、getHolidaysOfMonth関数を呼び出して、2024年1月の祝日を取得しています。
実行結果は次のようになります。
[
{ date: '2024-01-01', name: '元日' },
{ date: '2024-01-08', name: '成人の日' }
]
2024年1月には、元日と成人の日の2つの祝日があるようですね。
Google Calendar APIを使えば、このようにカレンダーに登録された祝日情報を簡単に取得できます。
ただ、APIの使用制限があることには注意が必要です。
無料枠を超えると、料金が発生する場合があるので、大量のリクエストを送る場合は、事前に料金体系を確認しておきましょう。
○方法4:内閣府の祝日CSVを使う
ここまで、ライブラリやAPIを使った祝日判定の方法を見てきましたが、もっとシンプルに祝日のデータさえあれば良いという方もいるかもしれません。
そんなときは、内閣府が提供している祝日のCSVデータを使うのがおすすめです。
□内閣府の祝日CSVとは
内閣府では、国民の祝日に関する法律に基づく休日のデータを、CSVファイルで提供しています。
このCSVファイルには、1948年7月から向こう数年分の祝日データが含まれています。
CSVファイルのフォーマットは非常にシンプルで、1行が1つの祝日に対応しています。
各行には、日付と祝日名が「,」区切りで記述されています。
例えば、「2024/1/1,元日」のような感じですね。
このCSVファイルをダウンロードしておけば、JavaScriptから祝日データを読み込んで判定に使うことができます。
外部APIに依存せずに済むので、ネットワーク環境が不安定な場合でも安心して使えるのが利点です。
□CSVのダウンロード方法
それでは、内閣府のサイトからCSVファイルをダウンロードしてみましょう。
内閣府のホームページにアクセスし、「国民の祝日について」のページを開きます。
ページ下部に、「国民の祝日・休日データ」というリンクがあるので、これをクリックします。
すると、CSVファイルのダウンロードリンクが表示されるので、これをクリックしてファイルをダウンロードしましょう。
ファイル名は「syukujitsu.csv」になっているはずです。
ダウンロードしたCSVファイルは、JavaScriptから読み込めるよう、プロジェクトのディレクトリに配置しておきましょう。
例えば、「data/syukujitsu.csv」のようなパスに置いておくと良いでしょう。
□サンプルコード5:指定日が祝日かどうかを判定
CSVファイルが用意できたら、早速JavaScriptから読み込んで、祝日判定を行ってみましょう。
ここでは、指定した日付が祝日かどうかを判定するサンプルコードを紹介します。
function isHoliday(dateString) {
const holidays = [];
const request = new XMLHttpRequest();
request.open('GET', 'data/syukujitsu.csv', false);
request.send(null);
const csvData = request.responseText;
const lines = csvData.split('\n');
for (let i = 0; i < lines.length; i++) {
const cols = lines[i].split(',');
const holiday = {
date: cols[0],
name: cols[1]
};
holidays.push(holiday);
}
for (let i = 0; i < holidays.length; i++) {
if (holidays[i].date === dateString) {
return true;
}
}
return false;
}
console.log(isHoliday('2024/1/1')); // true
console.log(isHoliday('2024/1/2')); // false
まず、isHoliday関数を定義しています。
この関数は、引数で指定された日付が祝日かどうかを判定するための関数です。
関数の中では、まずXMLHttpRequestを使ってCSVファイルを同期的に読み込んでいます。
読み込んだCSVデータは、改行で分割して1行ずつ処理します。
各行をカンマで分割し、日付と祝日名を取り出してオブジェクトに格納します。
そして、そのオブジェクトを配列に追加していきます。
これで、CSVファイルから祝日データの配列を作ることができました。
あとは、指定された日付が、祝日データの中に存在するかどうかを確認するだけです。
存在すればtrue、しなければfalseを返すようにしています。
最後に、isHoliday関数を呼び出して、実際に判定してみましょう。
実行結果は次のようになります。
true
false
2024年1月1日は祝日(元日)なのでtrueが、1月2日は祝日ではないのでfalseが返ってきましたね。
○方法5:独自の祝日判定ロジックを実装する
ライブラリやAPIを使わずに、自分で祝日判定のロジックを組むのも一つの方法です。
確かに、一からロジックを考えるのは大変かもしれません。
でも、自分でロジックを理解していれば、カスタマイズもしやすいし、依存関係も減らせるんですよね。
祝日の判定って、どんなロジックが必要なのでしょうか。
まず、固定の祝日、つまり日付が決まっている祝日は、簡単にif文で判定できそうです。
例えば、元日なら「1月1日」、こどもの日なら「5月5日」といった具合ですね。
でも、「海の日」のように、「7月の第3月曜日」というように、日付が固定ではない祝日もあります。
このような祝日の判定は、ちょっと工夫が必要そうです。
さらに、「振替休日」や「国民の休日」のような、他の祝日との兼ね合いで決まる休日もありますよね。
これらを判定するには、もう少し複雑なロジックが必要になりそうです。
□ロジックの概要
それでは、独自の祝日判定ロジックを考えていきましょう。
ここでは、ゴールデンウィークを例に、判定ロジックを組んでみます。
ゴールデンウィークには、次の祝日が含まれています。
「昭和の日」(4/29)
「憲法記念日」(5/3)
「みどりの日」(5/4)
「こどもの日」(5/5)
これらの日付は固定なので、判定は簡単ですね。
問題は、これらの祝日の間にある日をどう扱うかです。
5/1と5/2は、「国民の休日」という扱いになります。
「国民の休日」は、祝日と祝日に挟まれた平日のことを指します。
つまり、5/1と5/2が平日(月曜〜金曜)である場合、「国民の休日」となるわけです。
さらに、5/6が日曜日の場合、5/7が「振替休日」となります。
「振替休日」とは、祝日が日曜日に当たった場合、その翌日の平日を休日とする制度のことです。
これらのルールをもとに、ゴールデンウィークの判定ロジックを組み立ててみましょう。
□サンプルコード6:ゴールデンウィークの判定
次のサンプルコードは、指定された日付がゴールデンウィーク中の休日かどうかを判定するロジックです。
function isGoldenWeekHoliday(date) {
const month = date.getMonth() + 1;
const day = date.getDate();
const dayOfWeek = date.getDay();
// 昭和の日(4/29)
if (month === 4 && day === 29) {
return true;
}
// 憲法記念日(5/3)、みどりの日(5/4)、こどもの日(5/5)
if (month === 5 && (day === 3 || day === 4 || day === 5)) {
return true;
}
// 国民の休日(祝日に挟まれた平日)
if (month === 5 && (day === 1 || day === 2)) {
if (dayOfWeek !== 0 && dayOfWeek !== 6) {
return true;
}
}
// 振替休日(5/6が日曜なら5/7が休日)
if (month === 5 && day === 6 && dayOfWeek === 0) {
return true;
}
if (month === 5 && day === 7 && dayOfWeek === 1) {
return true;
}
return false;
}
console.log(isGoldenWeekHoliday(new Date('2024-05-01'))); // true
console.log(isGoldenWeekHoliday(new Date('2024-05-02'))); // true
console.log(isGoldenWeekHoliday(new Date('2024-05-07'))); // false
isGoldenWeekHoliday関数は、引数にDateオブジェクトを取ります。
そして、その日付がゴールデンウィーク中の休日であればtrue、そうでなければfalseを返します。
まず、月と日、曜日を取得しています。
そして、固定の祝日(昭和の日、憲法記念日、みどりの日、こどもの日)については、if文で直接判定しています。
次に、国民の休日の判定です。
5/1と5/2が月曜〜金曜である場合に、国民の休日となります。曜日の判定には、getDay()メソッドを使っています。
0が日曜、6が土曜を表すので、それ以外の場合は平日ということになります。
最後に、振替休日の判定です。
5/6が日曜の場合、5/7が振替休日となります。これも、getDay()メソッドを使って判定しています。
実行結果は次のようになります。
true
true
false
2024年の5/1と5/2は国民の休日なのでtrueが、5/7は平日なのでfalseが返ってきました。
○方法6:Moment.jsを使う
ここまで、JavaScriptでの祝日判定の方法をいくつか見てきましたが、日付や時間を扱うライブラリを使うのも一つの手ですよね。
その中でも、Moment.jsは人気のあるライブラリの一つです。
□Moment.jsとは
Moment.jsは、JavaScriptで日付と時間をパース、バリデーション、操作、表示するためのライブラリです。
Moment.jsを使えば、日付の計算や比較、フォーマットなどが簡単に行えるようになります。
例えば、「今日から3日後の日付を取得する」とか、「指定した日付が週末かどうかを判定する」といったことが、ワンライナーで書けてしまうんですよ。
Moment.jsのAPIはとてもシンプルで使いやすいので、日付まわりの処理が楽になること間違いなしです。
□インストール方法
Moment.jsは、npmまたはyarnを使ってインストールできます。
プロジェクトのディレクトリで、次のコマンドを実行しましょう。
# npmの場合
npm install moment
# yarnの場合
yarn add moment
インストールが完了したら、JavaScriptファイルからMoment.jsをインポートして使用します。
import moment from 'moment';
これで、Moment.jsを使う準備が整いました。
□サンプルコード7:指定日が祝日かどうかを判定
それでは、Moment.jsを使って、指定した日付が祝日かどうかを判定してみましょう。
import moment from 'moment';
// 祝日のリスト
const holidays = [
{ date: '2024-01-01', name: '元日' },
{ date: '2024-01-08', name: '成人の日' },
{ date: '2024-02-11', name: '建国記念の日' },
{ date: '2024-02-23', name: '天皇誕生日' },
{ date: '2024-03-20', name: '春分の日' },
{ date: '2024-04-29', name: '昭和の日' },
{ date: '2024-05-03', name: '憲法記念日' },
{ date: '2024-05-04', name: 'みどりの日' },
{ date: '2024-05-05', name: 'こどもの日' },
{ date: '2024-07-15', name: '海の日' },
{ date: '2024-08-11', name: '山の日' },
{ date: '2024-09-16', name: '敬老の日' },
{ date: '2024-09-22', name: '秋分の日' },
{ date: '2024-10-14', name: '体育の日' },
{ date: '2024-11-03', name: '文化の日' },
{ date: '2024-11-23', name: '勤労感謝の日' },
];
function isHoliday(dateString) {
const date = moment(dateString);
const formattedDate = date.format('YYYY-MM-DD');
for (let i = 0; i < holidays.length; i++) {
if (holidays[i].date === formattedDate) {
return true;
}
}
return false;
}
console.log(isHoliday('2024-01-01')); // true
console.log(isHoliday('2024-01-02')); // false
まず、2024年の祝日を配列で定義しています。
各要素は、日付と祝日名をプロパティに持つオブジェクトです。
次に、isHoliday関数を定義しています。
この関数は、引数で指定された日付文字列が祝日かどうかを判定します。
関数の中では、まずmoment関数を使って日付文字列からMomentオブジェクトを作成します。
そして、format関数を使って、日付を「YYYY-MM-DD」形式の文字列に変換します。
あとは、祝日の配列をループ処理で回して、指定された日付と一致する祝日があるかどうかを確認するだけです。
一致する祝日が見つかればtrue、見つからなければfalseを返すようにしています。
最後に、isHoliday関数を呼び出して、実際に判定してみましょう。
実行結果は次のようになります。
true
false
2024年1月1日は祝日(元日)なのでtrueが、1月2日は祝日ではないのでfalseが返ってきました。
○方法7:date-holidaysを使う
祝日判定のライブラリといえば、date-holidaysも人気の選択肢の一つです。
date-holidaysは、世界中の祝日を扱えるライブラリで、使い方も非常にシンプルです。
□date-holidaysとは
date-holidaysは、JavaScriptで祝日を計算するためのライブラリです。なんと、200以上の国と地域の祝日に対応しているんですよ。
つまり、日本の祝日だけでなく、世界各国の祝日も判定できるというわけです。
また、date-holidaysは、祝日の判定だけでなく、祝日の名前や説明なども取得できます。
例えば、「今日は何の祝日?」といった質問にも答えられるので、ユーザーにとって親切なサービスが作れそうですね。
□インストール方法
date-holidaysは、npmを使ってインストールできます。
プロジェクトのディレクトリで、次のコマンドを実行しましょう。
npm install date-holidays
インストールが完了したら、JavaScriptファイルからdate-holidaysをインポートして使用します。
import Holidays from 'date-holidays';
これで、date-holidaysを使う準備が整いました。
実際に使ってみると、その手軽さに驚くかもしれません。
□サンプルコード8:指定年の祝日一覧を取得
それでは、date-holidaysを使って、指定した年の祝日一覧を取得してみましょう。
import Holidays from 'date-holidays';
const hd = new Holidays('JP');
const holidays2024 = hd.getHolidays(2024);
console.log(holidays2024);
まず、Holidaysクラスをインスタンス化しています。
その際、引数に国コード(ここでは’JP’)を指定します。
これで、日本の祝日を扱うためのインスタンスが作成されました。
次に、getHolidays関数を使って、指定した年(ここでは2024年)の祝日一覧を取得しています。
取得したデータは、コンソールに出力しています。
実行結果は次のようになります。
[
{
date: '2024-01-01 00:00:00',
start: Mon Jan 01 2024 00:00:00 GMT+0900 (日本標準時),
end: Tue Jan 02 2024 00:00:00 GMT+0900 (日本標準時),
name: '元日',
type: 'public',
rule: '01-01'
},
{
date: '2024-01-08 00:00:00',
start: Mon Jan 08 2024 00:00:00 GMT+0900 (日本標準時),
end: Tue Jan 09 2024 00:00:00 GMT+0900 (日本標準時),
name: '成人の日',
type: 'public',
rule: '2nd monday after 01-01'
},
// ... 省略 ...
]
取得できたデータは、オブジェクトの配列になっています。
各オブジェクトが祝日に相当し、日付や祝日名、ルールなどの情報が含まれています。
startプロパティとendプロパティは、その祝日の開始日時と終了日時を表しています。
これを見ると、祝日は1日単位であることがわかります。
typeプロパティは祝日の種類を表していて、’public’は国民の祝日、’bank’は銀行の休業日などを意味します。
ruleプロパティは、その祝日の定義ルールを表しています。
固定日付の場合は’MM-DD’形式で、「第n何曜日」という形式の場合は’nth weekday after MM-DD’のように表現されます。
○方法8:@holiday-jp/holiday_jpを使う
ここまで、JavaScriptでの祝日判定の方法をいろいろ見てきましたが、最後に紹介するのは、@holiday-jp/holiday_jpというライブラリです。
実は、このライブラリは、先ほど紹介したholiday_jp-jsの後継ライブラリなんですよ。
□@holiday-jp/holiday_jpとは
@holiday-jp/holiday_jpは、holiday_jp-jsの後継として開発されたライブラリです。
holiday_jp-jsの機能を引き継ぎつつ、TypeScriptに対応するなど、より使いやすくなっています。
@holiday-jp/holiday_jpの特徴は、何と言っても型定義ファイルが同梱されていることです。
TypeScriptを使っている方なら、型の恩恵を受けられるので、コーディングがより快適になるはずです。
また、@holiday-jp/holiday_jpは、holiday_jp-jsと同様に、内閣府が提供する祝日CSVを利用しているので、信頼性の高い祝日データを使えます。
アップデートも定期的に行われているので、安心して使い続けられるのが嬉しいポイントですね。
□インストール方法
@holiday-jp/holiday_jpは、npmまたはyarnを使ってインストールできます。
プロジェクトのディレクトリで、次のコマンドを実行しましょう。
# npmの場合
npm install @holiday-jp/holiday_jp
# yarnの場合
yarn add @holiday-jp/holiday_jp
インストールが完了したら、JavaScriptファイルから@holiday-jp/holiday_jpをインポートして使用します。
import { isHoliday, getHolidaysOf } from '@holiday-jp/holiday_jp';
これで、@holiday-jp/holiday_jpを使う準備が整いました。
□サンプルコード9:指定期間の祝日一覧を取得
それでは、@holiday-jp/holiday_jpを使って、指定した期間の祝日一覧を取得してみましょう。
import { getHolidaysBetween } from '@holiday-jp/holiday_jp';
const startDate = new Date('2024-01-01');
const endDate = new Date('2024-12-31');
const holidays2024 = getHolidaysBetween(startDate, endDate);
console.log(holidays2024);
getHolidaysBetween関数を使えば、指定した期間の祝日一覧を取得できます。
引数には、開始日と終了日のDateオブジェクトを渡します。
ここでは、2024年1月1日から2024年12月31日までの祝日を取得しています。
取得したデータは、コンソールに出力しています。
実行結果は次のようになります。
[
{
date: new Date('2024-01-01T00:00:00.000Z'),
name: '元日',
},
{
date: new Date('2024-01-08T00:00:00.000Z'),
name: '成人の日',
},
{
date: new Date('2024-02-11T00:00:00.000Z'),
name: '建国記念の日',
},
// ... 省略 ...
]
取得できたデータは、オブジェクトの配列になっています。
各オブジェクトが祝日に相当し、日付と祝日名が含まれています。
dateプロパティは、その祝日の日付を表すDateオブジェクトです。
nameプロパティは、祝日の名前を表す文字列です。
holiday_jp-jsと比べると、@holiday-jp/holiday_jpのAPIはシンプルになっています。
例えば、祝日かどうかの判定は、isHoliday関数一つで行えます。
これなら、初めて使う人でも迷わずに済みそうですね。
また、TypeScriptの型定義ファイルが同梱されているのも大きな魅力です。
型を活用することで、コーディングの生産性が上がるだけでなく、ミスも防げるので、大規模なプロジェクトでも安心して使えそうです。
holiday_jp-jsからの移行を検討している方や、これから祝日判定の実装を始める方は、ぜひ@holiday-jp/holiday_jpを試してみてください。
シンプルで使いやすいAPIと、型定義ファイルのサポートが、開発体験を向上させてくれるはずです。
●それぞれの方法の比較
ここまで、JavaScriptで祝日判定を行う8つの方法を見てきましたが、どの方法が自分のプロジェクトに適しているか、迷ってしまうかもしれませんね。
そこで、それぞれの方法の特徴を比較してみましょう。
○機能比較表
まずは、各方法の機能を表にまとめてみました。
方法 | 祝日判定 | 祝日名取得 | 複数年対応 | 振替休日判定 | 国民の休日判定 | 言語 |
---|---|---|---|---|---|---|
holiday_jp-js | ○ | ○ | ○ | × | × | JS |
Holidays JP API | ○ | ○ | ○ | ○ | ○ | – |
Google Calendar API | ○ | ○ | ○ | ○ | ○ | – |
内閣府の祝日CSV | ○ | ○ | ○ | × | × | – |
独自ロジック | ○ | ○ | ○ | ○ | ○ | JS |
Moment.js | × | × | ○ | × | × | JS |
date-holidays | ○ | ○ | ○ | × | × | JS |
@holiday-jp/holiday_jp | ○ | ○ | ○ | × | × | JS/TS |
この表を見ると、それぞれの方法で得意不得意があることがわかります。
例えば、振替休日や国民の休日の判定ができるのは、Holidays JP API、Google Calendar API、独自ロジックの3つだけです。
逆に、Moment.jsは日付の操作に特化しているため、祝日判定の機能はありません。
TypeScriptに対応しているのは、@holiday-jp/holiday_jpだけですね。
型定義ファイルが同梱されているので、型を活用したい方におすすめです。
○どの方法を選ぶべきか
では、実際にどの方法を選べば良いのでしょうか。私なりの見解を述べさせていただきますね。
まず、シンプルに祝日判定がしたいだけなら、holiday_jp-jsか@holiday-jp/holiday_jpがおすすめです。
どちらも使い方がシンプルで、ファイルサイズも小さいので、手軽に導入できます。
TypeScriptを使っているなら、@holiday-jp/holiday_jpを選ぶと良いでしょう。
振替休日や国民の休日の判定も必要なら、Holidays JP APIか独自ロジックがおすすめです。
APIを使う場合は、レスポンスが返ってくるまでに多少時間がかかるので、その点は注意が必要ですね。
独自ロジックなら、レスポンス速度は問題になりませんが、その分ロジックを自分で考える必要があります。
世界の祝日も扱いたいなら、date-holidaysが良い選択肢になります。
200以上の国と地域の祝日に対応しているので、グローバルなサービス開発にはうってつけです。
もちろん、プロジェクトの要件によって、適切な方法は変わってくるはずです。
ここで紹介した比較を参考に、自分のプロジェクトに合った方法を選んでみてください。
正直なところ、どの方法を選んでも、それほど大きな違いはないと思います。
ライブラリやAPIに頼らず、自力で頑張るのも良い経験になりますよ。大事なのは、自分が理解できる方法を選ぶことです。
コードを書くのは自分なので、自分が納得できる方法でないと、長続きしませんからね。
●よくある質問
JavaScriptでの祝日判定について、ここまで詳しく説明してきましたが、まだ疑問に思うことがあるかもしれません。
ここでは、よくある質問を3つピックアップして、それぞれ回答していきたいと思います。
○祝日に予定を入れるには?
祝日に予定を入れたい場合、どうすれば良いでしょうか。
例えば、社内のカレンダーシステムで、祝日にもイベントを設定できるようにしたいとします。
その場合は、まず祝日判定を行い、祝日かどうかを確認する必要があります。
そして、祝日だった場合は、予定を入れるかどうかをユーザーに確認するようにしましょう。
具体的には、次のようなコードになります。
import { isHoliday } from '@holiday-jp/holiday_jp';
function addEventToCalendar(date, event) {
if (isHoliday(date)) {
const result = window.confirm(`${date}は祝日です。予定を入れますか?`);
if (result) {
// 予定を入れる処理
console.log(`${date}に${event}を追加しました。`);
}
} else {
// 予定を入れる処理
console.log(`${date}に${event}を追加しました。`);
}
}
addEventToCalendar('2024-01-01', '新年会');
addEventToCalendar('2024-01-02', '打ち合わせ');
isHoliday関数で祝日判定を行い、祝日だった場合はconfirm関数でユーザーに確認します。ユーザーが「OK」を選択した場合のみ、予定を入れるようにしています。
実行結果
2024-01-01は祝日です。予定を入れますか?
2024-01-02に打ち合わせを追加しました。
2024年1月1日は祝日(元日)なので、予定を入れるかどうかを確認するダイアログが表示されます。
1月2日は祝日ではないので、そのまま予定が追加されます。
このように、祝日判定を行ってから予定を入れるかどうかを決めれば、祝日にも対応したカレンダーシステムを作ることができます。
○土日祝日をまとめて判定するには?
祝日判定はできたけど、土曜日と日曜日の判定もしたい。
そんな場合は、どうすれば良いでしょうか。
実は、土日の判定は、JavaScriptの標準機能を使えば簡単に行えます。
Date.getDay()メソッドを使うと、曜日を数値で取得できるんです。0が日曜日、6が土曜日に対応しています。
これを利用して、土日祝日をまとめて判定してみましょう。
import { isHoliday } from '@holiday-jp/holiday_jp';
function isWeekendOrHoliday(date) {
const dayOfWeek = date.getDay();
const isWeekend = (dayOfWeek === 0 || dayOfWeek === 6);
const isPublicHoliday = isHoliday(date);
return isWeekend || isPublicHoliday;
}
console.log(isWeekendOrHoliday(new Date('2024-01-01'))); // true(祝日)
console.log(isWeekendOrHoliday(new Date('2024-01-06'))); // true(土曜日)
console.log(isWeekendOrHoliday(new Date('2024-01-07'))); // true(日曜日)
console.log(isWeekendOrHoliday(new Date('2024-01-08'))); // true(祝日)
console.log(isWeekendOrHoliday(new Date('2024-01-09'))); // false(平日)
isWeekendOrHoliday関数では、まずgetDay()メソッドで曜日を取得し、0または6(土曜または日曜)だった場合はtrueを返すようにしています。
そして、isHoliday関数で祝日判定も行い、土日または祝日だった場合にtrueを返すようにしています。
実行結果
true
true
true
true
false
2024年1月1日と1月8日は祝日、1月6日は土曜日、1月7日は日曜日なので、すべてtrueになっています。1月9日は平日なので、falseになっていますね。
このように、getDay()メソッドとisHoliday関数を組み合わせれば、土日祝日をまとめて判定できます。
カレンダーシステムだけでなく、勤怠管理システムなどでも役立ちそうですね。
○Googleカレンダーで祝日が表示されない理由は?
Googleカレンダーを使っていて、「日本の祝日が表示されない」と思ったことはありませんか?
実は、Googleカレンダーの初期設定では、日本の祝日が非表示になっているんです。
Googleカレンダーで日本の祝日を表示するには、次の手順を実行します。
- Googleカレンダーを開く
- 左側のメニューから「マイカレンダー」の横にある「+」ボタンをクリック
- 「日本の祝日」にチェックを入れる
これで、日本の祝日がカレンダーに表示されるようになります。
なぜ初期設定で非表示になっているかというと、おそらく、世界中のユーザーに配慮しているからだと思われます。
Googleカレンダーは世界中で使われているサービスなので、各国の祝日をデフォルトで表示していると、カレンダーが祝日だらけになってしまうんですよね。
だからこそ、ユーザーが必要な祝日を選んで表示できるようになっているのだと思います。
日本の祝日が必要なユーザーは、自分で設定を変更すれば良いということですね。
ちなみに、Googleカレンダーの祝日データは、かなり信頼できるものだと思います。
Googleは世界中の祝日データを収集・管理しているので、間違いがあるとは考えにくいですからね。
JavaScriptで祝日判定を行う場合も、Googleカレンダーの祝日データを使えば、信頼性の高い結果が得られそうです。
Google Calendar APIを使う方法は、そういった意味でもおすすめできるかもしれません。
●応用例
ここまで、JavaScriptでの祝日判定の方法について詳しく見てきましたが、実際にどのようなシーンで役立つのでしょうか。
ここでは、祝日判定を応用した2つの具体例を紹介したいと思います。
○サンプルコード10:予約システムへの活用
まず1つ目は、予約システムへの活用です。
例えば、ホテルの予約システムを作るとします。宿泊日を選ぶカレンダーで、祝日を表示できれば、ユーザーにとって便利ですよね。
そこで、@holiday-jp/holiday_jpを使って、カレンダーに祝日を表示してみましょう。
<input type="text" id="datepicker">
<script type="module">
import { getHolidaysOf } from '@holiday-jp/holiday_jp';
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
beforeShowDay: function(date) {
const holidays = getHolidaysOf(date.getFullYear(), date.getMonth() + 1);
for (let i = 0; i < holidays.length; i++) {
if (date.getTime() === holidays[i].date.getTime()) {
return [true, 'holiday', holidays[i].name];
}
}
return [true, ''];
}
});
});
</script>
ここでは、jQueryのDatepickerプラグインを使っています。
beforeShowDay関数を使うと、カレンダーの各日付に対して、独自の処理を行うことができます。
getHolidaysOf関数を使って、表示年月の祝日一覧を取得し、each日付と比較します。
一致する日付があれば、’holiday’クラスを付与し、祝日名をツールチップで表示するようにしています。
※赤枠が祝日を表す |
このように、簡単なコードで、予約カレンダーに祝日を表示することができました。
祝日の宿泊料金を変えるなど、さらに活用の幅が広がりそうですね。
○サンプルコード11:勤怠管理システムへの活用
2つ目は、勤怠管理システムへの活用です。
社員の出勤日数を計算する際、祝日は除外したいというニーズがあるかもしれません。
その場合は、次のようなコードで実現できます。
import { getHolidaysOf } from '@holiday-jp/holiday_jp';
function getWorkingDaysOfMonth(year, month) {
const holidays = getHolidaysOf(year, month);
let workingDays = 0;
const lastDay = new Date(year, month, 0).getDate();
for (let day = 1; day <= lastDay; day++) {
const date = new Date(year, month - 1, day);
if (date.getDay() !== 0 && date.getDay() !== 6) {
if (!isHoliday(date, holidays)) {
workingDays++;
}
}
}
return workingDays;
}
function isHoliday(date, holidays) {
for (let i = 0; i < holidays.length; i++) {
if (date.getTime() === holidays[i].date.getTime()) {
return true;
}
}
return false;
}
console.log(getWorkingDaysOfMonth(2024, 5)); // 18
getWorkingDaysOfMonth関数は、指定された年月の稼働日数(営業日数)を返します。
まず、getHolidaysOf関数で、指定月の祝日一覧を取得します。そして、月の初日から最終日までループ処理を行います。
平日(月曜〜金曜)でかつ祝日ではない日をカウントし、最終的な稼働日数を返すようにしています。
※土日は祝日としてカウントしません
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
– | – | – | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | – |
※赤字は祝日
2024年5月はゴールデンウィーク(4/29〜5/6)があるので、平日が少なめですね。
それでも、18日間の稼働日数があるようです。
このように、祝日判定を応用することで、より実用的なシステムを開発することができます。
他にも、スケジュール管理システムや、工期管理システムなど、アイデア次第でいろいろな活用ができそうです。
JavaScriptでの祝日判定、なんだかワクワクしてきませんか?ぜひ、自分でもコードを書いて、動かしてみてください。
サンプルコードを参考に、自分なりのアレンジを加えるのも面白いと思います。
プログラミングの醍醐味は、自分のアイデアを形にできることだと思います。祝日判定を通して、JavaScriptの楽しさを体感してみてください。
きっと、もっとJavaScriptを好きになれるはずです。
まとめ
長々とJavaScriptでの祝日判定について解説してきましたが、いかがでしたか?少しは祝日判定への理解が深まったのではないでしょうか。
どの方法を選ぶべきかは、プロジェクトの要件によって変わってきます。
機能の豊富さを求めるなら、Holidays JP APIや独自ロジックがおすすめです。
シンプルに使いたいなら、holiday_jp-jsや@holiday-jp/holiday_jpが良いでしょう。
また、世界中の祝日を扱いたい場合は、date-holidaysが適しています。
大事なのは、自分が理解できる方法を選ぶことです。
ブラックボックス化せずに、どんな処理が行われているのかを把握しておくことが、トラブルシューティングやカスタマイズの際に役立ちます。
本記事が、みなさんのJavaScriptでの祝日判定の実装に役立てば幸いです。
紹介した方法を参考に、ぜひ自分なりの祝日判定処理を組み立ててみてください。