JavaScriptで特定日の曜日を取得する方法16選

JavaScriptを使って特定の日付から曜日を取得する方法 JS
この記事は約28分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptで曜日を取得する基本

JavaScriptで日付や時刻を扱う際に欠かせないのが、曜日の取得です。

Webアプリケーション開発においては、カレンダーの表示や予定の管理など、曜日に関する処理が頻繁に登場します。

しかし、JavaScriptの日付処理はちょっとややこしいところがあり、初心者にとっては少し敷居が高く感じられるかもしれません。

そこで本記事では、JavaScriptで特定の日付から曜日を取得する方法について、基本的な使い方からサンプルコードまで詳しく解説していきます。

日付処理に不慣れなWebエンジニアの方でも、本記事を読み進めていけば曜日の取得方法がスラスラ理解できるはずです。

それでは、一緒にJavaScriptの曜日取得の世界に飛び込んでみましょう！

○Dateオブジェクトを使った曜日の取得

JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。

Dateオブジェクトを使えば、現在の日時を取得したり、指定した日時のオブジェクトを作成したりできます。

曜日の取得も、このDateオブジェクトを使って行います。

Dateオブジェクトには、曜日を取得するためのメソッドとしてgetDay()が用意されています。

getDay()メソッドは、Dateオブジェクトが表す日付の曜日を0から6までの数値で返します。

0が日曜日、1が月曜日、…、6が土曜日に対応します。

○サンプルコード1：getDay()メソッドで数値として曜日を取得

getDay()メソッドの基本的な使い方は次のとおりです。

const date = new Date();
const dayOfWeek = date.getDay();
console.log(dayOfWeek);

実行結果

3

上記のコードでは、まず現在の日時をあらわすDateオブジェクトを作成しています。

そのDateオブジェクトに対してgetDay()メソッドを呼び出すことで、曜日に対応する数値が返されます。

たとえば、実行時の日付が水曜日であれば3が出力されます。

ただ、曜日を数値で表示されてもピンとこないですよね。

もっとわかりやすく曜日を表示するには、getDay()の戻り値を使ってif文で分岐させるのが一般的です。

○サンプルコード2：曜日を日本語で表示

曜日を日本語の文字列で表示するサンプルコードは次のようになります。

const date = new Date();
const dayOfWeek = date.getDay();

let dayOfWeekStr = "";
if (dayOfWeek === 0) {
  dayOfWeekStr = "日曜日";
} else if (dayOfWeek === 1) {
  dayOfWeekStr = "月曜日";
} else if (dayOfWeek === 2) {
  dayOfWeekStr = "火曜日"; 
} else if (dayOfWeek === 3) {
  dayOfWeekStr = "水曜日";
} else if (dayOfWeek === 4) {
  dayOfWeekStr = "木曜日";
} else if (dayOfWeek === 5) {
  dayOfWeekStr = "金曜日";
} else if (dayOfWeek === 6) {
  dayOfWeekStr = "土曜日";
}

console.log(`今日は${dayOfWeekStr}です。`);

実行結果

今日は水曜日です。

getDay()の戻り値を使ってif文で分岐し、曜日に対応する日本語の文字列を表示しています。

これなら一目で曜日がわかりますね。

もちろん、if文の代わりにswitch文を使ってもOKです。

配列を使えばもっとスマートに書くこともできますが、まずはif文で条件分岐の処理に慣れておくことをおすすめします。

○サンプルコード3：曜日を英語で表示

同じ要領で、曜日を英語の文字列で表示することもできます。

サンプルコードは次のとおりです。

const date = new Date();
const dayOfWeek = date.getDay();

const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
console.log(`Today is ${daysOfWeek[dayOfWeek]}.`);

実行結果

Today is Wednesday.

曜日の英語表記を配列で定義しておき、getDay()の戻り値を配列のインデックスとして使うことで、簡潔に曜日を表示できます。

配列を使った方法は、曜日の表示だけでなく、他の様々な場面で応用できるテクニックです。

