にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

指定された日の曜日を得る [日付・時刻]

日付を取り扱うスクリプトを書くとき、指定の日が何曜日なのかを調べたい(表示したい)ことがあります。曜日は日付から計算可能ですが、JavaScriptなら自力で計算するまでもなく簡単に曜日が得られます。(^_^;) 方法はとても簡単で、何らかの日付が表されたDateオブジェクトに対してgetDayメソッドを使うだけです。

ある特定の日の曜日を得る方法

日付を取り扱うスクリプトを書くとき、指定の日が何曜日なのかを表示したいことがあります。
曜日は日付から計算可能ですが、自力で計算するまでもなく、JavaScriptなら簡単に曜日が得られます。(^_^;)
JavaScriptでDateオブジェクトから曜日を得る方法はとても簡単で、以下のようにgetDayメソッドを使えば良いだけです。

var dObj = new Date( /* 何らかの日付 */ );
var wDay = dObj.getDay();

上記のように書くと、変数「wDay」に、Dateオブジェクト「dObj」が示す日付の『曜日』が数値で格納されます。
曜日を表す文字列が直接入るわけではなく、0~6までの数値(0が日曜日・1が月曜日……6が土曜日)が入ります。
したがって、曜日を文字列で得たい場合には、以下のように曜日の文字列を並べた適当な配列を用意しておいて、それを使うのが良いでしょうね。

JavaScriptソース

// 曜日を表す文字列の配列を作っておく
var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ];

// 日付オブジェクトから曜日を得る
var dObj = new Date( /* 何らかの日付 */ );
var wDay = dObj.getDay();
alert("指定の日は、" + WeekChars[wDay] + "です。");

こうすると、Dateオブジェクト「dObj」が示す日付の曜日を、日本語の曜日文字列で表示することができます。もちろん、配列の中身を書き換えれば、英語でもフランス語でも何でも使えます。

/* 何らかの日付 */部分には、何も書かなければ「その瞬間の日時」を表すDateオブジェクトになります。"2017/06/15"のような日付文字列を指定すれば「その日時」を表したDateオブジェクトになります。(後述)

今日の曜日を得るJavaScriptソース

例えば、今日の曜日を表示するのであれば、以下のように書けば良いでしょう。

JavaScriptソース

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

上記のJavaScriptをボタンクリックで実行されるようにすると、例えば以下のようになります。

ボタンを押せば、今日の曜日がアラートボックスに表示されます。

指定の日付から曜日を得るHTML+JavaScriptソース

さて、ここまでくれば、指定の日付の曜日を得るのはとても簡単です。ユーザから指定日(年月日)の入力を受け付けて、それを元にDateオブジェクトを作って、getDayメソッドで曜日を得れば良いだけです。
例えば以下のように書けば良いでしょう。
まず、入力欄として、年月日それぞれの入力フォームをinput要素で作っておきます。入力された値をJavaScript側から取得できるように、各入力欄に固有のid名を割り振るのを忘れないようにして下さい。

HTMLソース

<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オブジェクトを作り、曜日を求めます。

JavaScriptソース

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()] + "です。");
}

まあ、実際に使う際には、もうちょっとエラー処理(ユーザが入力した文字列が数字ではなかった場合や、数字であっても日付として成立しない値だったなどの処理)が必要でしょうけども。

上記では、「32日」などカレンダーとしてあり得ない数値が入力された場合でも、それなりに表示されます。例えば、「2014年2月51日」を指定すると、2014年3月23日として解釈されます。カレンダーとして成立しない「余分な日数」分を単純に足し算して、カレンダーとして成立する日付に変換してくれるわけですね。(^_^;)
これはあえてそういう工夫を加えたわけではなく、単にDateコンストラクタの仕様です。
なお、上記のJavaScriptソースでは、最後に「指定された日付」をアラートボックスに表示させる際、getDateメソッドやgetMonthメソッドを使って「Dateオブジェクトから改めて年月日を取り出す」ように記述しているため、ユーザが「51日」などと入力していても、ちゃんとカレンダー的に成立する日付が表示されます。(^_^;)

※Dateオブジェクトを生成する際、月の数値は「0が1月、1が2月……11が12月」を表すので、ユーザの入力値から1を引くのを忘れないように注意して下さい。(^_^;;; この紛らわしい仕様はもうちょっと何とかならなかったんですかね?(^_^;)

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


ちなみに上記では、多少の(とても簡単な)エラー処理を加えてあって、自然数以外が入った場合にはエラーメッセージを表示するようにしてあります。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---