【jQuery】１つのファイルに複数のスクリプトを記述する際の作法

###疑問点
jQueryを勉強しはじめ、まだ日の浅いものです。
かなりの根本の部分がわからなくなってきてしまったため、ご教授いただけないでしょうか。

1つのJSファイルに複数の役割を持ったスクリプトを記述をする場合、1つ1つ$(function(){…});で囲んでいくのが作法として正しいのでしょうか？
それともまとめて記述をしてしまっても良いのでしょうか？

例えば、スムーススクロール、ドロップダウンメニュー、等々…複数の自作スクリプトを１つのファイルにまとめている場合です。

下に追記を加えています。

###HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="script.js"></script><!--自作スクリプト-->
</body>

###（パターンA その1）1つずつ$(function(){…});で囲む

javascript
1$(function(){
2	//スムーススクロールの記述
3});
4
5$(function(){
6	//ドロップダウンメニューの記述
7});
8
9//・・・

###（パターンA その2）$(function(){…});の中にまとめて記述

javascript
1$(function(){
2
3	//スムーススクロールの記述
4
5	//ドロップダウンメニューの記述
6
7	//・・・
8
9});

ついでに、CMSを使用する場合はjQueryをカプセル化するようなルールが職場にあり、下記のようなパターンもあり得ます。

###（パターンB その１）カプセル化の中で1つずつ$(function(){…});で囲む

javascript
1(function($){
2
3	$(function(){
4		//スムーススクロールの記述
5	});
6
7	$(function(){
8		//ドロップダウンメニューの記述
9	});
10
11})(jQuery);

###（パターンB その2）カプセル化の中でまとめて記述

javascript
1(function($){
2
3	//スムーススクロールの記述
4
5	//ドロップダウンメニューの記述
6
7	・・・
8
9})(jQuery);

###（パターンB その3）１つ１つカプセル化

javascript
1(function($){
2
3	//スムーススクロールの記述
4
5})(jQuery);
6
7
8(function($){
9
10	//ドロップダウンメニューの記述
11
12})(jQuery);

職場でも人によって書き方がまちまちで、このあたり気になりますので教えていただけないでしょうか？
例えば、このパターンの記述をしていると、こういった場面でメリット、デメリットがある等。

未熟なため説明が拙く申し訳ございません。
必要に応じて補足するようにいたしますのでどうぞ宜しくお願いいたします。

###補足
「スムーススクロールの記述」「ドロップダウンメニューの記述」というのはまったく別のところに使用している想定です。
例えば、「スムーススクロール」はページのトップへ戻るボタンに、「ドロップダウンメニュー」はグローバルナビゲーションに使用していたり、といった具合です。
それぞれに変数を指定したりすることもあります。

