質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16373questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 6,371

umauman

score 43

疑問点

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

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

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

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

HTML

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

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

$(function(){
    //スムーススクロールの記述
});

$(function(){
    //ドロップダウンメニューの記述
});

//・・・

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

$(function(){

    //スムーススクロールの記述

    //ドロップダウンメニューの記述

    //・・・

});


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

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

(function($){

    $(function(){
        //スムーススクロールの記述
    });

    $(function(){
        //ドロップダウンメニューの記述
    });

})(jQuery);

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

(function($){

    //スムーススクロールの記述

    //ドロップダウンメニューの記述

    ・・・

})(jQuery);

(パターンB その3)1つ1つカプセル化

(function($){

    //スムーススクロールの記述

})(jQuery);


(function($){

    //ドロップダウンメニューの記述

})(jQuery);

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

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

補足

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

追記

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

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

//1つのJS外部ファイルです

//ドロップダウンメニュー
$(function(){
    $(セレクタ).click(function(){
    var 変数…    
    });    
});

//コンテンツを切り替えるタブ
$(function(){
    $(セレクタ).click(function(){
    var 変数…    
    });    
});

//下記、色々とサンプルが続くがすべて$(function(){}で囲まれている

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+4

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

(function($){

    $(function(){
        //スムーススクロールの記述

        //ドロップダウンメニューの記述
    });

})(jQuery);

じゃないですかねぇ。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="./plugin1.js"></script>
        <script type="text/javascript" src="./plugin2.js"></script>
        <script type="text/javascript" src="./plugin3.js"></script>
        <script type="text/javascript" src="./plugin4.js"></script>
        <script type="text/javascript">
            (function ($) {
                $(function () {

                    // プラグイン1
                    $(selector1).plugin1();

                    // プラグイン2
                    $(selector2).plugin2();

                    // プラグイン3 + プラグイン4
                    // $(selector3).plugin3().plugin4(); ← この書き方はさすがにしない
                    //
                    // 以下のように分けて書く
                    $(selector3).plugin3();
                    $(selector3).plugin4();

                });
            })(jQuery);
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 02:34

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

    キャンセル

  • 2017/02/06 02:40

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

    キャンセル

  • 2017/02/06 02:47

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

    キャンセル

  • 2017/02/06 02:49

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

    キャンセル

  • 2017/02/06 03:05

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

    キャンセル

  • 2017/02/06 03:13

    HTMLを含めたスケルトンコードを補足しておきました。

    参考 http://atomicbox.tank.jp/website/328/

    キャンセル

  • 2017/02/06 10:56

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

    キャンセル

  • 2017/02/06 21:41

    ご丁寧にHTMLの追記をいただき感謝です。
    参考サイトもありがとうございます。カプセル化の部分とreadyイベントの説明が役立ちました。
    $(function(){…});を何度も記述するのはやはりNGなのかもしれませんが、さらなる疑問点として質問欄に追記を記入しております。

    キャンセル

  • 2017/02/07 12:47

    他の方の回答にもある通り、やはり$(function(){ });を何度も記述するのは良くないことだと感じました。
    今後は「もっともトラブルが起きにくい安全な書き方」で提示していただきました通りに記述していこうと思います。
    この度は本当にありがとうございました。

    キャンセル

checkベストアンサー

+2

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

全体的にはJS(JavaScript)の「メソッド」と「関数」の中に全部が命令群が入っているという感じと思います。

JSのメソッドはメソッド名の後にカッコがついて、()カッコの中に引数を書かれるのが基本形です。

メソッド名(引数);

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

$(引数);

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

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

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

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

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

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

改行を加えると

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

});

関数の命令ははそれぞれのセレクタ("#ID名"、".クラス名")などと紐づいているので、
全体的に一つの「$();」の中に入っていても影響は受けません。

