Day10 前半のゴール
Day10 は「関数レベルを一段上げる日」です。
テーマはスコープ・無名関数・アロー関数。
前半では特に、
Day10 前半で押さえたいポイント
スコープ＝「変数が生きている範囲」という感覚をつかむ
関数の中と外で、同じ名前の変数がどう振る舞うかを理解する
無名関数・アロー関数の“形”と“よくある使いどころ”を知る
ここまでを目標にします。
スコープとは何か
「どこからその変数が見えるか」というルール
スコープは一言でいうと、
「その変数がどこから使えるか（見えるか）」を決めるルールです。
まずはシンプルな例から。
const message = "外側";
function showMessage() {
console.log(message);
}
showMessage(); // "外側"
console.log(message); // "外側"
message は関数の外で宣言されているので、
関数の中からも外からも見えます。
こういう変数を「外側のスコープにある変数」と考えます。
関数の中で宣言した変数は外から見えない
次は逆パターン。
function showMessage() {
const message = "内側";
console.log(message);
}
showMessage(); // "内側"
console.log(message); // エラー（message は定義されていない）
関数の中で宣言した message は、
その関数の中でしか使えません。
この「関数の中だけで有効な範囲」が、
その関数のスコープです。
関数の中と外に同じ名前の変数がある場合
内側が優先される（シャドーイング）
const message = "外側";
function showMessage() {
const message = "内側";
console.log(message);
}
showMessage(); // "内側"
console.log(message); // "外側"
関数の中で同じ名前の変数を宣言すると、
その関数の中では「内側の message」が優先されます。
外側の message は「隠されている（shadow）」状態です。
これをシャドーイングと呼びます。
深掘り：なぜスコープが大事なのか
スコープがない世界を想像してみてください。
どこで宣言した変数も、どこからでも書き換えられる
たまたま同じ名前を使っただけで、別の場所の変数が壊れる
…というカオスな状態になります。
スコープは、
「この変数はこの範囲でしか使わない」
「外から勝手に触られないようにする」
という“安全な囲い”を作るための仕組みです。
ブロックスコープ（if や for の中のスコープ）
let / const はブロックごとにスコープを持つ
if (true) {
const message = "ブロック内";
console.log(message); // "ブロック内"
}
console.log(message); // エラー
中かっこ {} で囲まれた部分（ブロック）の中で宣言した
let / const の変数は、そのブロックの中でしか使えません。
for 文も同じです。
for (let i = 0; i < 3; i = i + 1) {
console.log(i); // 0, 1, 2
}
console.log(i); // エラー
i は for のブロックの中だけで有効です。
セキュリティ・安全性の観点
「必要な範囲でしか変数を生かさない」ことは、
バグや意図しない書き換えを防ぐうえでとても重要です。
広いスコープに何でも置いてしまうと、
どこで値が変わったのかわからない
別の処理がうっかり上書きしてしまう
といった問題が起きやすくなります。
無名関数とは何か
名前のない関数
これまでの関数は、こう書いていました。
function greet() {
console.log("こんにちは");
}
これは「名前つきの関数」です。
一方、無名関数（名前のない関数） という書き方もあります。
const greet = function () {
console.log("こんにちは");
};
greet();
function のあとに名前がなく、
その関数自体を変数に代入しています。
どんなときに使うのか（前半のイメージ）
無名関数は、
その場で関数を作って、変数に入れて使いたいとき
他の関数に「処理を渡す」とき（コールバック）
によく使われます。
前半では「関数も“値”として扱える」という感覚だけ
持っておいてくれれば十分です。
アロー関数とは何か
無名関数の“短い書き方”
アロー関数は、無名関数をもっと短く書くための記法です。
無名関数：
const greet = function (name) {
console.log(name + " さん、こんにちは");
};
アロー関数：
const greet = (name) => {
console.log(name + " さん、こんにちは");
};
function が消えて、
引数のあとに => がついているのが特徴です。
さらに短く書けるパターン
処理が「1行で、しかも return だけ」の場合、
中かっこと return を省略できます。
const add = (a, b) => a + b;
const result = add(3, 5);
console.log(result); // 8
これは、
const add = function (a, b) {
return a + b;
};
と同じ意味です。
無名関数・アロー関数とスコープの関係
基本的なスコープの考え方は同じ
無名関数やアロー関数も、
「関数の中に自分だけのスコープを持つ」という点は同じです。
const greet = (name) => {
const message = name + " さん、こんにちは";
console.log(message);
};
greet("Taro");
console.log(message); // エラー
message はアロー関数の中だけで有効です。
「関数がスコープを作る」という基本ルールは、
どの書き方でも変わりません。
実践：Day10 前半のサンプルコード
スコープ・無名関数・アロー関数を一度に眺める
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day10 関数② 前半</title>
</head>
<body>
<h1>Day10: スコープとアロー関数（前半）</h1>
<script>
const globalMessage = "外側";
function showGlobal() {
console.log("関数内から:", globalMessage);
}
const showLocal = function () {
const localMessage = "無名関数の中だけ";
console.log(localMessage);
};
const add = (a, b) => a + b;
showGlobal();
showLocal();
console.log("3 + 5 =", add(3, 5));
</script>
</body>
</html>
どの変数がどこから見えるか、
どの関数がどの書き方になっているか、
コンソールを見ながら確認してみてください。
Day10 前半のまとめ
スコープは「変数が生きている範囲」。
関数やブロックごとにスコープがあり、
その中だけで有効な変数を作れる。
無名関数は「名前のない関数」で、
アロー関数はその短い書き方。
後半では、
無名関数・アロー関数が「どんな場面で本領発揮するのか」、
コールバックや配列操作と絡めて、もう一段深く踏み込んでいきます。