【備忘録】画面幅に基づいて特定のスクリプトを読み込む

やりたい事

html上にJavaScriptのタグを、スマホサイズの時のみ読み込ませる

書いたJavaScript

JavaScript

function loadScriptIfMobileWidth() {
    // 既にスクリプトが追加されているかチェック
    if (document.getElementById('lpcats_cv_script')) {
      return; // 既にスクリプトが追加されている場合は何もしない
    }

    if (window.innerWidth <= 767) {
      var script = document.createElement('script');
      script.src = 'https://サンプル.js';
      script.id = 'lpcats_cv_script'; // スクリプトにIDを付ける

      // sp-onlyクラスを持つ<main>要素を取得
      var spOnlyElement = document.querySelector('main.sp-only');
      if (spOnlyElement) {
        spOnlyElement.appendChild(script); // sp-only要素にスクリプトを追加
      } else {
        console.warn('No <main> element with class "sp-only" found.');
      }
    }
  }

  // ページが読み込まれた時にチェック
  window.addEventListener('load', loadScriptIfMobileWidth);

  // ウィンドウのサイズが変更された時にチェック
  window.addEventListener('resize', loadScriptIfMobileWidth);

全体の流れ

• ページが読み込まれた時やウィンドウのサイズが変更された時にloadScriptIfMobileWidth関数が呼び出される
• 関数は、既にスクリプトが追加されているかを確認し、追加されていない場合のみ処理を進める
• ウィンドウの幅が767ピクセル以下である場合、新しいスクリプト要素を作成し、特定の要素に追加する

1. loadScriptIfMobileWidth 関数

JavaScript

function loadScriptIfMobileWidth() {

この関数は、ページの読み込み時やウィンドウサイズの変更時に呼び出されます。

2. 既にスクリプトが追加されているかチェック

JavaScript

  if (document.getElementById('lpcats_cv_script')) {
    return;
  }

ここでは、IDがlpcats_cv_scriptのスクリプト要素が既に存在するかを確認します。存在する場合は何もせずに関数を終了します。

3. 画面幅のチェック

JavaScript

   if (window.innerWidth <= 767) {

次に、ウィンドウの幅が767ピクセル以下（モバイルデバイスの幅）かどうかを確認します。

4. スクリプト要素の作成

JavaScript

    var script = document.createElement('script');
    script.src = 'https://サンプル.js';
    script.id = 'lpcats_cv_script';

新しいスクリプト要素を作成し、そのsrc属性に指定されたURLを設定し、IDをlpcats_cv_scriptに設定します。

5. 特定の要素へのスクリプトの追加

JavaScript

    var spOnlyElement = document.querySelector('main.sp-only');
    if (spOnlyElement) {
      spOnlyElement.appendChild(script);
    } else {
      console.warn('No <main> element with class "sp-only" found.');
    }

ここでは、クラスsp-onlyを持つ要素を探し、それに対してスクリプトを追加します。もしその要素が見つからない場合は、コンソールに警告メッセージを表示します。

6. イベントリスナーの設定

JavaScript

window.addEventListener('load', loadScriptIfMobileWidth);
window.addEventListener('resize', loadScriptIfMobileWidth);

ページが読み込まれた時（loadイベント）およびウィンドウのサイズが変更された時（resizeイベント）に、loadScriptIfMobileWidth関数を呼び出します。

関数・メソッドの意味

1. function

関数を定義するためのキーワードです。関数は、特定のタスクを実行するための再利用可能なブロックです。

JavaScript

function loadScriptIfMobileWidth() {

このコードは loadScriptIfMobileWidth という名前の関数を定義しています。

2. document.getElementById

指定されたIDを持つHTML要素を取得するためのメソッドです。

JavaScript

if (document.getElementById('lpcats_cv_script')) {
  return;
}

ここでは、IDが lpcats_cv_script の要素が存在するかをチェックします。存在する場合は関数を終了します（returnは関数を終了させる）。

3. window.innerWidth

ブラウザウィンドウの内側の幅（ピクセル単位）を返すプロパティです。

JavaScript

if (window.innerWidth <= 767) {

ここでは、ウィンドウの幅が767ピクセル以下かどうかを確認しています。モバイルデバイスかどうかを判断するために使われます。

4. document.createElement

新しいHTML要素を作成するためのメソッドです。

JavaScript

var script = document.createElement('script');

ここでは新しいscript要素を作成しています。

5. script.src

作成したスクリプト要素に読み込むスクリプトのURLを設定します。

JavaScript

script.src = 'https://サンプル.js';

ここでは、スクリプトのソースURLを指定しています。

6. script.id

要素にIDを設定します。IDは文書内で一意でなければなりません。

JavaScript

script.id = 'lpcats_cv_script';

ここでは、作成したスクリプト要素に lpcats_cv_script というIDを設定しています。

7. document.querySelector

指定されたCSSセレクタに一致する最初の要素を返すメソッドです。

JavaScript

var spOnlyElement = document.querySelector('main.sp-only');

ここでは、main タグで sp-only クラスを持つ最初の要素を取得しています。
一方、querySelectorAll()メソッドは、同一のCSSセレクターが付いた要素を全て配列で格納することができます。

8. spOnlyElement.appendChild

特定の要素に子要素を追加するためのメソッドです。

JavaScript

if (spOnlyElement) {
  spOnlyElement.appendChild(script);
}

ここでは、spOnlyElement が存在する場合、その要素に対して作成したスクリプト要素を追加しています。

9. console.warn

コンソールに警告メッセージを表示するメソッドです。

JavaScript

else {
  console.warn('No <main> element with class "sp-only" found.');
}

ここでは、spOnlyElement が見つからなかった場合に警告メッセージを表示しています。

10. window.addEventListener

特定のイベントが発生した時に呼び出される関数を設定するためのメソッドです。

JavaScript

window.addEventListener('load', loadScriptIfMobileWidth);
window.addEventListener('resize', loadScriptIfMobileWidth);

ここでは、load イベント（ページが読み込まれた時）と resize イベント（ウィンドウのサイズが変更された時）に loadScriptIfMobileWidth 関数を実行するように設定しています。