Help us understand the problem. What is going on with this article?

【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();
});

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

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

trust-coms
トラストはICTソリューションサービス、システム開発サービスを提供し、お客様との信頼関係の中で磨かれ成長するソフトウェアメーカーです。 ※各記事はすべて個人の見解であり、株式会社トラストの公式見解ではありません。
https://trust-coms.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away