今回の記事は、
- Javascriptを使って曜日を扱いたい
- Javascriptを使って、今日が何曜日かを取得したい
という方に向けた記事になっています。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Javascriptを使って曜日を取得する方法
Javascriptを使って曜日を取得するには、Dateオブジェクトに対してgetDay()メソッドを使用するのですが、ただ使用するだけでは曜日は取得できません。
(Javascriptでの日時の扱い方は【Javascript】日時を取得する方法(Dateクラスを使おう)にて詳しく解説していますので、こちらもぜひご覧ください。)
Dateオブジェクトに対してそのままgetDay()メソッドを使用すると、以下のような結果が返ってきます。
getDay()メソッドの戻り値
const today = new Date()
console.log(today.getDay())
=> 3
そう、getDay()メソッドはその曜日に応じて “0〜6” の数値を返してくるのです。
注意点としては、数値が “0” から始まるということと、以下の通り「日曜日」から始まるということです。
getDay()の戻り値 | 曜日 |
---|---|
0 | 日曜日 |
1 | 月曜日 |
2 | 火曜日 |
3 | 水曜日 |
4 | 木曜日 |
5 | 金曜日 |
6 | 土曜日 |
上記の結果を踏まえると、 曜日の配列を作り、その添え字を指定することで曜日を取得することができます。
getDay()メソッドで曜日を取得する方法
const days = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]
const today = new Date()
console.log(days[today.getDay()])
=> "水曜日"
このように、あらかじめ曜日の配列を作成し、getDay()メソッドの戻り値を添え字として指定することで曜日が取得できるようになるのです。
なお、よく日付を記載する際に使用される「(水)」のような形を取得するのであれば、以下のように文字列を使用することでも対応可能です。
const days = "日月火水木金土"
const today = new Date()
console.log(days[today.getDay()])
=> "水曜日"
これは、文字列に対して添え字を指定することで、指定した番目の文字を取得することができるためです。
【応用編】本日の日付を取得してみよう【コピペで動きます】
さて、Javascriptで曜日を取得する方法を把握いただいたところで、続いてはそれを応用して、本日の日付を取得してみましょう。
なお、getDay()メソッド以外のメソッドは【Javascript】日時を取得する方法(Dateクラスを使おう)で詳しくご紹介していますので、こちらも併せてご確認くださいね。
実装コード
<p id="test-text"></p>
<button onClick="showDate()">本日の日付を表示</button>
<script>
function showDate() {
const text = document.getElementById("test-text")
const today = new Date()
const days = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"]
const date = `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日(${days[today.getDay()]})`
text.innerText = date
}
</script>
動作確認用
上記のボタンを押していただくと、本日の日付がきちんと表示されているかと思います。
やっていること自体は非常にシンプルですので、まずはコピペからでも大丈夫ですので、自分なりに色々とアレンジしてみてくださいね。
最後に
さて、ここまで、Javascriptを使って曜日を取得する方法について解説してきましたがいかがでしたか?
Javascript側で便利なメソッドを用意してくれているため、とても簡単かつ直感的に使用できるのがお分かり頂けたかと思います。
ただし、その仕様を正しく把握しておかないと曜日がずれたりしてしまいますので、その点はくれぐれもご注意くださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!