JavaScriptスクリプトタグ参照方法

JavaScriptで現在実行中のスクリプトをロードしたスクリプトタグを参照する方法

JavaScriptにおいて、現在実行中のスクリプトをロードしたスクリプトタグを参照する方法には、主に2つのアプローチがあります。

document.currentScriptプロパティ

• 現在実行中のスクリプトタグへの参照を直接取得します。
• 最も直接的な方法です。

const currentScript = document.currentScript;
console.log(currentScript.src); // ロードされたスクリプトのURLを出力

arguments.callee.callerプロパティ

• 現在実行中の関数の呼び出し元関数を取得し、その呼び出し元関数が定義されているスクリプトタグを参照します。
• より古いアプローチですが、まだ使用可能です。

function getCurrentScript() {
  const caller = arguments.callee.caller;
  if (caller) {
    return caller.toString().match(/^\s*function\s*(\w+)\s*\(\)/)[1]; // 関数名を抽出
  }
  return null;
}

const scriptName = getCurrentScript();
console.log(scriptName); // ロードされたスクリプトの関数名をログ出力

注意

• document.currentScriptは、ブラウザのサポート状況によっては使用できない場合があります。その場合は、arguments.callee.callerを使用するか、他の方法を検討する必要があります。
• arguments.callee.callerは、非推奨とされており、将来のJavaScriptバージョンでは削除される可能性があります。そのため、可能な限りdocument.currentScriptを使用することを推奨します。

親要素の取得

• 現在のスクリプトタグの親要素を取得するには、parentElementプロパティを使用します。

const currentScript = document.currentScript;
const parentElement = currentScript.parentElement;
console.log(parentElement.tagName); // 親要素のタグ名を出力

JavaScriptスクリプトタグ参照方法のコード解説

const currentScript = document.currentScript;
console.log(currentScript.src); // ロードされたスクリプトのURLを出力

• srcプロパティは、スクリプトタグのsrc属性の値（スクリプトのURL）を取得します。
• document.currentScriptは、現在実行中のスクリプトタグへの参照を取得します。

function getCurrentScript() {
  const caller = arguments.callee.caller;
  if (caller) {
    return caller.toString().match(/^\s*function\s*(\w+)\s*\(\)/)[1]; // 関数名を抽出
  }
  return null;
}

const scriptName = getCurrentScript();
console.log(scriptName); // ロードされたスクリプトの関数名をログ出力

• caller.toString().match(/^\s*function\s*(\w+)\s*\(\)/)[1]は、呼び出し元関数の文字列から関数名を抽出します。
• arguments.callee.callerは、現在実行中の関数の呼び出し元関数を取得します。

const currentScript = document.currentScript;
const parentElement = currentScript.parentElement;
console.log(parentElement.tagName); // 親要素のタグ名を出力

• tagNameプロパティは、親要素のタグ名を取得します。
• parentElementプロパティは、現在のスクリプトタグの親要素を取得します。

スクリプトタグのid属性を利用する

• スクリプトタグに固有のid属性を設定し、そのid属性を使用してスクリプトタグを参照します。

<script id="myScript">
  // スクリプトの内容
</script>

<script>
  const myScript = document.getElementById('myScript');
  console.log(myScript.src); // ロードされたスクリプトのURLを出力
</script>

<script data-script-name="myScript">
  // スクリプトの内容
</script>

<script>
  const myScript = document.querySelector('[data-script-name="myScript"]');
  console.log(myScript.src); // ロードされたスクリプトのURLを出力
</script>

スクリプトタグのインデックスを利用する

• スクリプトタグの配列からインデックスを使用してスクリプトタグを参照します。

const scripts = document.getElementsByTagName('script');
const currentScript = scripts[scripts.length - 1];
console.log(currentScript.src); // ロードされたスクリプトのURLを出力

• スクリプトタグのインデックスを使用する場合は、スクリプトタグの順序が変更されないように注意する必要があります。
• スクリプトタグに固有の識別子が必要な場合は、id属性またはdata-*属性を使用することができます。
• document.currentScriptがサポートされている場合は、一般的に最も直接的で簡潔な方法です。
• これらの代替手法は、特定の状況や要件に合わせて選択することができます。