Node.jsでこんな疑問に感じてる人へ…
- ブラウザで動くJavaScriptと同じ？
- 両者にはどういう違いがあるの？
実は両者は同じJavaScriptであるものの、
その性能や仕組みは全くといって違います。
そこでそういうのが分からない人の為に、
Node.js vs 普通のJavaScriptの違いを解説です。
このページの目次
１．サーバー側 vs クライアント側
これは当たり前だろって話ですが…
Node.jsはサーバー側で動くものです。
一方、普通のJavaScriptはブラウザ側で動きます。
これを知らないことには話になりません。
▼ Node.jsでサーバー構築の基本手順
上記記事でも説明したように、Node.jsはそれ自体がJavaScriptで動くサーバーソフトのようなものです。つまりApacheとかnginxと同類のものなんです。
一方のブラウザ側で動くJavaScript、これはクライアント側で動かせる以上のことはできません。また性能的にも天と地ほど差があります（後述）
２．使用できるメモリ量に雲泥の差
これも大きな違いです。
使用できるメモリ量が全く違うこと
具体的には次のような感じです。
- Node.js
前述のようにNode.jsはJavaScriptで動作するサーバーソフト。つまり論理的にはサーバーで利用可能なメモリを全て占有することもできる
- ブラウザ側で動くJS
ChromeやFireFoxのようなソフトの中で動くので、限られたメモリしか使用できない。メモリを使いすぎると強制終了させられてしまう
メモリ面では比較すらできない違いがあります。
ちなみにNode.jsで使用可能なメモリ容量、
それは以下のコマンドで調べられます。
▼ こういうコマンドをnpmから実行
|
1 2 3 |
> node -e "console.log('ヒープメモリ上限 : ', Math.floor(v8.getHeapStatistics().heap_size_limit/1024/1024/1024)+'GB')" メモリ上限 : 4GB |
▼ Node.jsのメモリ上限の変更方法
Node.js のプロセスで使用できるメモリ上限を上げましょう。Node.js のプロセスが使用できるメモリ上限は、デフォルトで 2GB 未満です。--max-old-space-size オプションで任意のメモリ上限をメガバイト単位で指定します。
引用元 ： https://zenn.dev/lollipop_onl/articles/eoz-nuxt-dev-memory-leak
このようにNode.jsでは必要なら 。--max-old-space-size オプションでいくらでもメモリ上限を変更できます。ブラウザ側で動くJavaScriptでそういうことはできません。
メモリ面でも自由度が大きく異なります。
３．HTMLレンダリングのタイミング
HTML描画（レンダリング）のタイミングについて
これにも次のように違いがあります。
- Node.js
サーバー側でレンダリングを行うため、ブラウザ側でページ表示された直後にHTMLレンダリングは終了している。
- ブラウザ側で動くJS
ページが読み込まれたタイミング（DOMContentLoadedあるいはloadイベント発火時）でHTML要素を操作できる。そのため画面のガタつきなどが生じてしまう
例えばNode.jsのシンプルな例を見てみます。
▼ こういうコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('<p>Hello World</p>'); }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); /// ブラウザで開くと、 /// 以下のHTMLがレンダリングされる /// <p>Hello World</p> |
重要なのはNode.jsではブラウザ側でレンダリングする訳ではなく、あらかじめHTML構築したものを直接出力できるのが強みです。
また上記ではHTMLをそのまま書いてるけど、実際はExpress.jsでのejsのようにテンプレートとして別ファイルとしてHTML定義を行うことが多いです。（参考 ： Expressにおけるejsの使い方 ： https://qiita.com/kamihork/items/1b13d2157979d1837849）
クライアント側で動くJavaScriptではできないので、それもNode.js vs 普通のJavaScriptを隔てる壁と言っていいかもしれません。
４．使用できるAPIに差異がある
Node.jsではJavaScriptが使えます。
そしてJSには組み込み関数が存在してます。
例えば具体例を挙げるとするなら…
- <配列系関数>
- Array.forEach()
- Array.map()
- Array.filter()
- <文字列系巻数>
- String.includes()
- String.slice()
- String.split()
- <数学系関数>
- Math.abs()
- Math.ceil()
- Math.floor()
- setInterval()
- setTimeout()
- 他にもキリがない…
これらは当然、Node.jsでも使えます。
でも以下のようなWeb APIは非対応です。
- fetch API
- XMLHttpRequest
クライアント側では fetch API（https://developer.mozilla.org/ja/docs/Web/API/Fetch_API） をよく使うと思うんですが、なんとNode.jsではサポートされてません。使用するにはfetchモジュールなどインストールが必要です。
そういうAPI的な面でも若干差異あります。
Node.js vs JavaScriptの違いまとめ
ということで違いを簡単にまとめます。
細かく考えるとかなり差異があるのが分かります。
以上、Node.js vs JavaScriptの違いでした。