JavaScriptの配列処理に慣れておくと、コードの可読性や保守性が格段に上がるので、ぜひ覚えておきましょう。

○サンプルコード4：日付から曜日を計算する方法

ここまでは現在の日付に対する曜日の取得方法を見てきましたが、指定した日付の曜日を取得することもできます。

サンプルコードは次のとおりです。

const date = new Date("2023-05-15");
const dayOfWeek = date.getDay();

const daysOfWeek = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
console.log(`2023年5月15日は${daysOfWeek[dayOfWeek]}です。`);

実行結果

2023年5月15日は月曜日です。

Dateオブジェクトのコンストラクタに日付文字列を渡すことで、指定した日付のオブジェクトを作成できます。

あとは現在の日付の場合と同様に、getDay()メソッドを呼び出すだけです。

日付文字列のフォーマットは柔軟で、”YYYY-MM-DD”以外にも”YYYY/MM/DD”などが使えます。

ただし、”YYYY年MM月DD日”の形式は使えないので注意しましょう。

●曜日の表示形式をカスタマイズする

JavaScriptのDateオブジェクトとgetDay()メソッドを使えば、現在の日付や指定した日付の曜日を簡単に取得できることがわかりましたね。

でも、実際のWebアプリケーション開発では、もう少し柔軟に曜日を取得したいケースがよくあります。

たとえば、日付のフォーマットを自由に指定したり、日本語以外の言語で曜日を表示したり、あるいはタイムゾーンを考慮した曜日の取得が必要になったりします。

そこで、ここからは曜日の表示形式をカスタマイズする方法を見ていきましょう。

○サンプルコード5：任意の日付の曜日を取得

先ほどのサンプルコードでは、Dateオブジェクトのコンストラクタに日付文字列を渡して曜日を取得しました。

でも、実はDateオブジェクトのコンストラクタには、年、月、日をそれぞれ数値で指定することもできるんです。

サンプルコードは次のとおりです。

const year = 2023;
const month = 4; // 5月
const date = 15;

const inputDate = new Date(year, month, date);
const dayOfWeek = inputDate.getDay();

const daysOfWeek = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
console.log(`${year}年${month + 1}月${date}日は${daysOfWeek[dayOfWeek]}です。`);

実行結果

2023年5月15日は月曜日です。

Dateオブジェクトのコンストラクタに年、月、日を数値で渡すことで、任意の日付のDateオブジェクトを作成できます。

ただし、月は0から11までの数値で指定することに注意しましょう（0が1月、1が2月、…、11が12月）。

この方法を使えば、HTMLのinput要素などから取得した年、月、日の値をもとに、任意の日付の曜日を取得することができます。

Webアプリケーションの「日付選択」や「カレンダー」の機能を実装する際に役立つテクニックですね。

○サンプルコード6：年月日を指定して曜日を取得

もう一つ、年月日を指定して曜日を取得する方法を見てみましょう。

先ほどのサンプルコードをもとに、日付文字列のフォーマットを変更してみます。

const dateString = "2023/05/15";

const inputDate = new Date(dateString);
const dayOfWeek = inputDate.getDay();

const daysOfWeek = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
console.log(`${dateString}は${daysOfWeek[dayOfWeek]}です。`);

実行結果

2023/05/15は月曜日です。

Dateオブジェクトのコンストラクタに渡す日付文字列のフォーマットを”YYYY/MM/DD”形式に変更しました。

この形式であれば、スラッシュ（/）区切りで年、月、日を指定できます。

“YYYY-MM-DD”形式と同様に、”YYYY/MM/DD”形式の日付文字列もDateオブジェクトで解釈できるので、好みに応じて使い分けましょう。

○サンプルコード7：時刻を考慮した曜日の取得

これまでのサンプルコードでは、時刻を指定せずに曜日を取得していました。

しかし、Dateオブジェクトのコンストラクタには時刻も指定できるんです。

サンプルコードを見てみましょう。

const dateString = "2023-05-15T09:00:00";

const inputDate = new Date(dateString);
const dayOfWeek = inputDate.getDay();