また、セレクタ部分も「$」メソッドです。その後ろにすぐに命令を繋げてかけます。

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

});

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 21:31

    ご回答ありがとうございます!
    >私もjQueryを学び始めたときに、どのカッコがどの閉じカッコと関連しているか
    >よくわからなくて、閉じカッコが抜けたコードを書いたことがあります。
    まさにおっしゃる通りで、追記にも加えたのですが、初心者の私自身、同じ部分で悩んでいるところです。

    丁寧な説明も本当に感謝いたします。
    >全体的に一つの「$();」の中に入っていても影響は受けません。
    そうですよね。ただ、見やすさの点で、$(function (){}で分けて書いてしまうというのもありなのかな…と言った部分が気になっています。もし差支えなければ、ご意見いただけないでしょうか。

    キャンセル

  • 2017/02/06 23:27

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

    キャンセル

  • 2017/02/07 02: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さんと同様に何度もそれを書いていたことがあります。

    キャンセル

  • 2017/02/07 12:39

    HTML、CSSとかなりイメージが掴みやすい例えをしてくださってありがとうございます。
    デメリットの部分がクリアになりました。

    >こうした繰り返しを積み重ねることで、読み込み時間にだんだん影響が出るかと思います。
    ここが一番痛いところだと感じました。

    入門書の件に関しては、恐らくおっしゃる通りなのかと思いました。

    コメントの書き方もさらに工夫してみようと思います。

    このような初歩的な質問にとても丁寧にお答えいただきまして本当にありがとうございました!

    キャンセル

+1

普通にユーザー関数を2つ用意するだけでは?
もしくは無名関数を2つならべて実行してください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/06 21:44

    ご回答ありがとうございます。ユーザー関数に関してはまだまだ到達していないので、無名関数を複数書く場合の疑問なのですが、ご回答の通り、恐らくシンプルなことを複雑に考えてしまっているだけかもしれません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    jQueryでのスクロール位置の取得

    画面上に絶対表示させている画像の切り替えを位置に応じて行いたいのですが タブレットやスマートフォンのように表示がまちまちの場合は どれくらいのpxをスクロールしたかで切り替える

  • 解決済

    連想配列からループで値の受け渡し(jQuery)

    指定したhtmlタグからタグまでページ内スクロールするjQueryライブラリを作成していて動作せず躓いてしまったのでご教示いただけたらと思います。よろしくお願いいたします。

  • 解決済

    jQueryでトリミング

    jQueryで画像をトリミングしたいと考えています。見よう見真似でプログラムを作成したのですがトリミングした画像がどうしても出ないです。よろしければ、ご鞭撻のほどよろしくお願いしま

  • 解決済

    jQueryをもっとスマートにかけないでしょうか。

    特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。 一応動くのですが、見ての通り頭悪い書き方になってしまいました。 さらに出来れば、

  • 解決済

    Jqueryでページ下部に100px程度スクロールした場合に、テーブル要素のtr属性を固定したい

    ●やりたいこと● bodyにテーブルがあり、テーブルの行数が多い為、htmlページである程度スクロールした際に テーブルの1行目のtrを固定したいと考えている。 参考サイトの内

  • 受付中

    jQuery 一定のスクロール範囲が複数ある場合

     前提・実現したいこと https://www.goodfind.jp/2019/seminar/date こちらのページの日付部分のような、スクロールしていくと次の日の日付に切り

  • 解決済

    jqueryのdropとremove

    jquery.pep.jsを利用して要素を動かしたり増やしたりするコンテンツを考えています。 dblclickイベントを利用して要素を削除するコードを書きましたが、タッチデバイスだ

  • 解決済

    スムーススクロールで特定のクラスをもつリンクの時は、位置をずらしたい

     前提・実現したいこと スムーススクロールでページ内を移動するjQueryを使用していますが、 btn1のクラスをもつ<a>をクリックした時は、150px分位置をずらしたいです。

同じタグがついた質問を見る

  • JavaScript

    16373questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。