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

提供: Node.js/JavaScript入門
移動: 案内検索
(ページの作成:「サーバサイド(node.js)とクライアントサイド(ブラウザ)で JavaScript のコードを共有する方法を紹介します。 '''読み方''' ;node....」)
 
(相違点なし)

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

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

読み方

node.js
のーど じぇい えす

概要

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

exports is not defined

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

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

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

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

共有するコード
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>

まとめ

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

関連項目