JavaScript

JavaScriptのスコープとは【関数とブロックの2種類】

どうも、つよぽんです!

今回は、JavaScriptの「スコープ」について解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • スコープって何?
  • ブロックスコープ・関数スコープの違いを知りたい
  • どっちのスコープを使うべきか知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの変数のスコープを理解する今回は「変数のスコープ」について学習します。プログラムのどこからでもアクセスできる変数とできない変数はこのスコープの概念によって決められます。またスコープには「ブロックスコープ」「関数スコープ」というものがあり、それぞれの違いについても学習します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. スコープとは
  2. JavaScriptのスコープの種類
  3. JavaScriptでどちらのスコープを使うべきか

 

スコープとは

この章では、「スコープとは何か?」について解説します。

スコープという言葉を使うときは、「(変数の)スコープ」「(関数の)スコープ」という意味となります。

「変数のスコープ」「関数のスコープ」が何かを一言で説明すると「その変数・関数にアクセス出来る範囲のこと」を指します。

実際にコードを見ながら解説します。以下のコードの1行目4行目に変数を用意しました。(names変数とname変数)

7行目のconsole.logでは1行目のnames変数と4行目のname変数のどちらにもアクセスができます。つまり、それぞれの変数を利用することが出来ます。

しかし、11行目のconsole.logでは1行目のnames変数にはアクセスできますが、4行目のforループの中の変数nameにはアクセスできません。

このように変数が定義されている箇所によって、アクセスできる変数とアクセスできない変数が存在します。

この「アクセスできる範囲・できない範囲」の概念が「スコープ」といいます。

JavaScriptのスコープの種類

この章では、「JavaScriptのスコープの種類」について解説します。

JavaScriptでは次の2つのスコープの概念が用意されています。

2種類のスコープ
  1. ブロックスコープ
  2. 関数スコープ

ES2015以前のJavaScriptのスコープに関しては、「②関数スコープ」しか用意されておらず、この関数スコープが他のプログラミング言語と異なり特殊な動きをしていました。

しかし、ES2015よりJavaScriptが改善される仕様がいくつか追加されて、それに合わせてJavaScriptでも他のプログラミング言語と同じような「①ブロックスコープ」が導入されるようになりました。

①ブロックスコープ」「②関数スコープ」がそれぞれどういうものか画像を使いながら解説していきます。

ブロックスコープ

「ブロックとは何か?」から説明してきます。

ブロックとは、「{}」で囲まれた部分のことを言います。例えばifやforなどで「{}」が使われていています。

{}」を使っているコード
  • if(条件) { この中がブロック }
  • for(初期化; 条件; ループ毎の処理) { この中がブロック }
  • while(条件) { この中がブロック }

ここであらためて「ブロックスコープ」について説明します。

ブロックスコープとは次の働きをするものです。

ブロックスコープの働き
  • ブロック内で定義された関数・変数には、同じブロック内からだけアクセスできる
  • ブロック内で定義された関数・変数には、ブロックの外からはアクセスできない

JavaScriptで変数をブロックスコープにしたい場合は「let」「const」を使います。

ブロックスコープで解説してきたことをまとめたものが以下の画像となります。

ブロックスコープの説明とサンプルコードブロックスコープの説明とサンプルコード

上の画像のサンプルコードは以下のリンクから直接確認できます。

スコープのサンプル1(ブロックスコープ)

関数スコープ

この項目では「関数スコープ」について解説します。

前の項目のブロックスコープの内容を理解していれば、関数スコープの理解もカンタンです。

ブロックスコープでは「ブロック内に定義された変数・関数には、そのブロックの外からアクセスできない」と説明しました。

関数スコープも同じような考えで、ブロックの代わりに関数を基準に考えれば良いので次のようになります。

関数スコープの働き
  • 関数内で定義された関数・変数には、同じ関数内からだけアクセスできる
  • 関数内で定義された関数・変数には、関数外からはアクセスできない

このことから、「関数スコープの場合は、ブロックの中で定義されている変数や関数にはアクセス出来る」ことになります。

JavaScriptで変数を関数スコープにする場合は「var」を使います。

関数スコープで解説してきたことをまとめたものが以下の画像となります。

関数スコープの説明とサンプルコード関数スコープの説明とサンプルコード

上の画像のサンプルコードは以下のリンクから直接確認できます。

スコープのサンプル2(関数スコープ)

JavaScriptのブロックスコープ・関数スコープのどちらを使うべきか

この章では、「JavaScriptのブロックスコープ・関数スコープのどちらを使うべきか」について解説します。

結論からいうと「ブロックスコープ」を使うべきです。

JavaScriptでは次の2つのスコープの概念が用意されていることを前の章で解説しました。

2種類のスコープ
  1. ブロックスコープ
  2. 関数スコープ

そして、ES2015以前の古い書き方では「②関数スコープ」しか用意されておらず、それを改善するためにES2015から「①ブロックスコープ」が用意されました。

つまり、「①ブロックスコープ」はJavaScriptの改善のために用意されたものであるため、改善版の「①ブロックスコープ」を使うのが良いです。

また、他のプログラミング言語でも、基本的に「②関数スコープ」使われておらず、「①ブロックスコープ」が使われています。

そのことからも、他のプログラミング言語にない独自の考え方の実装はできるだけ避けるべきです。

理由は、普段別の言語でプログラムを書いている人からしたら、関数スコープの概念を知らないため、ブロック内で定義された変数は別スコープだから同じ変数名を使っても安全だと思うからです。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. スコープとは「その変数・関数にアクセス出来る範囲のこと」を指す
  2. JavaScriptには「ブロックスコープ」「関数スコープ」の2種類のスコープがある
  3. 変数宣言時に「let」「const」を使うと「ブロックスコープ」、「var」を使うと「関数スコープ」になる
  4. 他のプログラミング言語に合わせて「ブロックスコープ」を使うべき

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの変数のスコープを理解する今回は「変数のスコープ」について学習します。プログラムのどこからでもアクセスできる変数とできない変数はこのスコープの概念によって決められます。またスコープには「ブロックスコープ」「関数スコープ」というものがあり、それぞれの違いについても学習します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です