前書き

タイトルのとおり、JavaScriptで「秒数」から「〇〇日〇〇時〇〇分〇〇秒」に変換する方法を解説します。

SNSなどにこのような日付時間表記が使われていますが、考えてみると意外とも難しかったりします。 ライブラリなどがあれば活用しても良いですが、この程度の内容だと自分で実装した方が早いと思います。

ソースコード

下記のコードで実装できます。

// 秒数をセット
const second = 200000

// 秒数から、d:日付 h:時間 m:分 s:秒を計算
const d = Math.floor(second / (60*60*24))
const h = Math.floor(second / (60*60)) % 24
const m = Math.floor(second / 60) % 60　
const s = second % 60

// 時間、分、秒を2桁の左0埋め
const hName = (`00${h}`).slice(-2)
const mName = (`00${m}`).slice(-2)
const sName = (`00${s}`).slice(-2)

// 出力
console.log(`${d}日 ${hName}時 ${mName}分 ${sName}秒`)

// 出力結果
// 2日 07時 33分 20秒

解説

ポイント1 - 秒数から各時間の計算

const d = Math.floor(second / (60*60*24))
const h = Math.floor(second / (60*60)) % 24
const m = Math.floor(second / 60) % 60　
const s = second % 60

各時間の計算は上記の通りにすれば上手く算出できます。理解するのに少し頭を使いますが、電卓を叩きながら確認すると納得できると思います。

式だけだとわかりにくいので、上記の式を言葉で表してみました。

• 日・・・「元の秒数」を「1日間の秒数(60×60×24)」で割ったときの整数部分
• 時・・・「元の秒数」を「1時間の秒数(60×60)」で割り、整数部分を24で割ったときの余り部分
• 分・・・「元の秒数」を「1分間の秒数(60)」で割り、その整数部分を60で割ったときの余り部分
• 秒・・・「元の秒数」を「1分間の秒数(60)」で割った余り部分

完璧に理解しなくても大丈夫ですが、少しは分かっておくと応用が効くかもしれません。

ポイント2 - 2桁の左0埋め

「05分」や「07秒」のように、各時間が1桁の場合に左に0を付けて見やすくする表記は以下の部分で実装しています。

const hName = (`00${h}`).slice(-2)
const mName = (`00${m}`).slice(-2)
const sName = (`00${s}`).slice(-2)

slice(-2)は、後ろから2文字を取るという処理なので、2秒なら002 → 02、20秒なら0020 → 20という変換になります。

• Array.prototype.slice() - JavaScript | MDN

まとめ

このような処理は、独自で一度だけ作成して外部ファイルとしておくと他のプロジェクトでも使いまわせるので理解しておくだけで役に立ちます。

今回の内容と同じものが、こちらでツールとして公開していますのでよかったら使ってみてください。