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

2016/06/21 2017/02/26

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

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

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

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

Contents

1 jQueryのajax関数で外部ファイルを呼び出す
2 例 Windowサイズで外部JSを読み分ける
3 例デバイスによって外部JSを読み分ける
4 よかったこと
5 懸念点
- 5.1 関連記事を見る

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

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

<script type="text/javascript">
jQuery(document).ready(function($) {
    if (条件式) {
    //条件にマッチする場合
        $.ajax({
             url: 'js/xxx.js', //条件にマッチした場合のjsファイルパス
             dataType: 'script',
             cache: false
        });
    } else {
    //条件にマッチしない場合
         $.ajax({
             url: 'js/yyy.js', //条件にマッチしない場合のjsファイルパス
             dataType: 'script',
             cache: false		
        });
    };
});
</script>

jQuery(document).ready(function($) {

if (条件式) {

//条件にマッチする場合

$.ajax({

url: 'js/xxx.js', //条件にマッチした場合のjsファイルパス

dataType: 'script',

cache: false

});

} else {

//条件にマッチしない場合

$.ajax({

url: 'js/yyy.js', //条件にマッチしない場合のjsファイルパス

dataType: 'script',

cache: false

});

};

});

</script>

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

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

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

<script type="text/javascript">
jQuery(document).ready(function($) {
	if (window.matchMedia( '(min-width: 769px)' ).matches) {
	//画面幅769px以上の場合
		$.ajax({
			url: 'js/for_pc.js',
			dataType: 'script',
			cache: false
		});
	} else {
	//画面幅768px以下の場合
		$.ajax({
			url: 'js/for_sp.js',
			dataType: 'script',
			cache: false		
		});
	};
});
</script>

jQuery(document).ready(function($) {

if (window.matchMedia( '(min-width: 769px)' ).matches) {

//画面幅769px以上の場合

$.ajax({

url: 'js/for_pc.js',

dataType: 'script',

cache: false

});

} else {

//画面幅768px以下の場合

$.ajax({

url: 'js/for_sp.js',

dataType: 'script',

cache: false

});

};

});

</script>

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

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

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

<script type="text/javascript">
jQuery(document).ready(function($) {
	var ua = navigator.userAgent;
	if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) {
	//スマートフォンからアクセスの場合
		$.ajax({
			url: 'js/for_sp.js',
			dataType: 'script',
			cache: false
		});
	} else {
	//それ以外の場合
		$.ajax({
			url: 'js/for_pc.js',
			dataType: 'script',
			cache: false		
		});
	};
});
</script>