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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

4回答

3503閲覧

#jQuery global領域に'$'や'jQuery'をおかずに読み込む方法

B09589

総合スコア6

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/03/16 09:27

編集2022/01/12 10:55

jQueryについて質問です

global領域に'$'や'jQuery'をおかずにjQueryを読み込むには?

global領域に'$'や'jQuery'をおかずに、その代わり、替わりの変数(例えばhoge)に読み込みませたいのですが、どのようにしたら良いですか?

  • 一瞬でもグローバルに$やjQueryを置きたくないです。(既に予約されている$やjQueryがあるので。)
  • jQueryファイルの中身を改変することは問いません。(当然ダウンロードしてきますが。)
  • "そもそもそのようなシーンを疑うべき"という回答は受け付けておりません。

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

方法は2つ考えられます。

  • その1 jQueryをnpm経由で供給して、Webpackなどでバンドルする

このようにすれば、npm経由のjQueryはWebpackに閉じたものになりますので、外側のjQueryと全く別物として動かせます。

  • その2(一瞬だけ切り替わりますが)jQuery.noConflict(true)を使う

もともと複数のjQueryを使うことを考慮して、jQuery.noConflict()というメソッドが用意してあります(リファレンス)。

1番目のjQuery読み込み→2番目のjQuery読み込み→var j = jQuery.noConflict(true)のようにすれば、2番目に読み込んだjQueryはこのj経由で、1番目のjQueryはjQuery$でアクセスできます。<script>を同期読み込みにしておけば、「2番目のjQuery読み込み→noConflict実行」の間に別なJavaScriptが割り込むことはないので、一瞬上書きされることによる問題も生じません。

投稿2018/03/16 12:32

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

jQueryを改変していいなら、

js

1( function( global, factory ) { 2 3 "use strict"; 4 5 if ( typeof module === "object" && typeof module.exports === "object" ) { 6 7 // For CommonJS and CommonJS-like environments where a proper `window` 8 // is present, execute the factory and get jQuery. 9 // For environments that do not have a `window` with a `document` 10 // (such as Node.js), expose a factory as module.exports. 11 // This accentuates the need for the creation of a real `window`. 12 // e.g. var jQuery = require("jquery")(window); 13 // See ticket #14549 for more info. 14 module.exports = global.document ? 15 factory( global, true ) : 16 function( w ) { 17 if ( !w.document ) { 18 throw new Error( "jQuery requires a window with a document" ); 19 } 20 return factory( w ); 21 }; 22 } else { 23 factory( global ); 24 }

↑を↓でいいような気がしますね。

js

1var altjQuery = ( function( global, factory ) { 2//... 3 } else { 4 return factory( global, true ); 5 }

簡単にしか動作確認してないですが。

投稿2018/03/17 02:39

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/04/02 14:24

「jQueryファイルの中身を改変することは問いません。」と書いてあったので、「改変不問」=「改変してもよい」と読んだが、もしかして「改変する回答について質問をしていません」って意味だったのかな? 普通は、不問って読むよね?
guest

0

「一瞬でもグローバルに$やjQueryを置きたくない」という要件は満たせませんが、元の$やjQueryを維持したいという目的なのであれば、以下でどうでしょう?

html

1<script src="1つめのjQuery"></script> 2<script> 3 //元のjQueryや$を退避 4 var tmp_jQuery = jQuery; 5 var tmp_$ = $; 6</script> 7<script> src="2つめのjQuery"></script> 8<script> 9 //2つめのjQueryや$を退避させて 10 var jQuery2 = jQuery; 11 var $2 = $; 12 //先ほど退避させた元のjQueryや$を元に戻す 13 jQuery = tmp_jQuery; 14 $ = tmp_$; 15</script>

投稿2018/03/16 10:29

TetsuyaZama

総合スコア216

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

絶対におすすめはしませんが「ajax.googleapis.com」はクロスサイトでテキストを返してくれるので
非同期でjsを文字列として読み込んで、evalしてみました
いまのままだとたぶんどこかバグを含んでいますが、細かくソースを検証していけば
動かないことは無いと思います

javacript

1<script> 2var async=fasle; 3var ajax = new window.XMLHttpRequest(); 4ajax.open("get","http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",async); 5ajax.onreadystatechange=function(){ 6 if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){ 7 eval(ajax.responseText.replace(new RegExp("\$(?!/)","mig"),"_$").replace(new RegExp("jQuery","mig"),"__$")); 8 } 9} 10ajax.send(null); 11</script> 12 13<script> 14_$(function(){ 15 console.log(1); 16}); 17__$(function(){ 18 console.log(2); 19}); 20

「$」を「_$」に、「jQuery」を「__$」に変換しました

投稿2018/03/16 13:12

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問