JavaScript学習の記録　日付を（曜日も）表示させたい

こんにちは朱夏です。

今回は、JavaScriptを使ってサイトに日付を表示させてみたいと思います。

朱夏

日付を自動で表示してるサイトとかあるよね。

JavaScriptなら実装出来ないかな？

実を言うと、LPサイト作成の参考に色々ググって調べていると「キャンペーンは〇月×日まで！お早めに！！」といった謳い文句をよく見かけるのですが、締切当日が毎日更新されててなんだこれってなったのがきっかけて調べました^_^;

実装自体は、過去にJavaScriptの学習で時計を作ったことがあるので、それの応用で作れそうです。
それではいってみましょう。

表示枠の作成

最初にHTMLで表示枠を作成していきます。
コードはこちら。

<!----- メインコンテンツ ----->
<div class="container">
   <h1>日付表示</h1>
   <div class="row p-5">
      <div class="col bg-danger text-light">
         <p id="view_day"></p>
      </div>
   </div>
</div>
<!----- メインコンテンツ END ----->

</div>

実際に日付を表示する<p>タグには要素を特定できるようにid=”view_day”を指定しました。

JavaScriptのコード

それでは、メインのJavaScriptを書いていきます。

'use strict';

// 曜日の配列
var week = [ "（日）", "（月）", "（火）", "（水）", "（木）", "（金）", "（土）" ]
// タイムデータ取得
var now = new Date();
// タイムデータから何月かを取得
var mon = now.getMonth()+1;
// タイムデータから日付を取得（3日後）
var day = now.getDate()+3;
// タイムデータから曜日情報を取得（3日後）
var weekday = now.getDay()+3;

// オーバーフロー処理
if(weekday > 6) {
    weekday = weekday - 7;
} else {
    // 何もしない;
}

// 表示テキスト生成
var view = "キャンペーンは" + mon + "月" + day + "日" + week[weekday] + "まで！"; 

console.log( now ); 
console.log( mon ); 
console.log( day ); 
console.log( weekday ); 
console.log( view ); 

//HTMLに出力
document.getElementById("view_day").innerHTML = view;

'use strict';

// 曜日の配列

var week = [ "（日）", "（月）", "（火）", "（水）", "（木）", "（金）", "（土）" ]

// タイムデータ取得

var now = new Date();

// タイムデータから何月かを取得

var mon = now.getMonth()+1;

// タイムデータから日付を取得（3日後）

var day = now.getDate()+3;

// タイムデータから曜日情報を取得（3日後）

var weekday = now.getDay()+3;

// オーバーフロー処理

if(weekday > 6) {

weekday = weekday - 7;

} else {

// 何もしない;

}

// 表示テキスト生成

var view = "キャンペーンは" + mon + "月" + day + "日" + week[weekday] + "まで！";

console.log( now );

console.log( mon );

console.log( day );

console.log( weekday );

console.log( view );

//HTMLに出力

document.getElementById("view_day").innerHTML = view;

今回書いたのはこんな感じです。
最初に変数を指定。
変数ごとに何を入れているのか説明していきます。

week

ここには曜日を配列として7個格納しています。
配列は原則「日～土」の順で書いておきます。

理由は後述します。

now

現在のタイムデータを取得します。
その瞬間の年月日時分秒曜日まで、様々な情報を取得する事が出来ます。

mon

月の情報を取得しています。
nowで取得したタイムデータの中から、月の情報だけを取り出しています。
最後に+1しているのは、月は0～11でカウントしているからです。

day

日付の情報を取得しています。
こちらも、nowで取得したデータから、日付の情報だけを取り出しています。
日付のカウントは0からではありませんが、3日後の日付を表示させるために+3しています。

weekday

曜日の情報を取得しています。
曜日は日曜を0として土曜の6までの数字で取得されます。
こちらも3日後の曜日が欲しいので+3しています。

オーバーフロー処理

次にオーバーフロー処理として、条件分岐を使っています。
これは、曜日情報を取得した時に+3していると曜日の情報である0～6を超えた数値になってしまうのを防ぐために行っています。

例えば、今日が金曜日だったとすると取得した曜日情報は5なので、それに+3で8が変数weekdayに代入されます。

このままだと8個目の曜日配列が存在しないため、正常に曜日が表示されません。

そこで、もし変数weekdayが6を超過していた場合は、weekdayから-7する処理を書きました。
else（そうでない場合）は何もしないで処理を終了します。

elseの処理が空のままでも問題なく動作するか心配だったのですが、ちゃんと動きました。

オーバーフロー処理の問題点
今回実装したオーバーフロー処理は、7日以上あとの日付を指定すると曜日が破綻します。
これを回避するには、weekdayの数値を7で割ったあまりの値を取得出来れば解決するのですが、時間とスキルが足りず断念しました。

view

ここに、HTMLに書き出すテキストを代入しています。
値を代入した各変数と文字列を組み合わせて作っています。

この中でポイントはweek[weekday]の部分です。
weekに代入している配列の中から、weekdayの数値の場所にある配列を使います。

代入した配列には、左から順に0, 1, 2, …..　とナンバリングされています。
つまり今回配列を代入した変数weekは、以下7つの変数を作成したのと同じなのです。

week[0]　←　”日”
week[1]　←　”月”
week[2]　←　”火”
week[3]　←　”水”
week[4]　←　”木”
week[5]　←　”金”
week[6]　←　”土”

たとえば、2/19(水)は3なので、その3日後は6になります。
オーバーフローしていないので処理はなし。
そしてweek[weekday(=6)]なので、”土”が入ることになります。

実行結果はこんな感じになります。

あとがき

というわけで日付を表示させるJavaScriptを作ってみました。
LP作成以外にも、お問い合わせフォームの回答期限表示「本日のお問い合わせは〇月×日(※)曜日までに回答いたします。」といった使い方なんかも出来そうですね。

本日のまとめはこちら。

タイムデータ全体は　new Date();　で取得
月や日付は個別で変数に代入
曜日は配列と組み合わせる
オーバーフロー処理は改善の余地あり

こんなところです。

今回は以上です。
次回もよろしくお願いします。