みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験から Web エンジニアに転職し、
現在正社員として 5 年働いています！
JavaScriptの解説シリーズです。
今回は時計の作り方について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- 時計の作り方がわかる
- DOMの書き換えができる
リアルタイムで更新される時計を作ろう！
JavaScriptで時計を作ろう！
Dateクラスをつかおう
JavaScriptで現在日時を取得するにはDateクラスを使用します
クラスをインスタンス化するには以下の構文を使用します
const 変数名 = new クラス名();インスタンス化とは、クラスに実体を持たせることだよ！
Dateクラスが持つメソッド
Date クラスが持つ主要なメソッドは以下になります。
これらを組み合わせることで、時計やカレンダーが作成出来ます。
- 年 → getFullYear()
- 月 → getMonth() + 1 ※0オリジンなので+1が必要
- 日 → getDate()
- 曜日 → getDay() ※日曜日を起点に0〜6が取得される
- 時 → getHours()
- 分 → getMinutes()
- 秒 → getSeconds()
年月日を取得しよう
ここまでで学んだことを活かしてそれぞれの値を取得してみましょう。
// クラスのインスタンス化
const currentDate = new Date();
// 年
const year = currentDate.getFullYear();
// 月
const month = currentDate.getMonth() + 1;
// 日
const day = currentDate.getDate();
// 曜日のリスト
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
// 曜日の番号を取得
const weekNumber = currentDate.getDay();
// 時間
const hour = currentDate.getHours();
// 分
const min = currentDate.getMinutes();
// 秒
const sec = currentDate.getSeconds();
console.log(
year +
"/" +
month +
"/" +
day +
" " +
dayOfWeek[weekNumber] +
"曜日 " +
hour +
":" +
min +
":" +
sec
);時計をリアルタイムで更新しよう！
setInterval関数を使おう
これまでの方法で、関数実行時の時間を取得することができましたが、
このままではリアルタイムで画面に表示することができません。
リアルタイムで画面上に表示するには毎秒関数を実行し、
DOM を書き換える必要があります。
関数を毎秒間隔で実行するには setInterval 関数を使います
■ 構文
setInterval(関数名, 実行間隔※ミリ秒)
404 NOT FOUND – サメハック
Infomation for Engineer🦈
samehack.com
DOMと紐付けよう
See the Pen
Untitled by samehack (@samehack)
on CodePen.
月日時分秒の桁数を2桁に揃えたいので0埋め用関数を使いました。
【コピペでOK】0埋め(0パディング)しよう!【JavaScript】
samehack.com
これでリアルタイムで表示される時計ができたよ！
まとめ
- 現在時刻の取得にはDateクラスを使う
- リアルタイムで画面に表示したい場合はsetInterval関数を使う
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
