【JavaScript入門】スコープの基本

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

ここでは、JavaScriptにおけるスコープ(scoping)の基本をみていきます。

スコープとは、変数がスクリプトのどの位置から参照できるかを決める概念です。

スクリプト全体から参照できるスコープをグローバルスコープ、定義された関数の中でのみ参照できるスコープをローカルスコープといいます。

スポンサーリンク

スコープの基本構造

変数がスクリプトのどの位置から参照できるかを決めるのがスコープと先ほど触れました。簡単なコードを使ってみていきましょう。

次のようなコードを用意してみました。

call1という変数をまず用意しています。これは関数の外で宣言した変数なのでグローバル変数になります。

firtstCall()という関数を定義する前に呼び出していますが、これは巻き上げの動きです。

【JavaScript入門】JavaScriptの挙動 - 巻き上げ(hoisting)
JavaScript独特の挙動である巻き上げ(hoisting ホイスティング)を扱います。この巻き上げは他のプログラミング言語にはなく、ここを押さえておかないと実行した時に思ったように動かなかったり、その原因が掴めなくなるので要注意です。

次にfirstCall()という関数を定義しています。この中でcall2という変数を宣言し、かつ、secondCall()という関数を呼び出しています。このfirstCall()の関数の中で、secondCall()関数を定義して、変数call3を宣言し、console.log()で全ての変数を出力する処理をしています。

実行するとJavaScriptコンソールには次のように表示されます。

secondCall()で関数内の変数call3だけでなく、外側の関数にある変数call2と関数外にある変数call1を参照することができています。

一方、コメントアウトしている部分のように、一番外側で関数内の変数を呼び出してみるとスコープ外なのでエラーになります。

コメントアウトを外して実行すると次のようになります。

  • グローバルスコープ – スクリプト全体から参照できるスコープ
  • ローカルスコープ – 定義された関数の中でのみ参照できるスコープ

この違いと動きを確認しましょう。

スポンサーリンク

スコープチェーン

JavaScriptでは、それぞれのスコープ単位にグローバルオブジェクト、Callオブジェクトというものが呼び出しの都度生成される形になっています。

この構造を示すと、先ほどのコードは次のようなイメージになります。

これは変数が内側から連なっているような構造になっていますが、これをスコープチェーンと言います。

スコープチェーンとは、最内側の関数であるチェーンの先頭のCallオブジェクトから一番外側のグローバルオブジェクトまで、指定された変数を順番に検索していく連なりを示しています。

ですから上のコードはスコープチェーンが表現されているコードになります。

このコードを下のように変更してみます。

これを実行すると次のようになります。

関数thirdCall()は、関数内に定義された関数ではないので、コメントアウトしている部分を実行して変数call3を参照することはできません。コメントアウトを外して実行すると次のようにエラーになります。

このようなスコープチェーンとスコープの及ぶ範囲を確認しておきましょう。

スポンサーリンク

まとめ

ここではJavaScriptにおけるスコープ(scoping)の基本を扱いました。

スコープとは、変数がスクリプトのどの位置から参照できるかを決める概念で、スクリプト全体から参照できるスコープをグローバルスコープ、定義された関数の中でのみ参照できるスコープをローカルスコープといいます。

最内側の関数であるチェーンの先頭のCallオブジェクトから一番外側のグローバルオブジェクトまで、指定された変数を順番に検索していく連なりをスコープチェーンといいます。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました