【jQuery】のお作法について

はじめに

弊社のAdvent Calendar 3日目の記事として投稿します。
内容はフロントサイドの師匠から教わったjQueryのお作法について。
調べても意外と出てこないので、知識共通と自分の備忘録を目的に書きます。

jQueryの基本

調べれば腐るほど出てくるので簡潔に。
HTMLの読み込みが終わったら処理を実行するよ。という書き方は以下の3種類あります。
これがないとHTMLの読み込みが終わっていないのに処理が実行してしまい、正しい処理ができないです。
決まり文句と思いましょう。

$(function () {
    //処理
});

jQuery(document).ready(function () {
    //処理
});

jQuery(function () {
    //処理
});

このドキュメントレディは同時発火が可能であり、極論を言えば1処理ごとに記載出来ます。
しかしそれでは可読性・保守性が低く、バグ調査やエンハンス開発の大きな障害となります。
そこでjQueryを書く際、心に留めてほしいのは

jQueryとは関数型プログラミングである

ということです。
関数型プログラミングについては調べれば私より詳しく簡潔に書いてある記事がありますので、そちらを参照してください。

jQueryのお作法

$(function () {
    // 変数定義
    var log1 = 'func1です';
    var log2 = 'func2です';

    // 関数定義
    // 処理関数
    var initialize = function () {
        func2();
    };

    // イベント関数
    var func1 = function () {
        console.log(log1);
    };

    var func2 = function () {
        console.log(log2);
    };

    // イベント発火バインディング
    $(document).on('click', '.btn', func1);

    // 初期処理
    initialize();
});

このように定義ごとに分けて記載することで可読性・保守性が高いソースとなります。
可読性・保守性が高ければバグ発見・修正も簡単ですし、エンハンス開発も簡単でしょう。

例のように少ない処理であれば逆に見にくいかもしれませんが、サーバー負荷を軽減するためにフロントで出来ることはフロントで実装するのがデファクトスタンダードですので、様々な処理をフロントで行うようになればなるほど、このお作法の良さが光ります。