const daysOfWeek = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
console.log(`${dateString}は${daysOfWeek[dayOfWeek]}です。`);

実行結果

2023-05-15T09:00:00は月曜日です。

Dateオブジェクトのコンストラクタに渡す日付文字列に、”T”区切りで時刻を指定しました。

時刻は”hh:mm:ss”形式で指定します。

時刻を指定すると、その時刻に対応する曜日が取得されます。

特定の時刻の予定を管理するWebアプリケーションなどでは、時刻を考慮した曜日の取得が必要になるかもしれません。

○サンプルコード8：タイムゾーンを指定した曜日の取得

最後に、タイムゾーンを指定した曜日の取得方法を見てみましょう。

グローバルなWebアプリケーションを開発する際には、ユーザーのタイムゾーンに合わせて日付や曜日を表示する必要があります。

タイムゾーンを指定するには、Dateオブジェクトのコンストラクタに渡す日付文字列の末尾にタイムゾーンオフセットを追加します。

サンプルコードは次のとおりです。

const dateString = "2023-05-15T09:00:00-07:00";

const inputDate = new Date(dateString);
const dayOfWeek = inputDate.getDay();

const daysOfWeek = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
console.log(`${dateString}は${daysOfWeek[dayOfWeek]}です。`);

実行結果

2023-05-15T09:00:00-07:00は月曜日です。

日付文字列の末尾に”-07:00″を追加しました。

これはUTCからのオフセットを表し、この例ではUTCから7時間遅れたタイムゾーン（アメリカのPacific Daylight Time（PDT）など）を指定していることになります。

逆に、日本標準時（JST）を指定する場合は”+09:00″を追加します。

このように、タイムゾーンオフセットを指定することで、任意のタイムゾーンに合わせた曜日を取得できます。

タイムゾーンを考慮した日付処理は、慣れないうちは少しわかりにくいかもしれません。

でも、グローバルなWebアプリケーションを開発する上では必須のスキルです。

日付文字列とタイムゾーンオフセットの関係を理解して、柔軟な曜日の取得を目指しましょう。

●ライブラリを使用した曜日の取得

ここまでJavaScriptのDateオブジェクトを使った曜日の取得方法を見てきましたが、実はもっと便利な方法があるんです。

それが、日付処理専用のライブラリを使う方法です。

JavaScriptには、Moment.jsやDay.jsといった優れた日付処理ライブラリがあります。

これらのライブラリを使えば、曜日の取得はもちろん、日付の計算やフォーマットの変換など、様々な日付処理を簡単に行えます。

ライブラリを使った曜日の取得方法を身につけておけば、Dateオブジェクトの使い方に悩むことなく、スムーズに日付処理を実装できるようになるでしょう。

それでは、代表的な日付処理ライブラリを使った曜日の取得方法を見ていきましょう。

○Moment.jsを使用した曜日の取得

Moment.jsは、もっとも有名な日付処理ライブラリの一つです。

Moment.jsを使えば、日付のパース、操作、フォーマットなどを直感的に行えます。

Moment.jsを使った曜日の取得は、とてもシンプルです。

まずはMoment.jsで現在の曜日を取得するサンプルコードを見てみましょう。

□サンプルコード9：Moment.jsで現在の曜日を取得

// Moment.jsの読み込み
const moment = require('moment');

// 現在の日付を取得
const now = moment();

// 曜日を取得
const dayOfWeek = now.format('dddd');

console.log(`今日は${dayOfWeek}です。`);

実行結果

今日は水曜日です。

Moment.jsのformat()メソッドを使って、曜日を表す文字列を取得しています。

'dddd'はMoment.jsの日付フォーマットの一つで、曜日の長い表記（例：「月曜日」）を表します。

Moment.jsを使えば、現在の日付から曜日を取得するのはたった数行のコードで実現できます。

Dateオブジェクトを使った場合と比べて、とてもシンプルで読みやすいコードになりますね。

□サンプルコード10：Moment.jsで任意の日付の曜日を取得

Moment.jsを使えば、任意の日付の曜日も簡単に取得できます。

