スライドショー

【JavaScript入門】使わなきゃ損!名前空間をやさしく解説!

みなさんこんにちは!Kotonoです。

今回はJavaScriptにおける「名前空間」について解説していきたいと思います。

この記事では

・名前空間とは
・名前空間を使用するメリット

などといった基本的な内容から

・名前空間とスコープの違いについて
・名前空間の書き方
・名前空間を階層化する方法

などといったより発展的な内容に関しても、分かりやすく説明していきたいと思います。

名前空間とは

みなさんは「名前空間」とは何か知っていますか?

名前空間は、英語ではNamespace(ネームスペース)と言い、プログラミングにおける概念のひとつです。

「名前空間」という概念は、名前の衝突を避けるために存在します。

その「空間」の中に、同じ名前のものが複数存在しないように仕分ける仕組みのことを指します。

空間とは一種の容器のようなものです。

例えば、「太郎」という名前は複数の人を指す可能性がありますが、名字ごとに名前空間を作成することによって、どの「太郎」かの区別がつきます。

実際、名前空間「鈴木」の中の「太郎」と、名前空間「佐々木」の中の「太郎」は別人と認識することができますよね。

名前空間を使用するメリット

「名前の衝突を避ける」という主な目的を持っている「名前空間」という概念ですが、他に名前空間を使用するメリットとは何でしょうか。

小さな規模のプログラムの場合、名前空間を使用するメリットはあまり感じられないかもしれません。

しかし、ある程度の規模のプログラムは、他のプログラムやサーバーなどとの関りを持つことなども考えられます。

このような場合には、名前空間を使用することによってプログラマーの負担が軽減されるのです。

名前の衝突により発生する不具合などを予防することができるので、要らない処理を省く事が出来るのです。

名前空間とスコープの違いについて

JavaScriptの基本的な概念のひとつとして「スコープ」というものがあります。

スコープについての詳しい説明は以下のリンクを参照してください。

【JavaScript入門】変数のスコープを完全マスター!
更新日 : 2019年1月24日

このセクションでは、スコープと名前空間の違いについて言及していきたいと思います。

スコープと名前空間という二つの概念は似ていますが、厳密に言うと違いがあります。

名前空間は「名前の衝突を避ける」為に存在する概念ですが、スコープは「参照できる範囲」の事を指します。

スコープには名前の衝突を避けるなどといった目的はなく、単にあるスコープ内に定義された変数や関数はそのスコープ内でしか使用できないという事です。

名前空間の書き方

では実際に、JavaScriptプログラムで「名前空間」という概念を導入してみましょう。

まずは最初に、名前空間を使用しない簡単なプログラムをご覧ください。

<html>
  <body>
    <script>

        function addition(num1,num2) {
            return num1+num2;
        }
 
        function multiplication(num1,num2) {
            return num1*num2;
        }

        var operation = addition(5,10);
        console.log(operation)

    </script>
  </body>
</html>

実行結果は以下の通りです。

15

上のコードでは、まずは足し算を行う関数additionと掛け算を行う関数multiplicationを定義しました。

そしてグローバル変数operationに足し算の結果を格納し、それをJavaScriptコンソールに表示させています。

関数additionに渡した引数は5と10なので、コンソールに表示されたのは15です。

ご覧いただけるように、上のコードではすべてがグローバル変数として存在しています。

その為、グローバルスコープ内に同じ名前の関数や変数が存在すると、衝突の原因になります。

では次に、上のコードを名前空間を使用して改善してみました。

以下のコードをご覧ください。

<html>
  <body>
    <script>

        var MYFUNCTIONS = {

            addition: function(num1,num2){
                return num1+num2;
            },

            multiplication: function(num1,num2){
                return num1*num2;
            }
        } 

        var operation = MYFUNCTIONS.addition(5,10);
        console.log(operation)

    </script>
  </body>
</html>

実行結果は以下の通りです。

15

上のコードでは、唯一定義されているグローバル変数は大文字のMYFUNCTIONS変数です。

その中に、addition関数とmultiplication関数を定義しています。

こうすることでMYFUNCTIONSという名の空間を作成し、その中に任意の関数を含ませています。

MYFUNCTIONS内の関数を呼び出すためには、MYFUNCTIONS.関数名 という構文を使用します。

ご覧いただけるように、MYFUNCTIONS.addition(5,10) と書く事によって、addition関数が呼び出されました。

結果は、先ほどのコードと同じ15です。

名前空間を階層化する方法

最後に、名前空間を「階層化」する方法をご紹介します。

階層化することによって、より多くの関数や変数を管理することが出来るので便利です。

以下のコードをご覧ください。

<html>
  <body>
    <script>

        var MYAPPLICATION = {

            OPERATIONS: {

                addition: function(num1,num2){
                    return num1+num2;
                },

                multiplication: function(num1,num2){
                    return num1*num2;
                }
            },

            OTHER: {

                show: function(num1,num2){
                    console.log("Your numbers are " + num1 + " and " + num2);
                } 
            }

        } 

        MYAPPLICATION.OTHER.show(5,10);

    </script>
  </body>
</html>

実行結果は以下の通りです。

Your numbers are 5 and 10

上のコードでは、唯一のグローバル変数MYAPPLICATIONを複数の空間に小分けしました。

OPERATION空間には、addition関数やmultiplication関数を記入し、OTHER空間には新たな関数showを含ませました。

空間の中に空間を作ることによって、より仕分けがしやすくなり、簡潔なコードに仕上がります。

例えば、OTHER空間にあるshow関数を呼び出すには、外側の空間.内側の空間.関数名 といった構文をしようします。

実際、MYAPPLICATION.OTHER.show(5,10) と書くと、引数5と10に指定されたshow関数が呼び出されます。

show関数は、JavaScriptコンソールに 「Your numbers are 引数1 and 引数2」 といったフレーズを出力します。

その為、今回はご覧いただけるように、Your numbers are 5 and 10 と表示されました。

まとめ

今回はJavaScriptにおける「名前空間」について解説しました。

名前空間という概念を知っていると、より簡潔で美しいプログラムを書く事が出来、ミスなども抑える事が出来ます。

皆さんもこの記事を通して、名前空間に関する知識をどんどん深めていってくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説