###追記
jQueryの入門書をあらためて確認してみたのですが、その中でそれぞれの役割ごとで$(function(){}で分けて記述しているものがあり、ますます混乱しています。（具体的に書籍名を書いた方がいいのでしょうか）

１つのHTMLページに対して外部JSファイルに章を追うごとにドロップダウンメニュー、コンテンツ切り替えタブ等々を追加していく内容なのですがそれぞれ下記のような記述がなされています。

javascript
1//1つのJS外部ファイルです
2
3//ドロップダウンメニュー
4$(function(){
5	$(セレクタ).click(function(){
6	var 変数…	
7	});	
8});
9
10//コンテンツを切り替えるタブ
11$(function(){
12	$(セレクタ).click(function(){
13	var 変数…	
14	});	
15});
16
17//下記、色々とサンプルが続くがすべて$(function(){}で囲まれている

もしかすると、後で読者が必要なサンプルをコピー&ペーストしやすいようにとの著者の配慮かもしれませんが、この当たりの意図は不明です。

自分自身の記述について、コメントを書いて工夫はしているものの、どこまでがどの処理だったか後で見返すと混乱することがあります。人の記述したものだと尚更です。
書籍のサンプルのような書き方（パターンA その1）1つずつ$(function(){…});で囲むだと正直見やすい、というのがあります。
ただ、すでにご回答いただいている通り、$(function(){}の処理を何度も記述するのはNGなのかなと思うところもあります。
このあたり、引き続きご意見いただけるととても助かります。

行動規範の内容に同意します

回答3件

ベストアンサー

私もjQueryを学び始めたときに、どのカッコがどの閉じカッコと関連しているかよくわからなくて、閉じカッコが抜けたコードを書いたことがあります。

全体的にはJS（JavaScript）の「メソッド」と「関数」の中に全部が命令群が入っているという感じと思います。
JSのメソッドはメソッド名の後にカッコがついて、()カッコの中に引数を書かれるのが基本形です。

メソッド名(引数);

jQueryで当てはめると「$」という名前のメソッドのカッコの中に引数が入っている感じです。

$(引数);

関数はfunctionの後ろに関数名、()カッコ、その後の{}カッコの中に複数の命令を書きます。

function 関数名(){命令; 命令; 命令; }

しかし、jQueryの中の関数は関数名は省略される形なので関数名がなくすぐに()カッコが来ます。

function (){命令; 命令; 命令; }

そして、この関数が$メソッドの中()カッコの中に入れ子になっているのがjQueryの基本形です。

$(function (){命令; 命令; 命令; });

改行を加えると

$(function (){
命令;
命令;
命令;
});

関数の命令ははそれぞれのセレクタ（"#ID名"、".クラス名"）などと紐づいているので、
全体的に一つの「$();」の中に入っていても影響は受けません。
また、セレクタ部分も「$」メソッドです。その後ろにすぐに命令を繋げてかけます。

$(function (){
$("#ID名").命令();
$(".class名").命令();
$("要素名").命令();
});

※すいません、間違えて別の方のコメントに入れてしまったので再投稿です。

投稿2017/02/06 01:54

編集2017/02/07 06:38

r_iida

総合スコア99

umauman

2017/02/06 12:31

ご回答ありがとうございます！ >私もjQueryを学び始めたときに、どのカッコがどの閉じカッコと関連しているか >よくわからなくて、閉じカッコが抜けたコードを書いたことがあります。まさにおっしゃる通りで、追記にも加えたのですが、初心者の私自身、同じ部分で悩んでいるところです。丁寧な説明も本当に感謝いたします。 >全体的に一つの「$();」の中に入っていても影響は受けません。そうですよね。ただ、見やすさの点で、$(function (){}で分けて書いてしまうというのもありなのかな…と言った部分が気になっています。もし差支えなければ、ご意見いただけないでしょうか。

umauman

2017/02/06 14:27

質問欄に追記を追加しております。回答者様へ自動で通知が行く？かもしれないのですが、念のため、お伝えさせていただきます。（teratailの仕組みがまだよくわかっていなかったりします）

r_iida

2017/02/06 17:17

「$(function(){…});を何度も書くことがNGか」について言えば、形が崩れる、動かない、までは行かず見た目も動きも変わりません。なので、ベターではない、程度と思います。 . 1回で済むものを何度も繰り返し書くことをHTMLやCSSで例えるとすると、例えばヘッダーの中の要素は全体で<header>でくくると思うのですが、 ------------------------- <header> <h1>サイト名</h1> <div class="sns">SNSシェアボタン</sns> <nav>グローバルメニュー</nav> </header> ------------------------- それを一つ一つ<header>でくくってみたとしても見た目は変わらないわけです。 ------------------------- <header> <h1>サイト名</h1> </header> <header> <div class="sns">SNSシェアボタン</sns> </header> <header> <nav>グローバルメニュー</nav> </header> ------------------------- . CSSで例えば<h1>のスタイルを定義するときに ------------------------- h1 { font-size: 20px; color: #666; width: 200px; height: 30px; margin: 20px auto; } ------------------------- 一つ一つをh1{ }で囲ったとしても見た目は変わりません。 ------------------------- h1 { font-size: 20px; } h1 { color: #666; } h1 { width: 200px; } h1 { height: 30px; } h1 { margin: 20px auto; } ------------------------- . そこにどんなデメリットがあるかというと、コードが長くなる。書く時間が長くなる。可読性が下がる。というのはあると思います。あと、もし何かしらのエラーがでた場合に、どこかのトジカッコが抜ける、などエラーの可能性が高まり、それを探す手間も増えるかもしれません。あとはこうした繰り返しを積み重ねることで、読み込み時間にだんだん影響が出るかと思います。そのため、だんだんとまとめられるものはまとめてしまおう、という考え方になって行くと思います。 . umaumanさんが追記で書かれた例については、中身だけを提示すると「$(function(){…});」の中にjQueryのメソッドをかく、ということを知らない方が中身だけをコピーして「動かないぞ！」とならないように、全部記載しているのではないでしょうか？また「見やすさ」については、個人的には /***************header**************/ などコメントを目立つ書き方にすれば解決できると思っています。 . 「$(function(){…});」のことを「オマジナイ」という言われ方もしているのですが、それだといまいち理解ができないと思います。私もumaumanさんと同様に何度もそれを書いていたことがあります。

umauman

2017/02/07 03:39

HTML、CSSとかなりイメージが掴みやすい例えをしてくださってありがとうございます。デメリットの部分がクリアになりました。 >こうした繰り返しを積み重ねることで、読み込み時間にだんだん影響が出るかと思います。ここが一番痛いところだと感じました。入門書の件に関しては、恐らくおっしゃる通りなのかと思いました。コメントの書き方もさらに工夫してみようと思います。このような初歩的な質問にとても丁寧にお答えいただきまして本当にありがとうございました！

行動規範の内容に同意します

もっともトラブルが起きにくい安全な書き方は

javascript
1(function($){
2
3    $(function(){
4        //スムーススクロールの記述
5
6        //ドロップダウンメニューの記述
7    });
8
9})(jQuery);

じゃないですかねぇ。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8
9		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
10		<script type="text/javascript" src="./plugin1.js"></script>
11		<script type="text/javascript" src="./plugin2.js"></script>
12		<script type="text/javascript" src="./plugin3.js"></script>
13		<script type="text/javascript" src="./plugin4.js"></script>
14		<script type="text/javascript">
15			(function ($) {
16				$(function () {
17
18					// プラグイン1
19					$(selector1).plugin1();
20
21					// プラグイン2
22					$(selector2).plugin2();
23
24					// プラグイン3 + プラグイン4
25					// $(selector3).plugin3().plugin4(); ← この書き方はさすがにしない
26					//
27					// 以下のように分けて書く
28					$(selector3).plugin3();
29					$(selector3).plugin4();
30
31				});
32			})(jQuery);
33		</script>
34	</body>
35</html>

投稿2017/02/05 17:20

編集2017/02/05 18:11

退会済みユーザー

総合スコア0

umauman

2017/02/05 17:34

ご回答いただきましてありがとうございます。 1つずつ$(function(){…});で囲む（パターンA その1）もしくは（パターンB その１）あたりが一番トラブルが起きにくいのかな？と思っていたので意外です。カプセル化する場合は恐らく１つ１つ記述しなくても一番外側で囲むだけでOKといった感じでしょうか。

退会済みユーザー

2017/02/05 17:40

同じ処理をまとめずに書く人ってその意味を理解せずにコピペしているだけの話ですからね。 (function($){ })(jQuery); $(function(){ }); も理解せずに書いていると言うことでしょう。DRYじゃないソースを書いていることに疑問を持たないと言うのはプログラマとしてどうなんだろうと思います。

umauman

2017/02/05 17:47

説明が悪かったのかもしれません。「スムーススクロールの記述」「ドロップダウンメニューの記述」というのはまったく別のところに使用している想定です。例えば、「スムーススクロール」はページのトップへ戻るボタンに、「ドロップダウンメニュー」はグローバルナビゲーションに使用していたり、といった具合です。わかり辛くて本当に申し訳ありません。補足するようにいたします。

退会済みユーザー

2017/02/05 17:49

別のところといっても、同一ページの別要素と言う意味でしょ？そうだとしても回答の意図も内容も変わりありません。

umauman

2017/02/05 18:05

再度のご回答ありがとうございます。一旦、補足を入れてしまいましたが… 本質問をしている時点で私自身、$(function(){…});についての理解が無いためであり、今一度勉強してみます。

退会済みユーザー

2017/02/05 18:13

HTMLを含めたスケルトンコードを補足しておきました。参考 http://atomicbox.tank.jp/website/328/

r_iida

2017/02/06 01:56

　失礼しました。こちらは間違えてコメントに投稿してしまっため、削除依頼いたしました。