【jQuery】外部Javascriptファイルを条件分岐で読み分けてみたで!!

      2017/02/26

LINEで送る
Pocket

サイト制作にはもはや外部Javascriptの読み込みは欠かせない。
スライドやギャラリー、メールフォームや描画など多くの機能をJavascriptに依存している。

ところでレスポンシブデザインでのWEB制作ではデバイスやブレークポイントによってJSを読み分ける場面が少なからずある。
コーディングの理想からいえば、デバイスやビューが変わる場合でも、ワンソースで同一の外部ファイルを読み込みたいところだが、

「PCの時はこのスライドで」
「スマホの時だけはこのギャラリーを」

などという要求は少なくない。
だからと言って不要な外部ファイルを読み込んだり。二つもソースを書くのはスマートではない。
様々な場面に応じて、別々の外部Javascriptをそれぞれ読み分けるすべはないものだろうか?
そこで今回は条件分岐による外部Javascriptファイルの読み分けについてまとめてみた。

jQueryのajax関数で外部ファイルを呼び出す

そこで今回はajax関数を用いて外部ファイルを呼び出すという手法。

毎度お世話になります、IF文での条件分岐により、条件にマッチした場合は「xxx.js」を、マッチしなかった場合は「yyy.js」を呼び出す。
これでデバイスやWindowサイズなど様々な条件で外部JSファイルを読み分けることが可能だ。

例 Windowサイズで外部JSを読み分ける

例えばWindowサイズで外部JSファイルを読み分ける場合。
現実的なところでは、PCとスマホで違うギャラリープラグインを読み込む場合など。
PCで使用したいプラグインがレスポンシブに対応していないのだが、
どうしてもそのプラグインの挙動があまりにも気に入ってしまったため、
スマホサイズでは別のレスポンシブ対応プラグインを使用(実際過去にあったケース)

上述の「条件式」部分でWindowサイズを測定し、条件分岐。
ブラウザの画面を狭めて検証する場合にはリロードが必要です。

例 デバイスによって外部JSを読み分ける

上記のWindowサイズに対して、アクセスしたデバイスによって外部JSファイルを読み分ける場合。

上記ではスマートフォンとPCのみの条件分岐としたが、条件を加えることによってタブレットなどの読み分けも可能。
画面サイズに左右されずにデバイスごとの設定が可能。

よかったこと

  • head内の記述がスマートに!!
  • 微妙な画面サイズを気にせずにデバイスごとの設定が可能。
  • 不要なファイルを読み込まずに済む(と思われる)

懸念点

  • 実際の処理の軽重はいかなるものか。要検証。

 - jQuery野郎