jQueryの無名関数の入れ子って問題ないですか？

Question

こんな書き方って問題ないですか？

;
(function ($) {
    $(function () {
       $(function () {
           無名関数1
       });
       $(function () {
           無名関数2
       });
       $(function () {
           無名関数3
       });

      $(window).on('load resize', function () {
         ロード・リサイズ処理1
      });
      $(window).on('load resize', function () {
         ロード・リサイズ処理2
      });

      .
      .
      .

    });

})(jQuery);

jQueryでカプセル化するのは問題ないと思うのですが、無名関数に無名関数を入れ子したり、無名関数を機能ごとに分けたりすることって問題ないのでしょうか？

無名関数を小分けにしすぎると、パフォーマンスに障るのかなと気になりました。

気になる点

こういう場合は

;
(function ($) {
    $(function () {
           // アンカーリンクを〜〜する
           無名関数1
           // #hoge〜〜する
           無名関数2
           // △△を○○する
           無名関数3 
    });

    $(window).on('load resize', function () {
　　　　　// リサイズしたとに画面幅を取得する
         ロード・リサイズ処理1
　　　　　// リサイズしたときに〜〜する
         ロード・リサイズ処理2
    });
})(jQuery);

と、コメントかなにかで機能を区切るように書き換えるか、

;
(function ($) {
    $(function () {
           関数1();
           関数2();
           関数3();
     });

      $(window).on('load resize', function () {
         ロード・リサイズ処理1();
         ロード・リサイズ処理2();
      });

      .
      .
      .

      (関数の記述)
    });

})(jQuery);

上記のように関数を作ってあげたほうがいいのではないかと思うのですが

これらにパフォーマンスや可読性の違いはでますか？
またこういう無名関数の入れ子の問題はjQueryだけではなく、JSやその他のプログラミング言語でも同じことが言えるのでしょうか？

Answer 1

これらにパフォーマンスや可読性の違いはでますか？

JavaScriptの関数実行はそれなりに性能が良いのでパフォーマンス的なダメージは殆どありません。
ループ文なんかで数万個単位の関数を機械的に生成してしまう等の状態になれば話は別ですが、
人間が手作業で作る数十個の関数がパフォーマンス上の決定的差になる事はありえません。

可読性は当然落ちます。
関数を作る度に、開きと閉じでビジネスロジックを満たす為に何の寄与のしない行が2行ずつ加算されますので、
程度問題とはいえJSのコードは出来るだけ行数を絞った方が分かりやすいといえます。

無名関数の入れ子

違いますぅ！無名関数の入れ子じゃないですぅ！！

(function ($) {})(jQuery);はまごうことなき無名関数です。
$(function(){});はjQuery関数にコールバック関数を引数に実行しただけで、
その本質はaddEventListenerへのイベント登録です。

JavaScriptの関数は他の値と同じく、
「変数に代入可能」「関数の引数に格納可能」「関数の戻り値に設定可能」という特徴(第一級オブジェクト)があり、
これを利用して「イベント登録」という儀式を行う言語です。

登録するイベントの候補にはブラウザが用意したページのロードが完了したとき、マウスがクリックされたとき、要素の上にマウスカーソルが乗ったとき……とまぁ無数に存在しまして、
その登録時に「Aのイベント条件を満たしたとき」に、後続の処理をTODOリスト的に関数として包んだものをセットにするのです。

要するに一見無駄に見えるこの関数の入れ子は見てくれじゃなくてちゃんと意味があるんです。
まぁ、グローバル領域にjQueryという変数がぷかぷか浮かんでて、
無名関数で束縛しなければならないというのはちょっとアレな話ですけどね。

jQueryでカプセル化するのは問題ないと思うのですが、無名関数に無名関数を入れ子したり、無名関数を機能ごとに分けたりすることって問題ないのでしょうか？

上記を踏まえて質問文の冒頭を見返しましょう。
貴方が考える新しいやり方は、「イベントを細かく定義して」疎結合なWebアプリを作りたいという試みといったところでしょう。
私もかなり悩んだ末にこのやり方を思いついた経緯がありまして、こうして見返しても中々筋が良い方法だと思います。

……で、ここからが本題ですが、どうしてこのやり方を編み出したのでしょうか？
恐らく大規模なWebアプリケーション開発をしている最中、必要に迫られてではないですか？
だとすれば、jQueryや素のJavaScriptによるイベント駆動開発の辛みが一気に吹き出してきて地獄になります。

そして疎結合にしている部分の変数共有が必要になり、次第にジリ貧になり、
技術的負債が溜まってプロジェクトが一気に遅延するでしょう。
この辺までが既定路線です。

