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

2024年3月1日

Kotono

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

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

この記事では

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

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

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

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

名前空間とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【JavaScript入門】変数のスコープを完全マスター！

更新日：2024年3月1日

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

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

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

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

名前空間の書き方

では実際に、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>

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

上のコードでは、まずは足し算を行う関数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>

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

上のコードでは、唯一定義されているグローバル変数は大文字の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>

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