サンプルコードを見てみましょう。

// Moment.jsの読み込み
const moment = require('moment');

// 日付文字列から日付を作成
const date = moment('2023-05-15');

// 曜日を取得
const dayOfWeek = date.format('dddd');

console.log(`2023年5月15日は${dayOfWeek}です。`);

実行結果

2023年5月15日は月曜日です。

Moment.jsのコンストラクタに日付文字列を渡すことで、任意の日付のMomentオブジェクトを作成できます。

あとはformat()メソッドで曜日を取得するだけです。

日付文字列のフォーマットは柔軟で、”YYYY-MM-DD”以外にも”YYYY/MM/DD”や”YYYY年MM月DD日”などが使えます。

Dateオブジェクトと比べると、日付文字列のパースが賢くなっているのがMoment.jsの特徴です。

○Day.jsを使用した曜日の取得

Day.jsは、Moment.jsの軽量版とも呼ばれる日付処理ライブラリです。

Moment.jsと同じようなAPIを持ちながら、より軽量で高速な処理が特徴です。

Day.jsを使った曜日の取得も、Moment.jsとほとんど同じです。

まずは現在の曜日を取得するサンプルコードから見ていきましょう。

□サンプルコード11：Day.jsで現在の曜日を取得

// Day.jsの読み込み
const dayjs = require('dayjs');

// 現在の日付を取得
const now = dayjs();

// 曜日を取得
const dayOfWeek = now.format('dddd');

console.log(`今日は${dayOfWeek}です。`);

実行結果

今日は水曜日です。

Day.jsでもformat()メソッドを使って曜日を取得します。

日付フォーマットの指定方法もMoment.jsと同じです。

Day.jsはMoment.jsと比べてファイルサイズが小さいので、Webアプリケーションの読み込み速度を優先する場合に適しています。

Moment.jsの主要な機能をカバーしつつ、軽量化を図っているのがDay.jsの魅力ですね。

□サンプルコード12：Day.jsで任意の日付の曜日を取得

Day.jsを使って任意の日付の曜日を取得する方法も、Moment.jsとほぼ同じです。

サンプルコードを確認しましょう。

// Day.jsの読み込み
const dayjs = require('dayjs');

// 日付文字列から日付を作成
const date = dayjs('2023-05-15');

// 曜日を取得
const dayOfWeek = date.format('dddd');

console.log(`2023年5月15日は${dayOfWeek}です。`);

実行結果

2023年5月15日は月曜日です。

Day.jsのコンストラクタに日付文字列を渡して、任意の日付のDay.jsオブジェクトを作成します。

あとはformat()メソッドで曜日を取得するだけですね。

日付文字列のフォーマットの柔軟さもMoment.jsと同等です。

“YYYY-MM-DD”以外にも様々なフォーマットが使えるので、日付データのパースが簡単になります。

●よくあるエラーと対処法

JavaScriptで曜日を取得する際、初心者がよくぶつかるエラーがいくつかあります。

せっかく曜日取得のコードを書いても、エラーが出てしまっては元も子もありませんよね。

そこで本章では、曜日取得処理でよく発生するエラーとその対処法を見ていきましょう。

エラーが出たときに慌てず対処できるよう、典型的なエラーパターンを押さえておくことが大切です。

これからご紹介するエラーは、私も初心者の頃に何度も遭遇したものばかりです。

当時は原因がわからずに何時間も悩んだものですが、今となっては懐かしい思い出です。

皆さんには私のような苦労をしてほしくないので、エラー対処のポイントを丁寧に解説していきますね。

○日付のフォーマットが正しくない場合

曜日を取得する際に最もよく発生するエラーが、日付のフォーマットが正しくない場合のエラーです。

Dateオブジェクトのコンストラクタに渡す日付文字列のフォーマットが正しくないと、エラーが発生してしまいます。

たとえば、次のようなコードを実行すると、どのようなエラーが発生するでしょうか。

const dateString = "2023年5月15日";
const date = new Date(dateString);
console.log(date);

実行結果

Invalid Date

