はじめに
Node.js環境が必要な場合とそうでない場合(ブラウザ環境)との違いが分からなかったのでまとめました。
問題
javaScriptでグラフツールを作成する際、データのダウンロード機能にExceJs(npm install
が必要)というエクセル操作モジュールを入れようとしてもブラウザ環境で動作しませんでした。
解決方法
モジュールバンドラ(Laravel Mix)でNode.js環境で動くモジュールでもブラウザ環境で動作できるようにする。
Node.js 環境がないブラウザとは?
Node.js は、通常、サーバーサイド(Web サーバーなど)や開発者のコンピューター上で JavaScript を動かすための「実行環境」です。ファイルシステムにアクセスしたり、ネットワーク通信を行ったり、OS の機能を呼び出したりといった、Web サーバーや開発ツールに必要な機能を提供します。
npm
でインストールする多くのライブラリ(特にバックエンドや開発ツール系のもの)は、この Node.js 環境で動くことを前提に作られています。require()
というモジュールの読み込み方も Node.js の標準的な機能です。
ブラウザ環境とは
一方、Chrome, Firefox, Safari といった Web ブラウザも JavaScript を実行する環境ですが、その主な目的は Web ページを表示し、ユーザー操作に応答することです。
セキュリティ上の理由から、ブラウザの JavaScript は、ユーザーのコンピューター上の任意のファイルに自由にアクセスしたり、Node.js のような OS 機能を直接呼び出すことはできません。
Node.js 環境がないブラウザ
つまり、Web サイトを閲覧している一般ユーザーのブラウザには、Node.js がインストールされているわけではありません。
そのため、Node.js 特有の機能(require('fs')
のようなファイルアクセスなど)や、Node.js の require()
というモジュール読み込みの仕組みをそのままでは理解・実行できません。
これが「Node.js 環境がないブラウザ」という意味です。
バンドル (Bundle) とは?
最近の Web 開発では、JavaScript のコードを機能ごとに別々のファイル(モジュール)に分割して書くのが一般的です(例: header.js
, form-validation.js
, api-client.js
など)。また、exceljs
のような便利な外部ライブラリ(これも多くのファイルで構成されています)を npm
などでインストールして利用します。
これら多数の JavaScript ファイルを、そのまま <script>
タグで一つ一つ HTML に読み込ませると、
- ブラウザがサーバーに何度もファイルを取りに行く必要があり、ページの表示が遅くなる。
- ファイル間の依存関係(「このファイルは、あのファイルが先に読み込まれていないと動かない」といった関係)の管理が大変になる。
なので、Node.js の require()
や ES6 の import
といったモジュール構文を、古いブラウザも含めて確実に解釈させたい。
★ バンドルの役割
「バンドル」とは、これらの問題を解決するための処理です。Laravel Mix のようなツール(内部では Webpack などが使われています)が、複数の JavaScript ファイルや、node_modules
にインストールされた外部ライブラリ(exceljs
など)をすべて解析します。
そして、どのファイルがどのファイルに依存しているか(require
や import
の関係)を把握し、それらを一つ(または最適化のために数個)の大きな JavaScript ファイルにまとめる作業を行います。このまとめる行為、またはまとめられたファイルの束(たば)を「バンドル」と呼びます。
ブラウザで実行可能な JavaScript ファイルとは?
これは、上記「バンドル」処理の結果として生成される JavaScript ファイルのことです。
元のソースコード(複数のファイルに分かれていたり、Node.js の require()
を使っていたりする)が、ブラウザが直接解釈して実行できる形式に変換され、まとめられた状態になっています。
まとめ
■ Node.js 環境がないブラウザとは?
Node.js 特有の機能や require
をそのままでは使えない、普通のユーザーのブラウザ。
■ バンドルとは?
複数の JavaScript ファイルやライブラリを、依存関係を解決しながら一つ(または少数)のファイルにまとめる処理。
■ ブラウザで実行可能な JavaScript ファイル
バンドル処理によって作られた、ブラウザがそのまま読み込んで実行できる形式の JavaScript ファイル。