我が家のUtil.js

JavaScriptには、今欲しい関数がない

PHP + JavaScriptの組み合わせで作業をしていると、
PHPは使いそうなものは、用意しておく。
他方jsは、作れるものは、用意しない。
という印象です。（個人的な感想です）

PHPの関数や他の言語から、ヒントを得てUtilクラスを作って、使っています。
今回は、その中でも自分が多用する関数たちを紹介したいと思います。
もし有用なものがあれば、どうぞ自由ご利用ください。

こんなのも便利だよ。とか、
それはない。こうすればいい。とか
あればぜひコメントください。

追記

コメントで教えていただき、jsの機能で十分な関数があったため、削除・修正をしました。
学習不足ですね。
また、知識がアップデートされていないことも実感しました。
投稿する前にちゃんと調べなおしてから記事を書くべきだと勉強になりました。

アウトプットしたことにより、コメントがいただけて、大変勉強になりました。
手持ちの知識を定期的にまとめてアウトプットして人に評価をもらうのは大切だなと思いました。

前提

今回のUtilクラスは、静的メソッドだけがたくさん入っているクラスです。
以下のようなファイルで、これから紹介するメソッドが static method(){}のように書かれています。

class Util{
   static method(){
   
   }
}

PHPからの移植群

コメントいただきました通り、改行の<br>への変換と、htmlの挿入について、.innerTextを使えば、解決できるのを知りませんでした。勉強になりました。

const str = '改行を\r\n<br>\nに変換';
const p = document.createElement('p');
p.innerText = str;
p.innerHTML; // '改行を<br>&lt;br&gt;<br>に変換'
p.innerText; // '改行を<br>に変換'

nl2br 改行を<br>に変換

textareaから入力されたものをプレビューしたいとか。
DBから読み込んだ改行付きの文書を表示したいとか。
結構使うと思うのですが、なぜか用意されていない。
https://www.php.net/manual/ja/function.nl2br

htmlspecialchars HTMLをサニタイズ

こちらも、DBに入れて、サーバーサイドでサニタイズしてあればいいのですが、
即時プレビューしたいときとかに必要ですよね。
innerHTMLにぶち込む前に必須です。
https://www.php.net/manual/ja/function.htmlspecialchars.php

htmlspecialchars_decode サニタイズされたHTMLを戻す

上のメソッドで変換したのはいいけれど、
Ajaxしたりするときは、元に戻して送りたいです。
プレビューと別にデータを保持して置け？うん。そうですね。
https://www.php.net/manual/ja/function.htmlspecialchars-decode.php

オリジナル

padding_zero 0埋め

日付の表現とか、ゼロ埋めって意外と使うことが多いと思うのですが、
jsには文字列フォーマットのような機能はないのです。（ないよね？）

コメントいただきました通り、String.prototype.padStart()で0埋め出来ました。

// num 0埋めしたい数字
// p 埋めたい桁
String(num).padStart(p, 0);

file2dataUrl ファイルをdataURLに変換

フォームからアップロードされた画像をプレビューしたいときなどに便利。

使い方

document.getElementById('file').addEventListener('change', async (event) => {
    const file = await Util.file2dataUrl(event.target.files[0]);
    document.getElementById('preview_img').src = file;
});

コード

static async file2dataUrl(file){
    const reader = new FileReader();
    reader.readAsDataURL(file);
    await new Promise(resolve => reader.onload = function(){ resolve() });
    return reader.result;
}

dateFormat Date型の日時情報を成形した文字列で取り出す

jsのDate型にはフォーマッターがない……
Date型のtoStringとかで対応してくれればいいのに。

使い方

第1引数にDate、第2引数に、フォーマット文字列を渡す。

const datetime_str = Util.dateFormat(new Date(), 'Y/M/D H:I:S');
// ↑ "2024/07/10 15:12:31"
const datetime_jp = Util.dateFormat(new Date(), 'Y年M月D日 H時I分S秒');
// ↑ "2024年07月10日 15時12分31秒"

以下の表は new Date('2023-04-01T05:23:01')を変換した例

フォーマット文字	説明	例
Y	年	2023
m	月	4
M	月(2桁)	04
d	日	1
D	日(2桁)	01
w	週番号	6
wj	週（日本表記）	土
h	時	5
H	時(2桁)	05
i	分	23
I	分(2桁)	23
s	秒	1
S	秒(2桁)	01

コード

static dateFormat(date, format){
    const format_strings = {
        Y : (d) => d.getFullYear(),
        m : (d) => d.getMonth()+1,
        M : (d) => String(d.getMonth()+1).padStart(2,0),
        d : (d) => d.getDate(),
        D : (d) => String(d.getDate()).padStart(2,0),
        wj : (d) => this.week_jp[d.getDay()],
        w : (d) => d.getDay(),
        h : (d) => d.getHours(),
        H : (d) => String(d.getHours()).padStart(2,0),
        i : (d) => d.getMinutes(),
        I : (d) => String(d.getMinutes()).padStart(2,0),
        s : (d) => d.getSeconds(),
        S : (d) => String(d.getSeconds()).padStart(2,0),
    };
    let res = format;
    for(const [f, v] of Object.entries(format_strings)){
        res = res.replaceAll(f, v(date));
    }
    return res;
}
static week_jp = ["日","月","火","水","木","金","土"];

以上

他にもfetch、フォーム情報の収集などのメソッドを作ってるのですが、
HTML部分の書き方の仕様なども説明しないといけないので今回は省きました。

読んだ人は、ぜひコメントに、自分のユーティリティも貼っていってください。