JavaScriptのスコープの基本を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのスコープの基本について現役エンジニアが解説しています。スコープは変数の有効範囲のことで、JavaScriptには、グローバルスコープとローカルスコープがあります。さらにローカルスコープは関数スコープやブロックスコープに分かれます。それぞれスコープを解説しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
監修してくれたメンター
永井浩平
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。
JavaScriptのスコープの基本について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

今回は、JavaScriptに関する内容だね!

どういう内容でしょうか?

JavaScriptのスコープの基本について詳しく説明していくね!

お願いします!
はじめに
今回は、JavaScriptの変数や関数などのアクセスを許容する範囲を定義するスコープについて学びます。
同一のjsファイルに定義されている変数を、各処理から参照しようとした時にundefinedというエラーが発生したことがあるのではないでしょうか。
undefinedとならないように、すべての変数を各処理から参照できるように宣言することは可能ですが、思わぬ更新などにより、意図せぬ動作となってしまうことがあります。
スコープを理解し、適切に範囲を定義することで、より可読性の高いプログラムを作成できるのでこの機会に覚えましょう。
スコープとは
スコープとは、有効な範囲のことです。
JavaScriptでは、変数や関数などにアクセスできる範囲が決まっています。
この範囲をスコープと呼びます。
スコープの役割
スコープによって有効な範囲が限られることで、範囲の外へ影響することを防げます。
例えば本棚や引き出しでも、枠が区切られることでその中だけで整理できます。
これにより、しまっているもの枠を超えて混ざってしまうこともありません。
スコープを使うことで、エラー範囲を限定しやすく編集しやすいコードにできます。
実は私も!?独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか?
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
スコープの種類
スコープは、大きく分けて以下2種類あります。
グローバルスコープ
JavaScriptのどこからでもアクセスできる範囲を指します。
ローカルスコープ
ローカルスコープにはさらに細かく2種類あり、「関数スコープ」と「ブロックスコープ」に分かれます。
・関数スコープ
関数スコープの範囲は関数内からのみ参照可能です。
以下のような文字列を結合する関数の場合、関数内で宣言されているjoinStrはtestMethodsの中であれば参照はできます。
また、関数の外からは参照できずに、他に同一名称の関数が宣言されていない場合、参照しようとした処理はundefinedのエラーが発生します。
let testMethods = (str1,str2) => {
let joinStr = str1 + str2;
return joinStr;
};
console.log(joinStr); // console => undefined
・ブロックスコープ
ブロックスコープは、{ } で囲まれた範囲だけで有効です。
letまたはconstを用いて宣言したものだけが、ブロックスコープです。
varで宣言したものは対象に入りませんので注意しましょう。
{
let letStr = 'letで宣言';
const constStr = 'constで宣言';
var varStr = 'varで宣言';
console.log(letStr); // console => letで宣言
console.log(constStr); // console => constで宣言
console.log(varStr); // console => varで宣言
}
console.log(letStr); // console => undefined
console.log(constStr); // console => undefined
console.log(varStr); // console => varで宣言
宣言文を省略した変数のスコープ
宣言文であるvarやlet、constは省略できます。
省略した場合は、関数の中であってもグローバルスコープです。
しかしながら、予期しない動作になることも多く、MDNのリファレンスでも宣言をすることがすすめられています。
宣言文は、特に理由がなければ必ずつけるようにしましょう。
まとめ
JavaScriptのスコープに関して学びました。
let,constとvarがブロックスコープにおいて異なる点についてはぜひ覚えておきましょう。
ブロックスコープや関数スコープで変数などの範囲を限定することで、異なるスコープであれば同一の変数名なども宣言することができます。
また障害調査などにおいても、スコープが狭いほど参照している処理なども調べやすくなりますので、ぜひ適切なスコープを定義できるように日々の実装で注意してみてくださいね。
また、似た役割にクロージャというものがあります。
こちらの記事で紹介していますのでぜひ参考にしてください。

内容が分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか?
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

プログラミングを独学していて、このように感じた経験はないでしょうか?
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)