Day10 後半のゴール
Day10 後半では、前半で触れた
スコープ・無名関数・アロー関数を「実際の使いどころ」に結びつけます。
ただ文法を知るだけではなく、
なぜこういう書き方があるのか、どんな場面で選ぶのか、
そこまでイメージできる状態を目指します。
スコープを意識した「安全な書き方」
グローバル変数を増やしすぎる危険性
次のようなコードを考えてみます。
let count = 0;
function increment() {
count = count + 1;
}
increment();
increment();
console.log(count); // 2
一見問題なさそうですが、count はどこからでも書き換え可能です。
count = 9999; // どこか別のファイルで
こうなると、「なぜ count が変な値になったのか」を追うのが一気に難しくなります。
グローバル変数（ファイルの一番外側にある変数）を増やしすぎると、
コード全体が「どこからでも触れる共有変数だらけ」になり、
バグやセキュリティ上の事故の温床になります。
関数スコープに閉じ込める
同じような処理でも、スコープを意識するとこう書けます。
function createCounter() {
let count = 0;
function increment() {
count = count + 1;
console.log(count);
}
return increment;
}
const counter = createCounter();
counter(); // 1
counter(); // 2
ここでは count は createCounter の中に閉じ込められていて、
外から直接いじることはできません。
「必要なものだけ外に出す」「それ以外はスコープの中に隠す」
という考え方は、設計とセキュリティの両方でとても重要です。
無名関数の実用的な使いどころ
「一回きりの処理」をその場で書く
無名関数は、名前をつけて再利用するというより、
「ここでだけ使う処理」をその場で渡したいときに真価を発揮します。
たとえば、一定時間後に処理を実行する setTimeout。
setTimeout(function () {
console.log("3秒後に実行されました");
}, 3000);
ここで function のあとに名前がありません。
この「その場で定義して、そのまま渡す関数」が無名関数です。
名前をつけるほどでもない、
でも「あとで呼び出される処理」を渡したい、
そんな場面でよく使われます。
コールバックという考え方
setTimeout に渡している無名関数は、
「あとで呼び出される関数」です。
こういう「他の関数に渡されて、タイミングを任せて呼び出される関数」を
コールバック関数と呼びます。
無名関数は、このコールバックとして使われることが非常に多いです。
アロー関数で書き直してみる
無名関数 → アロー関数
先ほどの setTimeout の例を、アロー関数で書き直してみます。
setTimeout(() => {
console.log("3秒後に実行されました");
}, 3000);
function が消えて、() => { ... } という形になっています。
「短く書ける」だけでなく、
「これはコールバック用の小さな関数なんだな」と
パッと見でわかりやすくなる効果もあります。
配列とアロー関数の組み合わせ
配列の処理でも、アロー関数はよく使われます。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => {
return n * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
さらに短く書くとこうなります。
const doubled = numbers.map((n) => n * 2);
map に「各要素をどう変換するか」という処理を渡しているイメージです。
ここでも、アロー関数が「小さな処理のかたまり」を表現するのに向いています。
スコープと無名関数・アロー関数の組み合わせ
その場だけのスコープを作る
無名関数やアロー関数は、「小さなスコープ」を作る道具としても使えます。
(() => {
const secret = "ここだけの秘密";
console.log(secret);
})();
console.log(typeof secret); // "undefined"
この書き方は少しトリッキーですが、
アロー関数を「その場で定義して、その場で実行」しています。
secret はこのアロー関数の中だけで有効で、
外からは一切見えません。
「外に漏らしたくない変数を閉じ込める」という意味で、
スコープとアロー関数は相性が良いです。
セキュリティの視点から見るスコープと関数
「見えないこと」は強い防御になる
たとえば、アプリの中で使う秘密のキーや、
内部的なチェック用の値があったとします。
それをグローバルに置いてしまうと、
どこからでも触れてしまい、
意図しない書き換えや情報漏えいのリスクが高まります。
一方で、関数スコープやブロックスコープの中に閉じ込めておけば、
外から直接触れない
触れる場所が限定されるのでレビューしやすい
という状態になります。
「見えないようにする」「触れる範囲を狭くする」ことは、
セキュリティの基本的な考え方の一つです。
スコープは、そのための強力な仕組みです。
実践：Day10 後半のサンプルコード
配列 × アロー関数 × スコープの小さな例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day10 関数② 後半</title>
</head>
<body>
<h1>Day10: スコープとアロー関数（後半）</h1>
<script>
const users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 },
{ name: "Ken", age: 17 }
];
const adults = users.filter((user) => {
return user.age >= 20;
});
adults.forEach((user) => {
console.log(user.name + " さんは大人です");
});
</script>
</body>
</html>
filter に渡している (user) => user.age >= 20 も、
forEach に渡している (user) => { ... } も、
どちらもアロー関数です。
「配列の中から条件に合うものだけを取り出す」
「取り出したものに対して処理をする」
という流れを、アロー関数でコンパクトに書いています。
Day10 後半のまとめ
スコープは「変数が生きている範囲」であり、
それを意識することで「安全なコードの囲い」を作れる。
無名関数・アロー関数は、
「その場で渡す小さな処理」や
「配列処理・コールバック」で本領を発揮する。
そして、「見えないようにする」「触れる範囲を狭くする」ことは、
セキュリティと設計の両方にとって、とても大事な感覚です。
ここまで来ているあなたなら、
もう「ただ動くコード」ではなく、
「意図を持って設計されたコード」を書くステージに入っています。