今回は、筆者がよくjavaScriptの基本を忘れることが多いのでメモがわりにして、記載致します。内容で不備があるかもしれませんが悪しからずお願いします。
1. 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"];
2. JavaScriptの実行コンテキストとスコープ
JavaScriptのプログラムがどのように実行されるかを理解することは重要です。これには「実行コンテキスト」と「スコープ」という概念が深く関わります。
- 実行コンテキスト: JavaScriptコードが実行される環境を指します。主に以下の3つがあります。
- グローバルコンテキスト: プログラムの最初に実行される。
- 関数コンテキスト: 関数が呼び出されたときに作成される。
- Evalコンテキスト:
eval()
関数が呼ばれたときに作成される(ただし、使用は推奨されません)。
- スコープ: 変数や関数がアクセスできる範囲を指します。
- グローバルスコープ: どこからでもアクセスできる変数や関数。
- ローカルスコープ: 関数内でのみアクセスできる変数や関数。
これらを理解することで、予期しないバグを防ぐことができ、変数のライフサイクルをコントロールしやすくなります。
3. 非同期処理
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); });
- 例:javascriptコードをコピーする
- async/await: Promiseをより簡潔に扱うための構文。
- 例:javascriptコードをコピーする
async function fetchData() { let data = await fetch('https://api.example.com/data'); return await data.json(); }
- 例:javascriptコードをコピーする
4. JavaScriptの内部仕組み
JavaScriptエンジンは、コードを機械語に変換して実行します。このプロセスの理解は、コードがどのように最適化され、パフォーマンスが向上するかを理解する助けになります。
- イベントループ: JavaScriptがシングルスレッドであるため、タスクを効率的に管理するための仕組みです。これにより、重い処理をブロックすることなく非同期タスクを処理できます。
- コールスタック: 関数呼び出しが順に積み上げられ、実行される際に使用されます。
- ヒープ: オブジェクトなどのメモリ管理が行われる場所です。
5. 関数の基本的な構造
関数は以下のように定義されます。
function 関数名(引数1, 引数2, ...) {
// 実行するコード
return 戻り値;
}
- 関数名: 関数に付ける名前です。呼び出すときにこの名前を使います。
- 引数: 関数が受け取るデータです。複数の引数をカンマで区切って指定します。引数は関数内で使える変数として扱われます。
- 戻り値: 関数が処理の結果として返す値です。
return
を使って指定します。
6. 関数の呼び出し
関数を定義した後、実際にその関数を使いたいときは「呼び出し」を行います。呼び出しとは、関数名に続けて括弧()
をつけ、必要な引数を渡すことです。
function sayHello(name) {
return "こんにちは、" + name + "さん!";
}
let message = sayHello("太郎");
console.log(message); // こんにちは、太郎さん!
この例では、sayHello
という関数が「こんにちは、○○さん!」というメッセージを作り、message
変数にその結果を代入しています。
7. 関数の利点
関数を使うことで、同じコードを繰り返し書かなくて済みます。また、関数は一度作成すると、他の場所からも簡単に使えるようになります。例えば、数値を2倍にする関数を考えてみましょう。
function double(x) {
return x * 2;
}
let num1 = double(5);
let num2 = double(10);
console.log(num1); // 10
console.log(num2); // 20
このように、関数を使うことでコードの再利用性が高まり、プログラムがシンプルで管理しやすくなります。
8. 関数を理解するためのポイント
関数を日本語レベルで理解するためには、以下のポイントを押さえておくと良いでしょう。
- 目的を明確にする: 関数が何をするためのものかを明確に理解することが大切です。例えば、「挨拶を返す関数」や「数値を2倍にする関数」など、関数の目的が明確であれば理解しやすくなります。
- 引数と戻り値を意識する: 引数は関数が必要とするデータ、戻り値は関数が返す結果です。これを意識することで、関数の動作がイメージしやすくなります。
- 実際に書いてみる: 理解を深めるには、実際にコードを書いてみることが一番です。簡単な関数を自分で作り、それを呼び出して結果を確認してみてください。→ これは常に己に言い続けてます。
まとめ
JavaScriptを日本語レベルで理解するためには、基本構造や仕組みを順序立てて理解することが重要です。実際にコードを書いてみることや、問題を解決するプロセスを繰り返すことで、頭の中を整理し、より深く理解できるようになります。