JavaScriptのすぐ使える7つのユーティリティ関数

私が「Custom DataBase Tables」プラグインのJavaScriptで使っている関数で、すぐに使えて、わざわざ外部ライブラリを読み込むまでもないユーティリティ関数がいくつかあるので、それらを紹介してみたい。

オリジナルのソースでは、いくつかはjQueryの.ready()イベントのハンドラー内に定義しているのだが、特にjQueryに完全依存するようなスクリプトでもないので、素のJavaScriptだけでも動作するように修正するのはそこまで難しくはないと思う。まぁ、記述的にも簡潔に書けるので、この記事ではjQueryありきのままで掲載する。

1. 自己のURLのGETパラメータを連想配列(オブジェクト)に格納する

これは、現在表示している自身のWEBページのURL文字列をパースして、GETパラメータ部を連想配列(JavaScriptのオブジェクト)形式として返してくれる関数だ。カプセル化して自動実行するようにしてあるので、jQueryの.ready()イベント発生後であればハンドラー内のどこからでも$.QueryStringと変数的に参照できる。

例えば、自己URLがhttp://example.com/index.html?a=b&c=2#topとしてアクセスされていた場合、$.QueryString{ a:"b", c:"2" }となる。

2. CSSスタイルのem単位をピクセル単位に変換する

CSSスタイルでプロパティの定義値として使われるemという単位は、1em親要素の 1文字の高さと同じサイズになる。最上位のルート要素を起点とするremと異なり、「 親要素 」を起点にするというのが曲者で、HTMLの入れ子構造が複雑になってくると現在DOMで対象としている要素の1emが一体実際どれくらいのサイズなのかが不明瞭になることがある。そこで、この関数を使うことで、計測したいem値を<body>タグを起点として再計測を行い、ピクセル値として取得できる。jQuery等で要素のサイジングを行う場合などに参照値として利用できる。
なお、引数に何も指定しないで、$.em2pxl()とコールすると1emのピクセルサイズが返ってくる仕様だ。

3. 指定した文字列の幅を計測する

WEBページのフォントとしてプロポーショナル・フォント(可変幅フォント)を利用していると、文字数×フォントサイズの式で計算された文字列幅は、実際の文字列幅と異なってしまう。そこで特定の文字列についてその全体の正確な横幅が欲しい時などにこの関数を使うことで、文字列全体の横幅を返してくれる。jQueryなどで要素のサイズをきっちり指定したい時などに利用できる関数だ。

等幅フォントと可変幅フォントでの文字列サイズの差の例:

4. 画像サイズを計測する

画像ソースのオリジナルサイズを計測する関数だ。<img>タグのsrc属性に指定する値を引数として与えてあげれば、外部URLの画像だろうが、base64エンコードされた画像バイナリの文字列だろうが、読み込んでサイズを計測して{w:(横幅ピクセル値),h:(縦幅ピクセル値)}のオブジェクトを返してくれる。呼び出し元での使い方は次のようになる。

なお、指定したsrcの値が無効だったり、画像URLがNot Foundだった場合はサイズとして縦横それぞれ0ピクセルのオブジェクトが返るので、画像のエラー判定にも使える。

内部処理でjQueryに依存していないので、そのまま素のJavaScript関数として利用できる。

5. 数値エンティティと実体文字列の相互変換

指定した文字列を数値エンティティにエンコード($.htmlEntities( '文字列', 'encode' ))したり、数値エンティティの文字列をデコード($.htmlEntities( ’数値エンティティ文字列’ ))する関数。この関数はPHPのmb_encode_numericentitymb_decode_numericentityの関数と互換性があるので、JavaScriptでエンコードした文字列をPHP側でデコードしたり、その逆も可能だ。この関数やHTMLエンティティについての詳しい事については以前Qiitaにまとめ記事を書いたのでそちらも参照してほしい。

変換例は下記の通り:

なお、この関数もjQueryに依存していないので、素のJavaScriptでそのまま使える。

6. マルチバイト文字に対応した文字列処理

Unicodeの4バイト文字まで対応しているstrlen(文字列長取得)関数とsubstr(文字切り出し)関数。日本語などのマルチバイト文字を処理する時用の関数となる。使い方はそれぞれ下記を参照してほしい。

マルチバイト文字対応型の文字列長取得(PHPのmb_strlen()メソッドと同等の関数)

実際には下記の例がこの関数の処理を端的に表している。
Unicodeでは1文字で3~4バイトとなるマルチバイト文字があるため、その文字が含まれる文字列に対して切り捨てや抽出を行う場合、正確に文字数をカウントする関数が必要になるのだ。この$.mb_strlen()はそのためのものだ。


mb_strlen()の例

※ Markdownで変換されると4バイト文字が正常に表示されなかったため、例は画像化してあります。

マルチバイト文字対応型の文字列切り出し(PHPのmb_substr()メソッドと同等の関数)

これも実際の下記の切り出し処理の例を見るのが一番理解しやすい。
文字列を切り出す範囲にUnicodeの3~4バイト文字が含まれていると、従来のsubstrで文字列を切り出すと分割点にあるマルチバイト文字がバイナリ的に分断されてしまい、文字化けが発生してしまうことがある。これを防ぐためには正確な文字数を算出して切り出しを行う必要がある。この$.mb_substr()はそのための関数である。


mb_substr()の例

※ Markdownで変換されると4バイト文字が正常に表示されなかったため、例は画像化してあります。

なお、これらの関数はともにjQueryに依存していないので、JavaScriptが有効ならどこでも利用可能である。

7. 文字列からタグを除去する

指定の文字列からHTMLタグを除去する。第二引数に除去しないタグを指定することもできる。
実際の使用例は下記の通りだ。

これもjQueryに依存していないので、JavaScriptが有効ならどこでも利用可能だ。

──以上、実質の関数的には8つあったのだが、まぁ、7つ道具という語呂にも掛けて、マルチバイト文字列制御関数は1つにまとめてしまった次第。結構有用な関数が多いと思うので、必要に応じて是非利用してみてほしい。

Leave a Reply

Your email address will not be published.