JavaScriptの関数とスコープ

今から、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のコードを詰め込んでいます。

こうする事によって、グローバルスコープという元の環境を汚す事なく、
異なったページで実行したくないコードを使い分けられるのです。

コードでは使用上、関数を一回しか呼び出していませんが、
関数は何度でも呼び出す事が出来ます。

今回は、特定のページでしか、関数を実行しない方法と、
スコープに関するおさらいをしました。

タイトルとURLをコピーしました