Dateオブジェクトのコンストラクタに、”YYYY年MM月DD日”形式の日付文字列を渡したため、”Invalid Date”（無効な日付）というエラーが発生しています。

このエラーを防ぐには、Dateオブジェクトが解釈できる日付文字列のフォーマットを使う必要があります。

具体的には、次のようなフォーマットが使えます。

"YYYY-MM-DD"
"YYYY/MM/DD"
"YYYY-MM-DDTHH:mm:ss"
"YYYY-MM-DDTHH:mm:ss.sssZ"

このように、ハイフン（-）やスラッシュ（/）を区切り文字として使い、年月日を数値で表現します。

また、時刻を含める場合は、”T”で区切って”HH:mm:ss”形式で表現します。

日付のフォーマットを正しく指定することで、エラーを回避できます。

たとえば、先ほどのコードを次のように修正すれば、エラーは発生しません。

const dateString = "2023-05-15";
const date = new Date(dateString);
console.log(date);

実行結果

2023-05-15T00:00:00.000Z

“YYYY-MM-DD”形式の日付文字列を使うことで、正しくDateオブジェクトが作成されました。

このように、日付のフォーマットを正しく指定することがエラー対処の第一歩です。

日付文字列のフォーマットに注意するだけで、多くのエラーを未然に防ぐことができます。

日付のフォーマットが原因でエラーが発生したら、まずは文字列のフォーマットを見直してみましょう。

○存在しない日付を指定した場合

次に注意したいのが、存在しない日付を指定した場合のエラーです。

Dateオブジェクトのコンストラクタに、実在しない日付の値を渡すと、エラーが発生します。

たとえば、次のようなコードを実行すると、どうなるでしょうか。

const dateString = "2023-02-29";
const date = new Date(dateString);
console.log(date);

実行結果

Invalid Date

2023年2月29日は存在しない日付なので、”Invalid Date”エラーが発生しています。

このようなエラーを防ぐには、日付の値が妥当かどうかをチェックする必要があります。

妥当性チェックを行う一つの方法は、DateオブジェクトのgetTime()メソッドを使って、タイムスタンプの値を確認することです。

getTime()メソッドは、Dateオブジェクトが表す日時のタイムスタンプ（1970年1月1日からの経過ミリ秒数）を返します。

存在しない日付のDateオブジェクトに対してgetTime()メソッドを呼び出すと、NaN（Not-a-Number）が返されます。

NaNかどうかは、isNaN()関数を使ってチェックできます。

先ほどのコードに、日付の妥当性チェックを追加してみましょう。

const dateString = "2023-02-29";
const date = new Date(dateString);

if (isNaN(date.getTime())) {
  console.log("Invalid Date");
} else {
  console.log(date);
}

実行結果

Invalid Date

isNaN()関数を使って、DateオブジェクトがNaNかどうかをチェックしています。

これにより、存在しない日付が指定された場合に適切にエラーを検出できます。

実際のWebアプリケーションでは、ユーザー入力から日付の値を受け取ることが多いでしょう。

ユーザー入力をそのままDateオブジェクトに渡すのではなく、必ず妥当性チェックを行うようにしましょう。

存在しない日付を指定されるエラーは、日付入力のUIを工夫することでも防げます。

カレンダーウィジェットを使った日付選択や、年月日のセレクトボックスを用意するなど、ユーザーが存在する日付しか選べないようなUIにすることをおすすめします。

○タイムゾーンの設定ミス

最後は、タイムゾーンの設定ミスによるエラーです。

JavaScriptのDateオブジェクトは、デフォルトでは実行環境のタイムゾーンを使用します。

タイムゾーンの設定を意図しない値にしてしまうと、曜日の計算結果が狂ってしまうことがあります。

たとえば、次のようなコードを実行すると、意図した曜日が得られないことがあります。

const dateString = "2023-01-01T00:00:00";
const date = new Date(dateString);
console.log(date.getDay()); // 0（日曜日）

一見すると問題ないように見えますが、実行環境のタイムゾーンによっては、2023年1月1日00:00:00が日曜日ではなく土曜日になってしまうことがあります。

