javascript(Vanilla JS)のスニペットいろいろ

javascriptでたまに必要になるよく使うコードを置いてます。

基本的に Vanilla JS （素のjavascript）でやっていきます。

三項演算子とかワンライナーで書けそうなところも、可読性と再利用性を優先してます。

スニペットとは「分かっている人が楽をするためのツール」です。
分からない人がコピペするためのものではありません。
コードの意味を理解してご利用ください。

入れ子の末端のタグにクラスを付与

<ul>を入れ子にしていったとき、末端の<li>にだけ装飾することがあったので

(function(){
    'use strict';

    // HTMLの読み込みと解析が完了したとき発動、css、画像、iframeなどを待たない
    document.addEventListener('DOMContentLoaded', (event) => {

        // セレクタを指定して走査
        document.querySelectorAll('.sample-list ul li')
        .forEach((li) => {

            // 子孫に LI を持っていなければ
            if (li.getElementsByTagName('li').length === 0) {

                // LI にクラスを付与
                li.classList.add('end-item');
            }
        });
    });
})();

数値文字列を数値にする

PHPの json_encode() で出力されたデータを受け取ったときに、数値も文字列型で渡されてくるので、数値は数値型に変換します。
ちなみに JSON_NUMERIC_CHECK は意図しないところまで数値にされてしまうので扱いづらいです。

console.log(json);

// 数値文字列を数値にする
// まだ使い込んでいないので変更するかもです
// 頭が 0 から始まる整数は変換しません
// カンマ区切りは変換しません
(function(){
    'use strict';
    var f = function(a){

        // 配列でない
        if ('array' !== Object.prototype.toString.call(a).slice(8, -1).toLowerCase()) {

            // オブジェクトでない
            if ('object' !== Object.prototype.toString.call(a).slice(8, -1).toLowerCase()) {
                return a;
            }
        }

        for(var i in a) {

            // 文字列の時
            if ('string' == Object.prototype.toString.call(a[i]).slice(8, -1).toLowerCase()) {
                if (a[i] === '0') {
                    a[i] = 0;
                } else if (a[i].match(/^[1-9][0-9]*?$/)) {
                    a[i] = parseInt(a[i], 10);
                } else if (a[i].match(/^([1-9][0-9]*|0)\.[0-9]+$/)) {
                    a[i] = parseFloat(a[i], 10);
                }
            } else {
                a[i] = f(a[i]);
            }
        }

        return a;
    };
    json = f(json);
})();

console.log(json);

お問合せ・感想はこちら

入れ子の末端のタグにクラスを付与

数値文字列を数値にする

広告