[js]jquery.autoKana.jsの宣言を条件分岐しつつ仕込む例

サイト内の複数パターンに対応するための、みたいな。

どういうことか
こんな感じ

どういうことか

名前の入力部位は1枠でフルネームを入力させたり、姓名で別れていたり、だったりする。

<label>フルネーム</label>
<input type="text" name="fullname" placeholder="フルネーム">
<input type="text" name="fullname_kana" placeholder="フルネーム（フリガナ）">

<label>姓名別</label>
<input type="text" name="name_sei" placeholder="姓">
<input type="text" name="name_mei" placeholder="名">
<input type="text" name="name_sei_kana" placeholder="姓（フリガナ）">
<input type="text" name="name_mei_kana" placeholder="名（フリガナ）">

autoKanaは、というかjsは、書いておいて存在しなかったらスキップしてくれるからベタ打ちしても、まあ動作に問題はない。

$(function(){
    //フルネーム
    $.fn.autoKana('input[name="fullname"] ', 'input[name="fullname_kana"]', { katakana: true });
    //姓名別
    $.fn.autoKana('input[name="name_sei"] ', 'input[name="name_sei_kana"]', { katakana: true });
    $.fn.autoKana('input[name="name_mei"] ', 'input[name="name_mei_kana"]', { katakana: true });
})

だけど動かないと分かってて無条件に発火させるのは気持ち悪いし、なにか障害が起きても嫌だし。
だからちゃんと状況に合わせた内容を発火させたい。

とはいえ、コンテンツ別にjsを読ませるのもダルい。

条件分岐でやっていこう、という話。

こんな感じ

$(function(){
    const isAutoKanaIncluded = !![...document.querySelectorAll('script[src]')].find(script => {
        const src = script.getAttribute('src');
        return src && src.split('?')[0].endsWith('jquery.autoKana.js');
    });
    if (isAutoKanaIncluded) {
        const kanaPairs = [
            ['user-name-sei', 'user-name_sei_kana'],
            ['user-name-mei', 'user-name_mei_kana'],
            ['user-name', 'user-name_kana']
        ];
        kanaPairs.forEach(([from, to]) => {
            const $from = $(`input[name="${from}"]`);
            const $to = $(`input[name="${to}"]`);
            if ($from.length && $to.length) {
                $.fn.autoKana(`input[name="${from}"]`, `input[name="${to}"]`, { katakana: true });
            }
        });
    }
})

大前提である「jquery.autoKana.js」が読み込まれているかの条件分岐から話が始まる。
ディレクトリは関係なくファイル名をピンポイントでしている上、パラメータの記述があっても対応するようにしてある。だからwp_enqueue_script()とかで追加してバージョンが書かれても平気。

連想配列でautoKanaのペアを仕込む。

配列をforEachで回して、該当のペアがあればautoKanaの記述を走らせる。

そんな感じ。