この問題を回避するには、Dateオブジェクトのコンストラクタに渡す日付文字列に、明示的にタイムゾーンを指定する必要があります。

タイムゾーンを指定するには、日付文字列の末尾にタイムゾーンオフセットを追加します。

たとえば、日本標準時（JST）を指定する場合は、次のようにします。

const dateString = "2023-01-01T00:00:00+09:00";
const date = new Date(dateString);
console.log(date.getDay()); // 0（日曜日）

日付文字列の末尾に”+09:00″を追加することで、JSTを明示的に指定しています。

これにより、実行環境のタイムゾーンに関係なく、意図した曜日を取得できます。

タイムゾーンを指定する別の方法は、Date.UTC()メソッドを使う方法です。

Date.UTC()メソッドは、UTCタイムゾーンの日時を表すDateオブジェクトを作成します。

const date = new Date(Date.UTC(2023, 0, 1, 0, 0, 0));
console.log(date.getUTCDay()); // 0（日曜日）

Date.UTC()メソッドに年、月、日、時、分、秒を渡して、UTCタイムゾーンの日時を指定します。

月は0から11までの数値で指定することに注意しましょう（0が1月、1が2月、…、11が12月）。

作成されたDateオブジェクトの曜日を取得するには、getDay()メソッドではなくgetUTCDay()メソッドを使います。

getUTCDay()メソッドは、UTCタイムゾーンでの曜日を返します。

タイムゾーンの設定ミスは、意図しない動作の原因になりがちなエラーです。

タイムゾーンを明示的に指定することを習慣づけて、エラーを未然に防ぎましょう。

というわけで、曜日取得処理でよく発生するエラーと対処法を3つご紹介しました。

日付のフォーマットや存在しない日付、タイムゾーンの設定など、ちょっとした注意点を押さえておくだけで、多くのエラーを回避できます。

●曜日取得の応用例

JavaScriptで曜日を取得する方法を理解したら、次はその知識を実践で活かしていきたいですよね。

ここからは、曜日取得の応用例をいくつかご紹介します。

実際のWebアプリケーション開発では、カレンダーの表示や祝日の判定、営業日の計算など、曜日に関連する処理が数多く登場します。

曜日取得の基本をマスターしたら、ぜひこれらの応用例にもチャレンジしてみてください。

きっとJavaScriptの日付処理に対する理解が深まるはずです。

それでは、具体的なサンプルコードを交えながら、曜日取得の応用例を見ていきましょう。

○サンプルコード13：特定の曜日の日付を取得

まずは、特定の曜日に対応する日付を取得する方法です。

たとえば、「今月の第2月曜日の日付」や「来月の最終金曜日の日付」を求めるようなケースですね。

このような処理を実装するには、Dateオブジェクトのメソッドを組み合わせて使います。

サンプルコードを見てみましょう。

function getSecondMonday(year, month) {
  const firstDay = new Date(year, month, 1);
  const firstDayOfWeek = firstDay.getDay();
  const secondMonday = new Date(year, month, (1 - firstDayOfWeek + 7) % 7 + 8);
  return secondMonday;
}

const secondMondayOfNextMonth = getSecondMonday(2023, 5);
console.log(secondMondayOfNextMonth); // 2023-06-12

getSecondMonday()関数は、指定された年と月の第2月曜日の日付を返します。

まず、指定された年と月の1日のDateオブジェクトを作成し、その曜日を取得します。

そして、1日の曜日から第2月曜日までの日数を計算し、1日のDateオブジェクトに加算することで、第2月曜日のDateオブジェクトを得ています。

同様の手法を使えば、任意の曜日の日付を取得できます。

曜日に応じた処理を行うWebアプリケーションで役立つテクニックです。

○サンプルコード14：カレンダーの曜日表示

次は、カレンダーの曜日表示への応用です。

Webアプリケーションでカレンダーを表示する際には、曜日の情報が欠かせません。

曜日を取得する処理を使って、カレンダーの曜日表示を実装してみましょう。

