WEB WEBフロントエンド開発

JavaScriptのスコープとモジュールについて

投稿日:2017年11月13日 更新日:

仕様と問題点

  • JavaScriptにはアクセス修飾子はない。
  • JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ(ローカルスコープ)」のみ。JavaScriptではスコープ(変数の有効範囲)は関数単位(function(){~})になるのが基本。
  • 一番外側のどの関数の中にも含まれないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。
  • JavaScriptには他の言語にあるようなブロックスコープがない。
  • JavaScriptでは本来ファイルを分割して作ることを考慮しておらず、単純なファイルの結合のみ。グローバルでの汚染は複数のファイルを読み込んだときやファイルを結合したときに発生する。

 

対応

  • 関数は任意にスコープを作るための唯一の手段
  • ファイル全体を関数で括る事でスコープを生成して、ファイル内でグローバルではない共通の変数(クラス内のインスタンス変数のようなイメージ)を作成することが可能。しかし、var宣言なしだと、結局グローバル変数になってしまうので、必ず、var宣言が必要となる。
  • 関数は任意にスコープを作るための唯一の手段であり、即時関数も関数ですのでスコープを提供する。
  • 関数スコープの中でvarを使って定義された変数は関数の中でローカルな変数になるので、関数の外側の変数を上書きしたりすることはない。

 

即時関数

  • 再利用しない関数を実行する場合のコード量を減らすための手段
  • 即時関数はスコープを汚染せずに新たなスコープを作成するための手段

1.任意にスコープを作成する

 

2.ファイル全体を即時関数で囲む

  • ファイル全体を即時関数に囲むことで、ファイルモジュールと同様の扱いになる。ファイル内(即時関数内)で定義されたvar宣言の変数は、自身以外のソースファイルや他のライブラリやに影響を与えない。
  • 関数スコープの中でvarを使って定義された変数は、関数の中でローカルな変数になるので、関数の外側(この場合は他のファイル)の変数を上書きしたりすることはない。
  • JavaScriptを複数のファイルに分割した時の、グローバル汚染に対応する。

  • 即時関数の引数に唯一のアプリケーションのグローバルオブジェクトを渡すことで、グルーバル変数の範囲を限定して、グローバル汚染に対応する。
  • 各ファイルのvar宣言のxは、各ファイル内で隠ぺいされる。
  • countAとcountBの関数は、グローバルオブジェクトを介して呼び出す事が可能。

 

3. ページの初期化

  • ページ読み込み時に時刻等を初期表示する処理。一時変数は処理完了後には不要なので、ローカル変数として定義したい。
  • 処理コード全体を即時関数で包むことで、ローカル変数を実現している。

 

4.変数の初期化処理

  • 変数を初期化する関数が一度のみしか使用されない場合、他から関数が使用されたくない。

 

 

Node.jsのスコープの検討

  • 普通にファイル単位にモジュール概念が適用されるため、一番外側でどの関数の中にも含まれないものでも、グルーバルスコープにならない。
  • export,requireで他のファイルから参照可能になる。Cのexternのイメージ。

 

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...

TypeScriptのモジュールについて

モジュールについてまとめました。 (内部モジュール) 共通の関数などをグローバル空間に記載したくない場合などに使用する。   (外部モジュール) 別ファイルとして外部にある機能を利用する仕組 ...

SystemJSを使ったWEBフロントエンド開発

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...