Javascriptで、日時を取得するのは、グローバルのDate関数で簡単にできますが、
それを表示するのに、まあまあめんどくさい工程を踏まないといけません。
Webシステムを作っている時に、JS処理でいいので、時刻表示を出したいって言われることが度々あり、
PHPの出力楽だな〜と思ったので、いつものように自分で使いやすいものを作っておこうと思って作った関数を紹介します。
ソースコード
/**
* JSの日付処理
*
* # 日付フォーマット処理
* [How to]
* import { Datetime } from "./datetime"
* - new Datetime().format("Y-m-d H:i:s")
* > 2025-01-01 02:03:04
* [Options]
* - Y : 2025
* - y : 25
* - M : "Jan"
* - m : 01
* - D : "Wed"
* - w : "Wed"
* - d : 01
* - H : 02
* - h : 2
* - i : 03
* - s : 04
*/
export class Datetime{
constructor(datetime_string){
this.datetime = datetime_string ? Date.parse(datetime_string) : new Date()
}
get Y(){
return this.datetime.getFullYear()
}
get y(){
return this.datetime.getFullYear().slice(-2)
}
get M(){
return this.month_string[this.datetime.getMonth()]
}
get m(){
return ("0"+ (this.datetime.getMonth()+1)).slice(-2)
}
get D(){
return this.day_string[this.datetime.getDay()]
}
get w(){
return this.D
}
get d(){
return ("0"+ this.datetime.getDate()).slice(-2)
}
get H(){
return ("0"+this.datetime.getHours()).slice(-2)
}
get h(){
return this.datetime.getHours() % 12
}
get i(){
return ("0"+this.datetime.getMinutes()).slice(-2)
}
get s(){
return ("0"+this.datetime.getSeconds()).slice(-2)
}
/**
* Like PHP
* "Y-m-d H-i-s"
*/
format(str){
for(const key of "YyMmDwdHhis"){
if(str.indexOf(key) === -1){continue}
const reg = new RegExp(key, "g")
str = str.replace(reg, this[key])
}
return str
}
month_string = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
day_string = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
}
使い方
ソースヘッダにも書いてあるんですが、ブログでも説明しておきます。
基本的には、scriptタグのtype="module"で動作する事を前提にしています。
1. モジュールのインポート（同一階層に設置した場合の想定）
import { Datetime } from "./datetime"
2. 任意のフォーマットで値を受け取る
# 今現在の時刻を取得
const date_string = new Datetime().format("Y-m-d H:i:s")
# 任意の日時で取得
const date_string = new Datetime("2024-01-01 00:00:00").format("Y-m-d H:i:s")
これだけ。
ちなみに、オプション部分は、PHPのdate関数でよく使うものをできるだけ入れています。
Y : 2025 (4桁年)
y : 25 (2桁年)
M : "Jan" (Januaryの略)
m : 01 (2桁月)
D : "Wed" (Wednesdayの略)
w : "Wed" (Dと同じ)
d : 01 (2桁日)
H : 02 (2桁時)
h : 2 (ゼロパディング無し時)
i : 03 (2桁分)
s : 04 (2桁秒)
解説
"Ymdhis"や、"Y-m-d H:i:s"で、任意のフォーマット文字列で返してくれるPHPのdate関数が使いやすいのに、
javascriptは、getFullYear()や、getMonth()と、一つずつ処理しないといけないので、これはライブラリにすることで、
開発時間の削減に大いにつながるハズですよね。
おまけに、カレンダーアプリを作ろうものなら、Sun,Mon,Tue...というお決まりの文字列に変換するのも、個別の配列を作って対応していたので、
毎回同じ事を書くなら、やっぱりライブラリ化しなければいけないという、バニラ派のワイ思考での関数作成です。
そんなに難しいコードではないので、興味のある人は読み解いてもらった方が早いんですが、
constructor部分
this.datetime = datetime_string ? Date.parse(datetime_string) : new Date()
こちらは、文字列での日時指定がある場合は、それをDate.parseでjsの日付フォーマットに変換して、
指定がない場合は、現在時間をメモリに保持します。
formatメソッド
format(str){
for(const key of "YyMmDwdHhis"){
if(str.indexOf(key) === -1){continue}
const reg = new RegExp(key, "g")
str = str.replace(reg, this[key])
}
return str
}
置き換え文字をそれぞれ一個ずつ文字列置換させています。
置換する文字列は、javaascriptのgetterで作るようなclass仕様です。
オブジェクト指向がわかる人なら、簡単に理解できると思いますが、javascriptがよくわからないし、moduleタイプが苦手という人は、classの構造を学習すると、分かりやすくなるハズです。
今後の機能追加
yyy-mm-dd指定
日付指定で足りていないのは、"yyyy-mm-dd"のような書き方もできるようにすると、よりわかりやすく記述できるようになるので、今は1文字ずつの置換処理にしてますが、
正規表現を入れて改造するとできそうです・・・が今回はやってません。
diff
2つの日時が何日差があるのか？何時間差があるのか？という比較判定は、制限時間処理などの場合によく使います。
この機能は、今回のDatetimeには入れておきたいですね。
そのうち追加したいと思います。
あとがき
仕事でこういう関数を作った時に、以後に自分でさらに使うという効率を考えているプログラミングエンジニアは少なくないと思いますが、
実際にそれができているエンジニアは、稀なんじゃないかと、色々な現場を見てきたワイが感じています。
人のコードをフォークすれば、それはもう自分の効率化のツールになります。
効率良くするためにITを利用するものですが、ITを組み立てるプログラミング自体もこうした効率を駆使していく事で、スキルも時間もよりよくなっていき、
数年後にはかなりの効率エンジニアに成長できるという事を、結構みんな知らないみたいですね。
ちなみに、ブログもその一環。
あ、バグや不具合など見つけた人は、コメント書いてください。すぐに直します。
0 件のコメント:
コメントを投稿