私がこの手法を考えついたのは2010年頃の話ですが、今は既にもっと良い方法が認知され、普及しています。
JSフレームワークであるReact、Vue.js、Angular等にシフトすることをオススメします。
その手法を突き詰めて頑張るならさっさとJSフレームワークに移行しろ！間に合わなくなっても知らんぞー！！という感じです。

またNode.jsアプリのWebpackやBrowserifyで勉強してみてください。
関数の切り分けというところでかなり楽になるはずです。

Comments

[mametaro3]

> `$(function(){});`はjQuery関数にコールバック関数を引数に実行しただけで、
その本質はaddEventListenerへのイベント登録です。

↑なるほど！無名関数と呼んでしまいました..
ちなみにこれは即時関数とは呼べるのでしょうか？
通常はイベント登録と呼べばよいのでしょうか..?

> ……で、ここからが本題ですが、どうしてこのやり方を編み出したのでしょうか？

↑関数を細かく登録して..ってやりかたのことですよね！
C#エンジニアの方が、angularとtypescript+webpackで開発しているwebアプリのソースを触らせていただける機会がありまして、関数のカプセル化というのを見て、こちらのほうが見やすいのではと思い至りました！

とても参考になりました！
ありがとうございます。

[miyabi-sun]

`function name() {}`という形で文章としておかず、
`var fn = function () {}`、`$(function(){})`等と書いたら無名関数です。

確かに無名関数ではあるのですが、
イベント登録の入れ子なので純粋な無名関数を使った即時実行関数の入れ子ではないという感じですね。

> 通常はイベント登録と呼べばよいのでしょうか..?
jQueryの$(fn)をちゃんと読んでは居ないのですが、
本質的にはイベント登録の入れ子ですね。

[mametaro3]

あぁ！なるほど.. 腑に落ちました。ご丁寧な回答、ありがとうございました！！

Answer 2

文法上エラーが出なければ問題ないでしょうけど
パフォーマンスを気にするなら、あまりやる意味がないと思いますのでやめたほうがいいかと。

$(window).onについてもresize時はともかくload時をあえて切り分ける理由があるかは微妙です
（いちおうレンダリングを経てからの処理なのでしょうけど）よほどセンシティブな作りでなければ
DOMContentLoaded時でもさほど影響はないと思いますので、多重処理しないほうがよいかと。

Comments

[mametaro3]

ご回答ありがとうございます！
そうですよね。省けるならシンプルなほうがいいですよね。

$(window).on('load resize', function () {
ロード・リサイズ処理1
});

↑のloadはいらないってことですか？
load時とresize時に発火してほしくてこうなったのかと思ってましたが、
こちらはresizeのみで大丈夫ということでしょうか..？

Answer 3

大丈夫だ、問題ない

こんな書き方って問題ないですか？

問題の有無は、人それぞれの判断基準でいくらでも変化します。

• パフォーマンス
• 美的感覚
• 対応ブラウザ
• 期待する動作

質問者が期待している要件を明らかにして、その要件に最もマッチするコードを探し出すのが「最適解」だと私は思います。

独断と偏見で要件を決めて書いたコード

• $ は内容を表さない不適切な関数名です。jQuery を使いましょう。
• 同じ関数を分割して何度も呼び出すのは無駄です。DRY 原則に従い、一つにまとめましょう。
• グローバル名前空間を使用しない為に、即時関数は不要です。ブロックスコープを使いましょう。

<script>
{
  'use strict';

  const joinHandlers = function joinHandlers () {
    const handleList = arguments;

    return function handlers () {
      for (let handle of handleList) {
        handle.apply(this, arguments);
      }
    };
  };

  const fn1 = function fn1 () {};
  const fn2 = function fn1 () {};
  const fn3 = function fn1 () {};
  const loadResize1 = function loadResize1 () {};
  const loadResize2 = function loadResize2 () {};

  jQuery(joinHandlers(fn1, fn2, fn3));
  jQuery(this).on('load resize', joinHandlers(loadResize1, loadResize2));
}
</script>

Re: mametaro3 さん

Comments

[mametaro3]

ご回答ありがとうございます！
なるほど、こんな書き方もあるのですね。参考になりました。

Answer 4

$(function () {}); は 「 DOMContentLoaded イベント発報時もしくはそれ以降であれば即実行」という挙動をします。そのため、複数書く必要は全くありません。

$(function () {
  $(function () {/*中身*/}); // これは特に意味が無い
});
```↓
```js
$(function () {
  /*中身*/
});

Comments

[mametaro3]

ご回答ありがとうございます。なるほど、そうですよね！
参考になりました。