【個人メモ用・すぐに見返せる】JavaScriptの基本的な仕組みを理解するため

今回は、筆者がよくjavaScriptの基本を忘れることが多いのでメモがわりにして、記載致します。内容で不備があるかもしれませんが悪しからずお願いします。

JavaScriptのプログラムは基本的に次のような要素で構成されています:

変数: データを格納するためのもの。
- var, let, constを使って変数を定義します。
- 例: let x = 10;
関数: 一連の命令をまとめて再利用可能にしたもの。
- functionキーワードで定義します。
- 例:javascriptコードをコピーするfunction greet(name) { return "Hello, " + name; }
条件分岐: 特定の条件に基づいてコードの実行を制御します。
- if, else if, elseを使用します。
- 例:javascriptコードをコピーするif (x > 10) { console.log("xは10より大きい"); } else { console.log("xは10以下"); }
ループ: 同じコードを繰り返し実行するためのもの。
- for, while, do...whileが代表的なループです。
- 例:javascriptコードをコピーするfor (let i = 0; i < 5; i++) { console.log(i); }
オブジェクトと配列: データを構造化して管理するためのもの。
- オブジェクトはキーと値のペアでデータを保持します。
- 配列はデータのリストを格納します。
- 例:javascriptコードをコピーするlet person = { name: "John", age: 30 }; let colors = ["red", "green", "blue"];

JavaScriptのプログラムがどのように実行されるかを理解することは重要です。これには「実行コンテキスト」と「スコープ」という概念が深く関わります。

実行コンテキスト: JavaScriptコードが実行される環境を指します。主に以下の3つがあります。
- グローバルコンテキスト: プログラムの最初に実行される。
- 関数コンテキスト: 関数が呼び出されたときに作成される。
- Evalコンテキスト: eval()関数が呼ばれたときに作成される（ただし、使用は推奨されません）。
スコープ: 変数や関数がアクセスできる範囲を指します。
- グローバルスコープ: どこからでもアクセスできる変数や関数。
- ローカルスコープ: 関数内でのみアクセスできる変数や関数。

これらを理解することで、予期しないバグを防ぐことができ、変数のライフサイクルをコントロールしやすくなります。

JavaScriptは非同期処理に強力なサポートを提供しています。これにより、重い処理が完了するまで他のコードの実行がブロックされることを避けることができます。

コールバック関数: 処理が完了した後に実行される関数。
- 例: setTimeoutを使った遅延実行。javascriptコードをコピーするsetTimeout(() => { console.log("3秒後に実行"); }, 3000);
Promise: 非同期処理の結果を表すオブジェクト。
- 例:javascriptコードをコピーするlet promise = new Promise((resolve, reject) => { let success = true; if (success) { resolve("成功"); } else { reject("失敗"); } }); promise.then(result => { console.log(result); }).catch(error => { console.log(error); });
async/await: Promiseをより簡潔に扱うための構文。
- 例:javascriptコードをコピーするasync function fetchData() { let data = await fetch('https://api.example.com/data'); return await data.json(); }

JavaScriptエンジンは、コードを機械語に変換して実行します。このプロセスの理解は、コードがどのように最適化され、パフォーマンスが向上するかを理解する助けになります。

イベントループ: JavaScriptがシングルスレッドであるため、タスクを効率的に管理するための仕組みです。これにより、重い処理をブロックすることなく非同期タスクを処理できます。
コールスタック: 関数呼び出しが順に積み上げられ、実行される際に使用されます。
ヒープ: オブジェクトなどのメモリ管理が行われる場所です。

関数は以下のように定義されます。

function 関数名(引数1, 引数2, ...) {
    // 実行するコード
    return 戻り値;
}

関数を定義した後、実際にその関数を使いたいときは「呼び出し」を行います。呼び出しとは、関数名に続けて括弧()をつけ、必要な引数を渡すことです。

function sayHello(name) {
    return "こんにちは、" + name + "さん！";
}

let message = sayHello("太郎");
console.log(message); // こんにちは、太郎さん！

この例では、sayHelloという関数が「こんにちは、○○さん！」というメッセージを作り、message変数にその結果を代入しています。

関数を使うことで、同じコードを繰り返し書かなくて済みます。また、関数は一度作成すると、他の場所からも簡単に使えるようになります。例えば、数値を2倍にする関数を考えてみましょう。

function double(x) {
    return x * 2;
}

let num1 = double(5);
let num2 = double(10);

console.log(num1); // 10
console.log(num2); // 20

このように、関数を使うことでコードの再利用性が高まり、プログラムがシンプルで管理しやすくなります。

関数を日本語レベルで理解するためには、以下のポイントを押さえておくと良いでしょう。

目的を明確にする: 関数が何をするためのものかを明確に理解することが大切です。例えば、「挨拶を返す関数」や「数値を2倍にする関数」など、関数の目的が明確であれば理解しやすくなります。
引数と戻り値を意識する: 引数は関数が必要とするデータ、戻り値は関数が返す結果です。これを意識することで、関数の動作がイメージしやすくなります。
実際に書いてみる: 理解を深めるには、実際にコードを書いてみることが一番です。簡単な関数を自分で作り、それを呼び出して結果を確認してみてください。→ これは常に己に言い続けてます。