輝昌2017/8/152019/1/24こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。今回は、JavaScriptの変数のスコープについて解説したいと思います。スコープにはグローバルスコープとローカルスコープがあり、それぞれの使い分けが初心者の方には難しく感じるかと思います。そこで、この記事では・変数のスコープとは・様々な変数のスコープという基本的な内容から・変数のスコープが存在しないケース・変数のスコープを定義する文法という実践的な内容までを解説していきます。変数のスコープについて正しく理解し、必要な場面で使いこなせるように、しっかり学習を進めていきましょう。まとめ変数のスコープとは変数のスコープとは、その変数が参照できる範囲のことです。スコープには、大きく分けて以下の2種類があります。ページ全体でどこからでも参照できる。ページ内の部分的な範囲のみ参照できる。ローカルスコープの変数は、変数名を使い回すことができ、局所的な範囲での一時的な変数の利用に適しています。具体的なコードでみていきましょう。定義し値を代入しています。定義し値を代入しています。優先して使用されています。この関数内など局所的な範囲内での変数の利用時に、グローバル変数であるかどうか考慮せずに、安全にローカル変数として使用できるところに、スコープのありがたみがあります。"global2";と宣言します。グローバルスコープの変数は、ページ内のJavaScriptのどこからも参照可能です。以下のコードでは、グローバルスコープの変数を、関数内から参照し、コンソールに出力しています。関数内でグローバルスコープの変数の値の変更も可能です。global3以上のように、関数内からグローバルスコープの変数を使用できていますね。グローバル変数を使う場合は1点注意点があります。グローバル変数はどこからでも使えるためとても便利ですが、どこからでも使える都合上変数名の衝突が起きやすいです。javascriptの新しいプラグインを入れた場合などに競合が発生し、予期せぬ動きになる場合があります。多用しすぎには注意が必要のため、以降で説明するローカル変数の書き方を習得して一部のみグローバル変数を使うようにしてください。関数スコープ関数内でのスコープはローカルスコープの一つで関数スコープといいます。関数内でvarをつけて定義した変数はローカル変数になります。以下コードで確認してみましょう。undefinedとなっています。valGlobal2の宣言は関数の4行目で行われています。ローカル変数の宣言前にローカル変数と見なされるのは、関数内で定義した変数は、関数の頭で宣言したものとみなされるという仕様によります。この仕様のことを、JavaScriptのホイスティング(巻き上げ)といいます。ホイスティング対象の変数はvarつきでローカル変数として関数の4行目で定義されています。代入されていますが、ホイスティングが起こる関数の2行目では値が入っておらず、結果undefinedという値が表示されます。関数の4行目でローカル変数に値を入れた後のconsole.log()の結果である、実行結果の3行目では、正しく値が設定され表示されていますね。scriptタグのスコープscriptタグで分割して、グローバル変数を書いた場合にも、正しくグローバルスコープの変数として、ページ全体から変数を参照できます。global3以上のように、scriptタグをまたがっても、グローバル変数を参照できていますね。グローバル変数の値の変更もできています。クロージャーのスコープクロージャーは関数を定義するのとほぼ同じですが、一つ上のブロックの変数にアクセスできます。そのため、クロージャーと変数を組み合わせて簡潔に一時的に使用する関数を定義する場合などに使用されます。クロージャーのスコープは、クロージャー内のブロックのスコープではなく、クロージャーの定義された一つ上のブロックのスコープです。クロージャーからアクセスできています。クロージャーのこの特性はよく利用されます。###***apple***###以上のように、クロージャーの定義されたブロックの変数にクロージャーがアクセスできていますね。即時関数のスコープ即時関数とは、関数定義を技巧的に使用してブロックスコープを実現する方法です。通常、JavaScriptにはブロックスコープは存在しませんが、即時関数を使用することで可能になります。{・・・即時関数内コード・・・})();のようなコードになります。definedエラーが表示されているように使用できません。これで、即時関数内はブロックスコープの変数を扱えることがわかりました。変数のスコープが存在しないケースif文のスコープJavaScriptではif文にはブロックスコープは存在しません。if文内で定義したローカル変数はif文のブロック外でも使用可能です。以下、コードで確認してみましょう。if以上のように、if文で定義したローカル変数をif文のブロック以外でも使用できてしまいますね。for文のスコープJavaScriptではfor文にもブロックスコープは存在しません。for文内で定義したローカル変数はfor文のブロック外でも使用可能です。以下、コードで確認してみましょう。for以上のように、for文で定義したローカル変数をfor文のブロック以外でも使用できてしまいますね。変数のスコープを定義する文法withJavaScriptでは、with句を使用することでブロックスコープを実現できます。with句は、以下のように書きます。句内でのみ有効なブロックスコープのローカル変数です。defined実行結果の1行目は、with句内でのconsole.log()の出力で、正常に出力されています。definedエラーが出力されています。このように、with句により、ブロックスコープの変数を使用できます。letletもブロックスコープの変数を実現する文法です。ECMAJavaScript2015(ES6)以降からのサポートとなります。letの使い方は簡単で、今までローカル変数を定義していた方法varの代わりにletを使うだけです。letで宣言された変数は、自動的にローカル変数になります。以下、コードで確認してみましょう。defined実行結果の1行目は、if文のブロック内でletで定義された変数の出力で、正常に処理されていますね。definedエラーが出力されていますね。以上のように、letによりブロックスコープのローカル変数が定義できることが分かりました。まとめいかがでしたでしょうか。変数のスコープにはグローバルスコープとロ-カルスコープがあり、変数名のかぶりを解消し、また、関数内など局所的に一時的に使用するローカル変数を利用するために便利でした。ローカルスコープは、コードの他の箇所に影響を与えないため、大変便利に使用できます。ローカルスコープには、関数スコープ、クロージャーのスコープ、即時関数のスコープ、withのブロックスコープ、letのブロックスコープなどがありました。種類がが多くて覚えることは大変ですが、コードを書きながら覚えていきましょう。withやletではブロックスコープを実現できました。if文やfor文などにはブロックスコープは実現できませんでした。このあたりは、他の言語と大きな違いですので、扱いには注意しましょう。JavaScriptのスコープについて忘れてしまったら、またこのページをご覧ください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。6冊2016/6/82019/7/18JavaScript【javaScript入門】誰でも分かる演算子の使い方と種類について2017/9/42019/1/22JavaScript【JavaScript入門】letとvarの使い方とスコープの違い2018/6/142018/6/14JavaScript【JavaScript入門】alert(アラート)メッセージはこれで完璧。