BLOG2018.03.19複数のバージョンのjQueryを共存させる方法こんにちは。デザイナーのSUZUKIです。今回は複数のバージョンのjQueryを同時に利用する方法を紹介します。Webページを作る上でjQueryのプラグインはよく使います。複数のプラグインを使うときには注意が必要になります。既存Webページにスクリプト追加依頼を受けた際も注意が必要になります。古いjQueryを読み込んでおり、新しいバージョンだと既存の動作が動かない場合があります。本来は異なるバージョンを同時に読み込むことはあまりオススメできません。最後に読み込んだjQueryのバージョンが優先されます。src="jquery-1.11.1.min.js."></script>この場合は「1.11.1」のバージョンが優先されます。「noConflict()」を使い、複数のバージョンをでも機能するようにします。$.noConflict(true);</script>noConflictの引数にtrueを指定し、jQueryオブジェクトを別名に書き換えます。上記の場合、1.11.1のjQueryオブジェクトが「$1111」として、1.2.6のjQueryオブジェクトが「$」、「jQuery」として使用できます。例として「$1111」としていますが、任意なので、指定はなんでも構いません。下記のようにプラグイン本体のjavascriptを囲います。プラグイン本体のjavascript})($1111)こうするとプラグイン本体内の「$」は「$1111」として認識します。間違えが起きやすいのでやめたほうがいいでしょう。以上で共存方法は終わりですが、ちゃんと複数のバージョンが読み込めているか確認をする必要があります。このあとに説明する方法を使って読み込みの確認をしてください。下記のように記述します。開発ツールを開き、コンソールの画面を確認します。下記のような画面になるので、jQueryのバージョンとjQueryオブジェクトを確認してください。※下記はFirefoxの画面です。まとめサイトの規模が大きいとバージョンを共存する必要が出てきます。サイトの制作時期が古かったり、制作会社が複数だったりするとよくある悩みです。今回はjQueryの複数バージョンで説明しましたが、prototype.jsと共存する際にも使える方法なので、試してみてください。共存する場合は、ちゃんと読み込めているかの確認は忘れないようにしましょう!難しい方法ではないので、ぜひ使ってみてください。参考リンク下記は参考にしたサイトになります。詳しく知りたい方はどうぞ。http://webnonotes.com/javascript-2/jquery-noconflict/http://rei19.hatenablog.com/entry/2013/03/25/000818この記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。