【jQuery】$(function() {});は動かないのにjQuery(function() {});が動く理由

初歩的な質問ですが、外部のライブラリを呼び出す時（他の時も当てはまるかもですが）のjQueryの記述で、

javascript
1$(function() {
2  ***記述例***
3  $('.drawer').drawer();
4    xxx
5  });
6});

だと正常に読み込まれずに「magnificPopup is not a function」といったエラーが発生するのに、

javascript
1jQuery(function() {
2  ***記述例***
3  jQuery('.drawer').drawer();
4    xxx
5  });
6});

では正常に動作するのはなぜなのでしょうか？
$(function()...だけで良い場合と、jQuery(function()...にしなければならない場合があるので、その違いが知りたいです。

それぞれのコードの配置は以下のようになっています。
・jQueryは<head>内で読み込んでいる

HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

・ライブラリは</body>直前（↓の後）に記述

HTML
1<script type="text/javascript" src="/js/drawer.min.js"></script>
2<script type="text/javascript">
3//$だとエラーに、jQueryだと正常に動く
4$(document).ready(function () {
5  $('.drawer').drawer();
6    $('.drawer-menu li a').on('click', function () {
7    $('.drawer').drawer('close');
8   });
9});
10</script>

少し調べたのですが分からなかったので、原因または原因が記述された記事など分かる方いましたら教えていただけると嬉しいです。

miyabi-sun

2019/04/18 07:04

> $document).ready(function () { (　ﾟдﾟ) ( ﾟдﾟ )彡

yoorwm

2019/04/18 07:15

http://semooh.jp/jquery/api/core/jQuery.noConflict/_/

mrgishi

2019/04/18 07:34

ありがとうございます。ご指摘箇所はサンプルで書いたものなので、実際のコードは問題ないと思われます。（調整しました！）

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

回答3件

ベストアンサー

依頼欄でやり取りしていたら日がくれるので、
完璧当てずっぽうで行きます(間違ってる可能性も高いです。)
私が思いついたのは2通りの方法

複数のjQueryのバージョン入れてませんか？
Prototype.jsとjQueryを併用していませんか？

JavaScriptのライブラリというのはグローバル変数に
ぽんとライブラリの関数や変数を設置するために、
ライブラリが利用する変数の重複が非常に多いのが問題となります。

質問文にあるようにグローバル変数の$を利用しようと試みるのは
jQueryとPrototype.jsの2つです。

F12キー等を入力してデベロッパーツールを動作させ、
コンソール欄に$とタイプして実行しましょう。

JavaScript
1// jQueryが入ってないサイトかつChromeの場合
2> $
3ƒ $(selector, [startNode]) { [Command Line API] }
4
5// jQueryが入ってるサイトならば私はjQueryと自己紹介するコメントで始まる
6> $
7ƒ ( selector, context ) {
8  // The jQuery object is actually just the init constructor 'enhanced'
9  // Need init if jQuery is called (just allow error to be thrown if not included)
10  return new jQuery.…
11
12// Prototype.jsが入っているサイト
13> $
14ƒ $(element) {
15  if (arguments.length > 1) {
16    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
17      elements.push($(arguments[i]));
18    return elements;
19  }
20  if (Object.i…

Prototype.jsは既存のJavaScriptの動作を大幅に改変させるクソ挙動を行う
大昔の負の遺産なので出来れば即刻捨てて下さい。
teratailにはPrototype.jsが入ったJSコードをメンテ出来る人はいません。

なのでjQueryの複数バージョンのみ解説します。

異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）

jQueryはなんと最初から複数バージョンで動作することを想定しています。
ライブラリを読み込むとグローバル変数領域の$とjQueryを汚し始めますが、
$.noConflictを実行すると一段階だけベリッと引っ剥がす事が可能です。

これによりjQueryに依存する子ライブラリを山程入れて干渉してしまったやばい…というケースや、
子ライブラリが特定の狭いバージョンでしか動作をサポートしていない場合でも、
ぶら下がるライブラリを指定することが出来ます。

おそらくその機能を利用して$を別のものに閉じ込めているのではないかと推測されます。

投稿2019/04/18 07:20

miyabi-sun

総合スコア21158

mrgishi

2019/04/18 07:48

>複数のjQueryのバージョン入れてませんか？これでした>< WordPressを使用していたのですが、勝手にincludeから読み込むみたいです。（WordPressは関係ないと思い質問に含めていませんでした）これまでjQuery(...)で調整していて気づけていなかったので、知れて良かったですm(_ _)m

mrgishi

2019/04/18 07:55 編集

確かにWordPress使っている時に多いなと思ったら、WordPressでjQueryを使う時は「$」ではなく「jQuery」とする必要があるみたいです。今さらな質問だったかもしれませんが、ありがとうございました！

miyabi-sun

2019/04/18 08:02

b 追加情報どうもです。確かにWordPressのテーマによってはjQueryを大量に入れるようなものも合った気がしますね。無事解決出来たようで良かったです。

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

複数の jQuery を読み込んでいませんかね？
drawer.js の場合、ドキュメントにjQuery 1.11.3を読み込む例があります。
http://git.blivesta.com/drawer/
これに従ってheadで2.2.0を読んでいるにもかかわらず1.11.3を読み、さらに複数バージョン読むからと .noConflict()も書くとエラーになります。

HTML
1<!-- jquery & iScroll -->
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
3<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
4<!-- drawer.js -->
5<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
6<script>
7console.log(!!$().drawer, $.fn.jquery); // true "1.11.3"
8var jq1 = jQuery.noConflict();
9console.log(!!$().drawer, $.fn.jquery); // false "2.2.0"
10</script>

https://api.jquery.com/jQuery.noConflict/
ここに書かれているように $ を与えれば function 内ではわざわざ jQuery と書かなくても同様に扱うことができます。

jQuery
1jQuery(function($) {
2  console.log(jQuery.fn.jquery + '/' + $.fn.jquery); // 1.11.3/1.11.3
3});

投稿2019/04/18 07:44

編集2019/04/18 07:46

x_x

総合スコア13749

jQuery2系はいまや微妙ですが
jQueryを利用する限り$とjQueryは等価です

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
2<script>
3console.log($);
4console.log(jQuery);
5</script>