複数のJavascriptファイルをPC表示だけ読込んで、スマホの時は読込ませない記述方法

けっこう強引というか原始的な書き方で実装してみましたが、恐らくベストプラクティスではないのであくまで「こういうやり方もあるね」くらいの感じで…

ファイル1つとかだとajax使ったりするやり方があるっぽいですが、複数のファイルとなると、なかなか参考になりそうな記事も探せなくて、結局こういう実現方法になってしまいました。

実現したい事

・PCではJavascriptファイル（test.js、test2.js、test3.js）を読み込みたい

・スマホ時はJavascriptファイル（test.js、test2.js、test3.js）を読み込みたくない

実践

まず、html側で出力用の場所を作りました。

スクリプトファイルなのでhead内に入れるのがセオリーかもしれませんが、body閉じ前とかにあえて記述するパターンもあると思うので今回は自由な場所に吐き出せるような形で。

【HTML】

<div id="output"></div>

出力場所が決まったら、後はscriptでウィンドウサイズ767px以下の時の処理を書く。

【Javascript】

<script>
$(function(){
// ウィンドウサイズ767以上のみ読込
if ($(window).width() > 767 ) {
  var request = '<script defer src="test.js"/><script defer src="test2.js"/><script defer src="test3.js"/>';
  $('#output').html(request);
};
});
</script>

「defer」をつけてるのは読込や実行のタイミング的なものですが不要なら取ったらいいかと思います。

今回の内容には直接関係ナシです。

では現場から以上です！