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

# やりたい事

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


# 書いたJavaScript

```ruby: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);
```
:::note info
# 全体の流れ

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


## 1. loadScriptIfMobileWidth 関数
```ruby:JavaScript
function loadScriptIfMobileWidth() {
```
この関数は、ページの読み込み時やウィンドウサイズの変更時に呼び出されます。


## 2. 既にスクリプトが追加されているかチェック
```ruby:JavaScript
  if (document.getElementById('lpcats_cv_script')) {
    return;
  }
```
ここでは、IDがlpcats_cv_scriptのスクリプト要素が既に存在するかを確認します。存在する場合は何もせずに関数を終了します。


## 3. 画面幅のチェック
```ruby:JavaScript
   if (window.innerWidth <= 767) {
```
次に、ウィンドウの幅が767ピクセル以下（モバイルデバイスの幅）かどうかを確認します。


## 4. スクリプト要素の作成
```ruby:JavaScript
    var script = document.createElement('script');
    script.src = 'https://サンプル.js';
    script.id = 'lpcats_cv_script';
```
新しいスクリプト要素を作成し、そのsrc属性に指定されたURLを設定し、IDをlpcats_cv_scriptに設定します。


## 5. 特定の要素へのスクリプトの追加
```ruby: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を持つ<main>要素を探し、それに対してスクリプトを追加します。もしその要素が見つからない場合は、コンソールに警告メッセージを表示します。

## 6. イベントリスナーの設定
```ruby:JavaScript
window.addEventListener('load', loadScriptIfMobileWidth);
window.addEventListener('resize', loadScriptIfMobileWidth);
```
ページが読み込まれた時（loadイベント）およびウィンドウのサイズが変更された時（resizeイベント）に、loadScriptIfMobileWidth関数を呼び出します。




:::note info
# 関数・メソッドの意味
:::

## 1. function
関数を定義するためのキーワードです。関数は、特定のタスクを実行するための再利用可能なブロックです。
```ruby:JavaScript
function loadScriptIfMobileWidth() {
```
このコードは loadScriptIfMobileWidth という名前の関数を定義しています。


## 2. document.getElementById
指定されたIDを持つHTML要素を取得するためのメソッドです。
```ruby:JavaScript
if (document.getElementById('lpcats_cv_script')) {
  return;
}
```
ここでは、IDが lpcats_cv_script の要素が存在するかをチェックします。存在する場合は関数を終了します（returnは関数を終了させる）。


## 3. window.innerWidth
ブラウザウィンドウの内側の幅（ピクセル単位）を返すプロパティです。
```ruby:JavaScript
if (window.innerWidth <= 767) {
```
ここでは、ウィンドウの幅が767ピクセル以下かどうかを確認しています。モバイルデバイスかどうかを判断するために使われます。



## 4. document.createElement
新しいHTML要素を作成するためのメソッドです。
```ruby:JavaScript
var script = document.createElement('script');
```
ここでは新しいscript要素を作成しています。


## 5. script.src
作成したスクリプト要素に読み込むスクリプトのURLを設定します。
```ruby:JavaScript
script.src = 'https://サンプル.js';
```
ここでは、スクリプトのソースURLを指定しています。



## 6. script.id
要素にIDを設定します。IDは文書内で一意でなければなりません。
```ruby:JavaScript
script.id = 'lpcats_cv_script';
```
ここでは、作成したスクリプト要素に lpcats_cv_script というIDを設定しています。



## 7. document.querySelector
指定されたCSSセレクタに一致する最初の要素を返すメソッドです。
```ruby:JavaScript
var spOnlyElement = document.querySelector('main.sp-only');
```
ここでは、main タグで sp-only クラスを持つ最初の要素を取得しています。
一方、querySelectorAll()メソッドは、同一のCSSセレクターが付いた要素を全て配列で格納することができます。


## 8. spOnlyElement.appendChild
特定の要素に子要素を追加するためのメソッドです。
```ruby:JavaScript
if (spOnlyElement) {
  spOnlyElement.appendChild(script);
}
```
ここでは、spOnlyElement が存在する場合、その要素に対して作成したスクリプト要素を追加しています。




## 9. console.warn
コンソールに警告メッセージを表示するメソッドです。
```ruby:JavaScript
else {
  console.warn('No <main> element with class "sp-only" found.');
}
```
ここでは、spOnlyElement が見つからなかった場合に警告メッセージを表示しています。


## 10. window.addEventListener
特定のイベントが発生した時に呼び出される関数を設定するためのメソッドです。
```ruby:JavaScript
window.addEventListener('load', loadScriptIfMobileWidth);
window.addEventListener('resize', loadScriptIfMobileWidth);
```
ここでは、load イベント（ページが読み込まれた時）と resize イベント（ウィンドウのサイズが変更された時）に loadScriptIfMobileWidth 関数を実行するように設定しています。