はじめに
前回の記事では、「UIの振る舞い」や「イベント処理」など、ChatGPTがよく書いてくれるけど“腑に落ちない”JavaScriptのパターンを解説しました。
ChatGPTが関数をさらっと使ってくるとき、こんなふうに思ったことはありませんか？
「このfunction、どこからどこまでが“有効”なんだっけ？」
「スコープってなに？ letとvarの違いって本当に理解できてる？」
「クロージャって、何がすごいの？」
この記事では、ChatGPTが当たり前のように使ってくる“関数まわり”の仕組みを、初〜中級者でもしっかり腹落ちするように解説していきます。
1. 関数定義の3パターン、ちゃんと使い分けてる？
// ① function宣言
function greet(name) {
return `Hello, ${name}`;
}
// ② 関数式（function）
const greet2 = function(name) {
return `Hi, ${name}`;
};
// ③ アロー関数
const greet3 = name => `Yo, ${name}`;
✅ 違いまとめ
| タイプ | 差分 | 解説 |
|---|---|---|
| function宣言 | ホイスティングされる | 上にあっても呼び出せる |
| 関数式 | 変数なのでホイスティングされない |
constの制約を受ける |
| アロー関数 |
thisがない（レキシカル） |
後述のクロージャと関係深い |
2. スコープって結局何？
let a = 1;
function test() {
let b = 2;
console.log(a); // → 1（OK）
console.log(b); // → 2（OK）
}
console.log(b); // ❌ → ReferenceError
✅ スコープとは
- **「その変数が参照できる範囲」**のこと
- 関数の中で宣言した変数は、外からは見えない
👉 ChatGPTは何も言わずにスコープを使い分けてくる。だから自分で意識して読む力が必要。
3. クロージャとは何か、ちゃんと理解しよう
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
✅ ここで起きてること
-
counter()が呼ばれたあとも、countが「生きている」 - 内側の関数が、外側のスコープに“閉じ込めた”状態
👉 これがクロージャ（Closure）：関数が定義されたスコープを「記憶」している
4. 実案件でクロージャが“地味に”効いてくる場面
✅ 状態を隠したいとき（カプセル化）
function createSecret() {
let secret = "ムカイ最強";
return () => secret;
}
const getSecret = createSecret();
console.log(getSecret()); // ムカイ最強
→ 外から secret に直接アクセスはできない
✅ イベントリスナーで値を保持したいとき
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// → 0, 1, 2（letはブロックスコープ）
5. thisとクロージャの違い、混同してない？
const obj = {
name: "ムカイ",
greet: function() {
setTimeout(() => {
console.log(`Hi, ${this.name}`); // thisはobjを指す
}, 100);
}
};
→ アロー関数は**「定義された場所」のthisを保持**するので、クロージャと似てるけど別モノ。
👉 this = 実行時の文脈
👉 クロージャ = 定義時のスコープ
まとめ：ChatGPTに出されたコードを理解できるようになるために
| 概念 | ポイント |
|---|---|
| function / const | 書き方で呼び出し方が変わる |
| スコープ | 関数・ブロックごとに変わる |
| クロージャ | 関数が外の変数を覚えてる状態 |
| this | 実行されたときの文脈に依存 |
おわりに
関数まわりの理解は、 JavaScriptの“中級者の壁” です。
でもここを超えると、ChatGPTから出力された関数も読める・修正できる・再利用できるようになります。
次回