今から、WordPressでスタイルシートを書く際、特定のページでしか、
関数を実行しない処理を示します。
const currentURL = window.location.href;
const cn_j_j_7 = "https://mf-ken.com/note/cn-j-j-7";
const cn_j_j_8 = "https://mf-ken.com/note/cn-j-j-8";
if(currentURL.startsWith(cn_j_j_7)){
Channel_1();
}else if(currentURL.startsWith(cn_j_j_8)){
Channel_2();
}
JavaScript(後に説明するグローバルスコープ)において、
if文、for文、あるいは’const’や’let’といった要素は、
ページを開いた瞬間に、順番に実行されます。
このコードではif文で関数を実行しています。
関数とは、要素の役割の一まとまりを、まとまりごとに、
視覚的にも分かり易く整理する事も出来ますが、
関数には関数スコープという「ルール」「条例」のようなものが存在します。
ChatGPTより
JavaScriptにおけるスコープ(scope)は、
変数や関数がどこからアクセス可能かを定義する重要な概念です。
スコープは、コード内で変数や関数が存在する有効な範囲を示します。
JavaScriptには2つの主要なスコープがあります。
グローバルスコープ
グローバルスコープは、プログラム全体からアクセス可能な最も外側のスコープです。
グローバルスコープ内で宣言された変数や関数は、どこからでもアクセスできます。
ブラウザの場合、ウェブページを読み込んだ際に自動的に生成される
「windowオブジェクト」も、グローバルスコープ内に存在します。
var globalVariable = 10;
function globalFunction() {
console.log("This is a global function.");
}
ローカルスコープ
ローカルスコープは、関数内で定義された変数や関数がアクセス可能な範囲です。
関数が呼び出されると、その関数内で宣言された変数や関数はローカルスコープ内に存在し、
外部からは直接アクセスできません。
function localFunction() {
var localVar = 5;
console.log("This is a local variable: " + localVar);
}
‘localVar’は’localFunction’内でのみアクセス可能であり、
関数外からはアクセスできません。
スコープのルールに基づいて、変数や関数の検索順序が決まります。
変数を参照する際、JavaScriptは最も内側のスコープから始めて、
外側のスコープに向かって探索を行います。
このプロセスは「スコープチェーン」と呼ばれます。
変数が見つかると、その値が使用されます。
もし同じ名前の変数が複数のスコープに存在する場合、
最も内側のスコープにある変数が優先されます。
以下はスコープの例です:
var globalVar = 1;
function outerFunction() {
var outerVar = 2;
function innerFunction() {
var innerVar = 3;
console.log(globalVar); // グローバル変数にアクセス
console.log(outerVar); // 外側の関数の変数にアクセス
console.log(innerVar); // 自身の変数にアクセス
}
innerFunction();
}
outerFunction();
このコードでは、’innerFunction’は最も内側のスコープで変数を探索し、
見つからない場合は外側のスコープを順番に検索します。
そのため、’innerVar’は内側のスコープで見つかり、
‘outerVar’は外側のスコープで見つかります。
‘globalVar’は最も外側のグローバルスコープで見つかります。
スコープの理解は、変数の名前の衝突を防ぎ、
プログラムの正確性を維持するために非常に重要です。
適切なスコープ内で変数や関数を宣言し、必要なときにアクセスできるようにすることが、
良いコードを書くための基本的なスキルです。
関数スコープを上手く利用しよう
先のコードの条件分岐では、特定のurlまたは、特定のurlで始まるページのみ、
関数を実行しています。
ここでは’Channel_1’関数、’Channel_2’関数に対し、
ページごとに実行したいJavaScriptのコードを詰め込んでいます。
こうする事によって、グローバルスコープという元の環境を汚す事なく、
異なったページで実行したくないコードを使い分けられるのです。
コードでは使用上、関数を一回しか呼び出していませんが、
関数は何度でも呼び出す事が出来ます。
今回は、特定のページでしか、関数を実行しない方法と、
スコープに関するおさらいをしました。