script実行制御

2022 10/19

2022-10-19 2022-10-19

この記事の目次

ページごとに制御する

とあるjsをindex.htmlには適用したいけど、それ以外のhtmlでは読み込ませたくないと言った場合です。

<body data-page="index">

//コンテンツ

</body>

任意のdata属性を追加してあげます。

(function() {

  // ページ名を取得
  const pageName = document.body.dataset.page;
  console.log(pageName);

})();

return文は関数の中にないとエラーが出るので、ここでは即時関数で記述部分を囲ってその中に書きます

※即時関数はスコープの汚染も防げるので処理ごとに関数で囲むといいと思います

data属性値を取得してみるとこんな具合でコンソールでdata属性値が確認できます

(function() {
  
  // ページ名を取得
  const pageName = document.body.dataset.page;
  if (pageName != "index") return;
  console.log("return");

})();

これでdata-page属性値がindex以外だとreturnされ、console.log("return");は実行されません

起点となるElementで制御する

<p class="js-hoge-flash01">発火点01</p>

(function() {

  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");

})();

先ほどと同じように記述します

コンソールも実行されてます

1つのスクリプトに書く場合

JS分割してexportしてたら単純にそれぞれのファイル内の条件分岐でreturnさせれば終わりですが、script.jsに全ての処理を書いているという場合ではそれ以降の処理が止まってしまいます

<!-- index.htmlでは使わない -->
<!-- <p class="js-hoge-flash01">発火点01</p> -->

<p class="js-hoge-flash01">発火点02</p>

(function() {
  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");
  
  const hogeFlash02 = document.querySelector(".js-hoge-flash02");
  if(!hogeFlash02) return;
  console.log("hoge Flashed 02");
})();

例えばhogeFlash01をindex.htmlでは使わないけど他のhtmlで使用する場合にこのような記述を行うと
if(!hogeFlash01) return;の時点で処理が止まるため、console.log("hoge Flashed 02");が実行されなくなってしまいます

(function() {
  const hogeFlash01 = document.querySelector(".js-hoge-flash01");
  if(!hogeFlash01) return;
  console.log("hoge Flashed01");
})();
  
(function() {
  const hogeFlash02 = document.querySelector(".js-hoge-flash02");
  if(!hogeFlash02) return;
  console.log("hoge Flashed 02");
})();