「node.jsとブラウザでコードを共有する方法」の版間の差分

2018年4月13日 (金) 00:32時点における最新版

サーバサイド(node.js)とクライアントサイド(ブラウザ)で JavaScript のコードを共有する方法を紹介します。

読み方

node.js

のーど じぇい えす

概要

サーバサイド(node.js)とクライアントサイド(ブラウザ)のソースコードを共有する方法について説明します。 node 用のコードをそのままブラウザで使おうとするとき、

exports is not defined

といったエラーに遭遇した方もいらっしゃると思います。

これは、ブラウザで動かすときと、サーバ側で動かす場合で、デフォルトで用意されているオブジェクトが異なるのが原因です。

そこで exports が undefined であるか確認し、 exports があれば、それに関数など exports したいものを入れていき、exports がなければブラウザ用のコードということで、自分が使いたい名前空間を定義します。

ここでは、３つのソースコードを定義します。

共有するコード

share.js

サーバサイド(node.js)で実行するコード

server-share.js

クライアントサイド(ブラウザ)で実行するコード

client-share.html

ソースコード share.js

これは、サーバとブラウザの両方で共有するためのコードです。

/*
 * share.js
 * Copyright (C) 2018 kaoru <kaoru@localhost>
 */
(function(exports){
  'use strict';
 
    exports.foo = function(){
            return "foo";
    }
})(typeof exports === 'undefined' ? this.share = {} : exports);

ソースコード server-share.js

サーバサイドの node.js のコートです。

/*
 * client-share.js
 * Copyright (C) 2018 kaoru <kaoru@localhost>
 */
(function(){
  'use strict';
 
    var share = require('./share.js');
    console.log(share.foo());
})();

実行方法は以下の通りです。

$ node server-share.js

ソースコード server-share.html

これは、クライアント（ブラウザ）側で実行するコードです。 都合により、コードの＜＞は、全角になっているため、半角になおしてご利用下さい。

＜html＞
        ＜head＞
        ＜meta charset="utf-8" /＞
                ＜title＞Server-Share＜/title＞
        ＜/head＞
        ＜body＞
 
        ＜/body＞
        ＜script language="javascript" src="./share.js"＞＜/script＞
        ＜script language="javascript"＞
        document.write(share.foo());
        ＜/script＞
＜/html＞

まとめ

ちょっと工夫して、コードを書くことで、サーバサイドでもクライアントサイドでも利用できるコードになります。

関連項目

• node.jsでオブジェクトをexportする方法
• node.jsで関数をexportする方法
• メインページ