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

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

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

この記事では

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

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

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

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

名前空間とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

名前空間の書き方

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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

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