function renderCalendar(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const numDays = lastDay.getDate();

  let calendarHtml = "<table>";
  calendarHtml += "<tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>";

  let day = 1;
  for (let week = 0; week < 6; week++) {
    calendarHtml += "<tr>";
    for (let dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
      if (week === 0 && dayOfWeek < firstDay.getDay()) {
        calendarHtml += "<td></td>";
      } else if (day > numDays) {
        calendarHtml += "<td></td>";
      } else {
        calendarHtml += `<td>${day}</td>`;
        day++;
      }
    }
    calendarHtml += "</tr>";
  }

  calendarHtml += "</table>";
  return calendarHtml;
}

const calendarHtml = renderCalendar(2023, 5);
console.log(calendarHtml);

renderCalendar()関数は、指定された年と月のカレンダーのHTMLを生成します。

カレンダーは表形式で表現し、各セルには日付を表示します。

まず、指定された年と月の1日と最終日のDateオブジェクトを作成し、その月の日数を取得します。

そして、曜日に応じて表の各セルに日付を割り当てていきます。

1日の曜日と最終日の日付を使って、空白のセルを適切に配置することで、カレンダーらしい見た目を実現しています。

○サンプルコード15：祝日判定への応用

曜日取得の処理は、祝日判定にも活用できます。

例えば、「今年の海の日は何曜日？」のような質問に答えるWebアプリケーションを作る際に、曜日取得が役立ちます。

下記のサンプルコードでは、指定された年の海の日の曜日を判定しています。

function getMarineDay(year) {
  // 2003年以前は7月20日
  if (year <= 2002) {
    return new Date(year, 6, 20);
  }
  // 2003年以降は7月の第3月曜日
  const firstDay = new Date(year, 6, 1);
  const firstDayOfWeek = firstDay.getDay();
  const marineDay = new Date(year, 6, (1 - firstDayOfWeek + 7) % 7 + 15);
  return marineDay;
}

const marineDay2023 = getMarineDay(2023);
console.log(marineDay2023); // 2023-07-17
console.log(marineDay2023.getDay()); // 1（月曜日）

getMarineDay()関数は、指定された年の海の日のDateオブジェクトを返します。

海の日は、2003年以前は7月20日でしたが、2003年以降は7月の第3月曜日となっています。

この関数では、まず指定された年が2003年以前かどうかを判定し、2003年以前なら単純に7月20日のDateオブジェクトを返します。

2003年以降の場合は、7月1日の曜日を取得し、第3月曜日までの日数を計算して、7月1日のDateオブジェクトに加算しています。

○サンプルコード16：営業日計算への応用

最後は、営業日の計算への応用です。

ビジネスアプリケーションでは、営業日の計算が必要になることがよくあります。

曜日取得の処理を使えば、営業日の計算もスムーズに行えます。

次のサンプルコードでは、指定された日数後の営業日を計算しています。

function addBusinessDays(date, numDays) {
  let count = 0;
  let currentDate = new Date(date);

  while (count < numDays) {
    currentDate.setDate(currentDate.getDate() + 1);
    const dayOfWeek = currentDate.getDay();
    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
      count++;
    }
  }

  return currentDate;
}

const startDate = new Date("2023-06-01");
const endDate = addBusinessDays(startDate, 5);
console.log(endDate); // 2023-06-08

addBusinessDays()関数は、指定された日付から指定された営業日数後の日付を返します。

この関数では、土曜日と日曜日を除く平日のみを営業日としてカウントしています。

関数内では、指定された日付から1日ずつ進めながら、曜日を取得します。

曜日が土曜日（6）でも日曜日（0）でもない場合に、営業日のカウントを増やします。

まとめ

JavaScriptにおける曜日の取得方法について、基本的な使い方からライブラリを使った便利な方法まで詳しく解説しました。

曜日取得の処理で発生しやすいエラーとその対処法も押さえ、実践的なスキルを身につけることができたはずです。

本記事で紹介した様々な方法を活用して、JavaScript力に磨きをかけていきましょう。