JavaScriptのきほんを学ぼう

■第３話：グローバル汚染を防ごう。スコープの重要性。

（最終更新日：2023.10.30）

「スコープって何故気にするの？」

プログラミングを始めたばかりだと、JavaScriptのvar, let, constの違いや、 それらのスコープの違いで戸惑うことも少なくない。 今回は「スコープとは何か」「何故スコープが重要か」「どう対処すれば良いのか」をごく簡単に紹介する。

１. 何故スコープを気にするのか？

「何故スコープを気にするのか」を考える前に、まずスコープとは何かについて説明する。 スコープとは定義した変数が使える範囲のことである。 関数の中で変数定義すれば関数の中でその変数は有効になり、Classの中で定義すればClassの中で有効になる。 では、なぜこのようなスコープ（影響範囲）が必要なのだろうか？

答えは「名前被りを防ぐため」である。

同じ名前の変数が、同じ影響範囲の中に複数存在すると上書きされるからである。 つまり、意図せず違う値（hensu = 4だと思ったら、hensu = 5になる）を持ち、不具合の原因を作ってしまうからである。 すなわち、スコープ（影響範囲）が広いと、別の値を再定義、もしくは最代入してしまうことが否めない。 下記（左）は意図せず再定義してしまった例である。下記（右）は意図せず再代入してしまった例である。 コード量が少なくてピンと来ないかもしれないが、100行以上のコードを書くと同じ名前で再定義しているものは見つけずらくなる。

変数の影響範囲を限定するスコープを活用することで再定義、再代入のミスは防げる。 再定義に関してはconstやletを使えばエラーが出してくれる。再代入に関してはconstを使えばエラーを出してくれる。 const, let, varの再定義、再代入、スコープの違いは非常に重要なので下に再掲する。 下記のブロックスコープというのは、if文などの波括弧で囲まれた中ということを意味する。 初心者の方はそれでもピンとこないかもしれないが、今は焦らずコードを書きながら覚えていこう。 また、constを使うことで、再定義、再代入のエラーを防ぐことができる。 再定義、再代入を防ぐという意味で、それらを使う必要が無い変数は極力constで定義しよう。

２. グローバル変数を作らず、値を共有する方法

「グローバル変数を使わない」とは言っても、異なった関数間で変数を共有したい場合などが出てくる。 そういったときのための対処方法を２点ご紹介しよう。 「namespaceを使う」と「functionを使い、returnで取得する」である。

namespaceを使うには、波括弧を使って空のオブジェクト（namespace）を作り、名前を定義する。 １での考え方を踏襲すると、波括弧でスコープ（箱）を作ったと考えればよい。 この箱の中に変数を入れるには、myScope.〇〇という形で定義する。下記ではmyScope.aisatsuと定義した。 これにより、aisatsuという変数事態はmyScopeの箱の中に閉じられているので、 myScope.〇〇の名前が重複することだけ気をつければ、グローバルに値を共有しつつも名前被りを防ぐことができる。 同じネームスぺ－スを使わない限り、重複は無くなる。

次にfunctionを使い、returnで取得する方法を説明しよう。 これは、関数の戻り値に共有したい値を設定すれば、それで共有することができる。 ただし、関数名の名前被りを防ぐ必要は出てくる。 1関数1ファイルで同一ディレクトリに関数を保存すれば、名前被りは防げる。 工夫して、関数を適切に管理しよう。

他にもスコープを限定する方法は他にもある。最初の段階では関数の中、波括弧の中とスコープを意識して、 グローバル変数を作らないように気をつけよう。

３. 即時関数を使う

変数と同様、関数も同名を使うとエラーが生じる。 そのため、関数名も名前被りが生じないように、必要以上に使わない関数を増やさないことが大事だ。

関数名を付けずに、その場限りで使える関数がある。それが即時関数だ。 即時関数の中で定義された変数はスコープを保つことができる。関数自体はその場で実行することができる。 つまり「関数の名前被りを防ぐ」「グローバル変数の生成を抑える」という二つの効能がある。 その場限りの処理を行いたい場合は、ぜひ即時関数で実行するようにしよう。

▼参考図書、サイト

 「JavaScriptの絵本 第２版 -Webプログラミングを始める新しい9つの扉-」　アンク　翔泳社
  グローバル変数を乱用しない 　中上級者になるためのJavaScript