JavaScriptの名前空間の書き方とは【メンターが回答】

「JavaScriptの名前空間の書き方とは」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。名前空間とはそもそも何なのか、名前空間の特徴について知りたい方は、ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptの名前空間の書き方についてだね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

名前空間について調べており、色々な書き方があるので、どう書けばいいのかよく分かりません。

ES6で書く場合はどう書くのでしょうか。

 

該当のソースコード

const namespace = {};
namespace.a = 'a';// 変数
namespace.function = function() {// 関数
  console.log('test');
};
namespace.class = class {// クラス
  constructor(params) {
    this.params = params;
  }
};

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

ES5以前のJavaScriptにおいて、名前空間(namespace)という概念がそもそもありませんでした。各ファイルは単に結合されるだけだったため、グローバル変数の重複等による諸問題が発生する状態でした。その回避のために即時関数の使用や擬似的な名前空間の作成等のテクニックが編み出されました。

ES6(ES2015)から名前空間の概念が追加されました。ただ、ここで追加された名前空間は、一つのファイルないで名前空間を分けるという手法では無く、複数のファイルについて、それぞれが名前空間を持つ方式です。これがES6から追加されたモジュール(module)です。

ES6からモジュールとしてスクリプトファイルを読み込むという動作ができるようになりました。これまで、JavaScriptをHTML内で羅列した場合、それは単なるファイルの結合に過ぎませんでした。しかし、モジュールベースになった場合、それぞれが独立し、必要なものだけをやり取りできるようにしました。モジュールは次の点で通常のスクリプトファイルとは異なります。

トップレベルのvar変数定義や関数定義がグローバルオブジェクトのプロパティ(グローバル変数)にはなりません。グローバルオブジェクトのプロパティとして明示的に作成しない限り、ファイル間で変数名や関数名の重複は発生しません。

指定した変数、関数、クラスしか公開されません。トップレベルの変数であっても、公開しなければ、アクセス方法がありません。

自動的にstrictモードになります。’use strict’;の汚染もありません。

このように、スクリプトファイル一つ一つが独自の名前空間を作成し、公開された名前を通してしか、やり取りできないようにしています。これがモジュールであり、ES6から追加された名前空間です。

モジュールの公開や読み込みにはexportとimportという新しい構文を使用します。exportでそのファイルにある変数等についてどれを公開するのか指定し、importで指定した名前で他のファイルをモジュールとして読み込みます。

 

以上、JavaScriptの名前空間の書き方について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝(たけだ しょうき)

HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

田島悠介

JavaScriptの名前空間の書き方について解説したよ。

大石ゆかり

名前空間とはそもそも何ですか?

田島悠介

クラス名や関数名が他のプログラムと同じにならないようにする仕組みなんだよ。

大石ゆかり

わかりました。ありがとうございます!

他にもJavaScript内でdocument.writeを使わずにHTMLを書く方法についてメンターが回答しています。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。