Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

指定された日の曜日を得る

日付を取り扱うスクリプトを書くとき、指定の日が何曜日なのかを表示したいことがあります。
曜日は日付から計算可能ですが、自力で計算するまでもなく、JavaScriptなら簡単に曜日が得られます。(^_^;)

JavaScriptでDateオブジェクトから曜日を得る方法はとても簡単で、以下のようにgetDayメソッドを使えば良いだけです。

var wday = dateObject.getDay();

上記のように書くと、変数「wday」に、Dateオブジェクト「dateObject」が示す日付の『曜日』が数値で格納されます。
曜日を表す文字列が直接入るわけではなく、0~6までの数値(0が日曜日・1が月曜日……6が土曜日)が入ります。

したがって、曜日を文字列で得たい場合には、以下のように曜日の文字列を並べた適当な配列を用意しておいて、それを使うのが良いでしょうね。

// 曜日を表す文字列の配列を作っておく
var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];
// 日付オブジェクトから曜日を得る
var wday = dateObject.getDay();
alert("指定の日は、" + WeekChars[wday] + "です。");

こうすると、Dateオブジェクト「dateObject」が示す日付の曜日を、日本語の曜日文字列で表示することができます。もちろん、配列の中身を書き換えれば、英語でもフランス語でも何でも使えます。
例えば、今日の曜日を表示するのであれば、以下のように書けば良いでしょう。

var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];
var nowDate = new Date(); // 今日の日付
var wday = nowDate.getDay(); // 曜日を得る
alert("今日は、" + WeekChars[wday] + "です。");

これを実際に表示すると、以下のようになります。

これで、今日の曜日が得られるはずです。

指定の日付から曜日を得る方法

さて、ここまでくれば、指定の日付の曜日を得るのはとても簡単です。
ユーザから指定日(年月日)の入力を受け付けて、それを元にDateオブジェクトを作って、getDayメソッドで曜日を得れば良いだけです。
例えば以下のように書けば良いでしょう。

まず、入力欄として、年月日それぞれの入力フォームをinput要素で作っておきます。個別のid名を割り振るのを忘れないようにして下さい。

<input type="text" id="userYear">年
<input type="text" id="userMonth">月
<input type="text" id="userDate">日
<input type="button" value="上記の日付の曜日を調べる" onclick="showUserWeekDay();" />

ボタンクリックで、以下に作成するshowUserWeekDay関数が呼ばれます。
showUserWeekDay関数では、以下のようにgetElementByIdメソッドを使ってユーザの入力した年月日を得て、Dateオブジェクトを作り、曜日を求めます。

function showUserWeekDay() {
   // 曜日の配列を作る
   var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];

   // ユーザの入力を得る
   var inputYear = document.getElementById("userYear").value;
   var inputMonth = document.getElementById("userMonth").value;
   var inputDate = document.getElementById("userDate").value;

   // 入力された数値から日付オブジェクトを作る
   var userDate = new Date( inputYear, inputMonth-1, inputDate );

   // 日付と曜日を表示する
   alert("指定された「" +
      userDate.getFullYear() + "年" +
      (userDate.getMonth()+1) + "月" +
      userDate.getDate() + "日」は、" +
      WeekChars[userDate.getDay()] + "です。");
}

まあ、実際に使う際には、もうちょっとエラー処理(ユーザが入力した文字列が数字ではなかった場合などの処理)が必要でしょうけども。(上記の最後で、わざわざgetFullYearメソッドやgetMonthメソッドを使って、日付オブジェクトから年月日を得るようにしているのは、ユーザの入力を直接表示するのを避けるためです。)
なお、Dateオブジェクトを生成する際、月の数値は「0が1月、1が2月……11が12月」を表すので、1を引くのを忘れないように注意して下さい。(^_^;;; この紛らわしい仕様はもうちょっと何とかならなかったんですかね。(^_^;)

上記のソースを使って、ユーザが入力した日付の曜日を表示させるフォームを表示すると、以下のようになります。年月日欄に数値を入れて試してみて下さい。


ちなみに上記では、多少の(とても簡単な)エラー処理を加えてあって、自然数以外が入った場合にはエラーメッセージを表示するようにしてあります。
なお、「32日」などカレンダーとしてあり得ない数値が入力された場合でも、それなりに表示されるようになっています。これは、JavaScriptのDateオブジェクトの柔軟さ(仕様)のおかげです。^^;
例えば、2014年2月51日と指定すると、2014年3月23日として解釈されます。カレンダーとして成立しない「余分な日数」分を単純に足し算して、カレンダーとして成立する日付に変換してくれるわけですね。(^_^;)

上記では、最後に「指定された日付」をアラートに表示させる際に、getDateメソッドやgetMonthメソッドを使って、「Dateオブジェクトから改めて年月日を取り出す」ように記述しているため、ユーザが「51日」などと入力しても、ちゃんと「カレンダー的に成立する日付」が表示されます。(^_^;)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど