🚀 JavaScriptの基礎（第3週）：すべての開発者が知っておくべき概念を理解する

「JavaScriptのコードを書くことは一つのことですが、背後で何が起こっているかを理解することが、より良い開発者になるための鍵です。」

JavaScriptを学び始めた頃、私は変数を宣言したり関数を書いたりする方法を知っていました。しかし、よく次のような質問を抱えていました：

  • なぜ変数を宣言する方法が3つあるのか？
  • ホイスティングとは一体何なのか？
  • JavaScriptはどのようにコードを実行するのか？
  • なぜ内部関数は親関数の変数にアクセスできるのか？
  • thisキーワードは実際には何を指すのか？
  • なぜ開発者はクリーンなコードについて常に話すのか？

今週、私は単に構文を暗記するのではなく、これらのJavaScriptのコアコンセプトの理解に焦点を当てました。

この記事では、それぞれの概念を初心者向けに例と実践的な説明を交えて解説します。

📚 取り上げるトピック

  • 変数（var、let、const）
  • ホイスティング
  • レキシカルスコープ
  • 実行コンテキスト
  • コールスタック
  • クロージャ
  • thisバインディング
  • DRY原則
  • KISS原則

最初から始めましょう。

📦 JavaScriptにおける変数

変数とは？

変数とは、メモリにデータを格納するための名前の付いたコンテナです。

同じ値を何度も書く代わりに、変数の中に格納して必要なときに再利用します。

例：

let name = "Sai";

console.log(name);

Enter fullscreen mode Exit fullscreen mode

出力

Sai

Enter fullscreen mode Exit fullscreen mode

ここで、

  • let → 変数宣言キーワード
  • name → 変数名
  • "Sai" → 格納された値

なぜ変数が必要なのか？

次のように書くことを想像してみてください：

console.log("Sai");
console.log("Sai");
console.log("Sai");

Enter fullscreen mode Exit fullscreen mode

値が変わった場合、すべての出現箇所を更新する必要があります。

変数を使うと、

let name = "Sai";

console.log(name);
console.log(name);
console.log(name);

Enter fullscreen mode Exit fullscreen mode

1行を変更するだけで、すべての使用箇所が更新されます。

変数は次の点を向上させます：

  • 可読性
  • 再利用性
  • 保守性

変数の種類

JavaScriptでは、変数を宣言する方法が3つ提供されています。

  • var
  • let
  • const

3つとも変数を作成しますが、動作は異なります。

var

varはJavaScriptの最初のバージョンで導入されました。

特徴：

  • 関数スコープ
  • 再宣言可能
  • 再代入可能
  • ホイスティングされる

例

var city = "Hyderabad";

var city = "Bangalore";

console.log(city);

Enter fullscreen mode Exit fullscreen mode

出力

Bangalore

Enter fullscreen mode Exit fullscreen mode

varは再宣言を許可するため、既存の値を誤って上書きしてしまう可能性があります。

let

letはES6で導入されました。

特徴

  • ブロックスコープ
  • 再宣言不可
  • 再代入可能

例

let age = 20;

age = 21;

console.log(age);

Enter fullscreen mode Exit fullscreen mode

出力

21

Enter fullscreen mode Exit fullscreen mode

const

constは変数を再代入すべきでない場合に使用されます。

特徴

  • ブロックスコープ
  • 再宣言不可
  • 再代入不可 
const PI = 3.14;

console.log(PI);

Enter fullscreen mode Exit fullscreen mode

出力

3.14

Enter fullscreen mode Exit fullscreen mode

📈 ホイスティング

ホイスティングとは？

ホイスティングとは、コードを実行する前に宣言を処理するJavaScriptの動作です。

これはコードが物理的に移動することを意味するのではなく、メモリ作成フェーズ中に、JavaScriptが実行開始前に変数や関数を準備することを意味します。

例

console.log(language);

var language = "JavaScript";

Enter fullscreen mode Exit fullscreen mode

出力

undefined

Enter fullscreen mode Exit fullscreen mode

内部的にはJavaScriptは次のように扱います：

var language;

console.log(language);

language = "JavaScript";

Enter fullscreen mode Exit fullscreen mode

letおよびconstで宣言された変数もホイスティングされますが、初期化されるまで一時的デッドゾーン（TDZ）内に留まります。

🌍 レキシカルスコープ

スコープは変数にアクセスできる場所を決定します。

レキシカルスコープとは、内部関数が外側の関数で宣言された変数にアクセスできることを意味し、その理由はその記述場所にあります。

例

function outer(){

    let message="Hello";

    function inner(){

        console.log(message);

    }

    inner();

}

outer();

Enter fullscreen mode Exit fullscreen mode

出力

Hello

Enter fullscreen mode Exit fullscreen mode

JavaScriptはまずinner()内を検索します。変数が見つからない場合は、外側の関数を検索します。

この検索プロセスはスコープチェーンと呼ばれます。

⚙️ 実行コンテキスト

JavaScriptがコードを実行する前に、実行コンテキストを作成します。

これはJavaScriptの作業領域のようなものです。

次を格納します：

  • 変数
  • 関数
  • スコープ
  • thisの値

すべての実行コンテキストには2つのフェーズがあります。

メモリ作成フェーズ

このフェーズでは、

  • 変数にメモリが割り当てられます。
  • var変数はundefinedで初期化されます。
  • 関数宣言が格納されます。

実行フェーズ

このフェーズでは、

  • 変数に値が割り当てられます。
  • ステートメントが1つずつ実行されます。
  • 関数呼び出しは新しい実行コンテキストを作成します。

📚 コールスタック

コールスタックは関数の実行を追跡します。

これは後入れ先出し（LIFO）の原則に従います。

例

function first(){

    second();

}

function second(){

    console.log("Inside Second");

}

first();

Enter fullscreen mode Exit fullscreen mode

出力

Inside Second

Enter fullscreen mode Exit fullscreen mode

実行フロー

first()

↓

second()

↓

console.log()

↓

Return

↓

Return

Enter fullscreen mode Exit fullscreen mode

🔒 クロージャ

JavaScriptの最も強力な機能の1つがクロージャです。

クロージャは、内部関数が外側の関数の変数を、外側の関数の実行が終了した後も記憶している場合に作成されます。

例

function counter(){

    let count = 0;

    return function(){

        count++;

        console.log(count);

    }

}

const increment = counter();

increment();

increment();

increment();

Enter fullscreen mode Exit fullscreen mode

出力

1
2
3

Enter fullscreen mode Exit fullscreen mode

クロージャは通常、次の目的で使用されます：

  • カウンター
  • データのプライバシー
  • イベントハンドラ
  • モジュールパターン

🎯 thisの理解

thisキーワードは、関数を呼び出すオブジェクトを指します。

その値は関数の呼び出され方によって異なります。

暗黙的バインディング 

const user = {

    name:"Sai",

    greet(){

        console.log(this.name);

    }

}

user.greet();

Enter fullscreen mode Exit fullscreen mode

出力

Sai

Enter fullscreen mode Exit fullscreen mode

明示的バインディング

JavaScriptはcall()、apply()、bind()を提供し、thisが何を指すかを明示的に決定できます。

function greet(){

    console.log(this.name);

}

const user={

    name:"Sai"

};

greet.call(user);

Enter fullscreen mode Exit fullscreen mode

出力

Sai

Enter fullscreen mode Exit fullscreen mode

newバインディング 

function Student(name){

    this.name=name;

}

const s1=new Student("Sai");

console.log(s1.name);

Enter fullscreen mode Exit fullscreen mode

出力

Sai

Enter fullscreen mode Exit fullscreen mode

アロー関数

アロー関数は独自のthisを持ちません。

代わりに、周囲のスコープから継承します。

✨ DRY原則

DRYとは

Don't Repeat Yourself（同じことを繰り返すな）

コードを繰り返す代わりに、

console.log("Welcome Sai");

console.log("Welcome Rahul");

Enter fullscreen mode Exit fullscreen mode

次のように書きます

function greet(name){

    console.log(`Welcome ${name}`);

}

greet("Sai");

greet("Rahul");

Enter fullscreen mode Exit fullscreen mode

利点

  • 再利用可能なコード
  • 容易な保守
  • 重複の削減

💡 KISS原則

KISSとは

Keep It Simple, Stupid（シンプルに保て、愚か者）

シンプルなコードは複雑なコードよりも理解しやすいです。

次の代わりに

function isEven(num){

    if(num%2===0){

        return true;

    }

    else{

        return false;

    }

}

Enter fullscreen mode Exit fullscreen mode

次のように書きます

function isEven(num){

    return num%2===0;

}

Enter fullscreen mode Exit fullscreen mode

シンプルなコードは次の点で優れています：

  • デバッグしやすい
  • 保守しやすい
  • 理解しやすい

🎯 主な要点

今週の学習を終えて、私は次のことを理解しました：

  • 変数はデータを格納する。
  • ホイスティングはメモリ作成中に起こる。
  • レキシカルスコープは変数にアクセスできる場所を決定する。
  • 実行コンテキストはコード実行のための環境を提供する。
  • コールスタックは関数の実行を管理する。
  • クロージャは関数が終了した後も変数を保持する。
  • thisの値は関数の呼び出され方によって決まる。
  • DRYとKISSに従うことで、クリーンで保守性の高いコードを書ける。

📝 結論

JavaScriptを学ぶことは、コードを書くことだけではありません。言語が背後でどのように動作するかを理解することです。実行コンテキスト、スコープ、クロージャ、thisバインディングなどの概念は、なぜコードがそのように動作するのかを説明します。これらの基礎をDRYやKISSのようなクリーンコーディングの原則と組み合わせることで、正しいだけでなく、読みやすく、保守しやすく、拡張しやすいコードを書くことができます。