メインコンテンツまでスキップ

トランスパイラとモジュールバンドラ

複雑化するWeb開発​

JavaScriptは、当初はWebサイトに簡易的な動きを追加させるための言語として設計されました。しかしながら、高度なWebアプリケーションの台頭や、Node.jsをはじめとしたブラウザにおけるJavaScriptのユースケースの広がりにより、標準的なJavaScriptのみでの開発には限界があることがわかってきました。

このため、現代では、JavaScriptは事前に何らかの変換を行っておくことが一般的になっています。

トランスパイラ​

トランスパイラは、ソースコードを別のソースコードに変換するためのプログラムです。JavaScriptにおいてトランスパイラが必要になるのは、主に2つの理由によります。

ひとつは、最新の機能を使用するためです。JavaScriptの言語仕様は、Ecma InternationalのTC39によって作成されていますが、新しく策定された仕様は、まだブラウザなどによって実装されていない場合があります。Babelは、そういった最新の言語仕様に沿って書かれたプログラムを変換し、古い仕様の範囲内で解釈できるプログラムに変換するための、最も有名なトランスパイラです。

もうひとつは、別の言語で書かれたプログラムをJavaScriptに変換するためです。次の章で扱うTypeScriptは、トランスパイラを用いてJavaScriptに変換されます。

モジュールバンドラ​

通常、規模の大きなプログラムは、見通しが良くなるよう複数のファイルに分割されます。HTMLから複数のJavaScriptを読み込むためにはscriptタグを並べれば良いですが、HTTPサーバーの節で学んだように、scriptタグの数だけHTTPリクエストが発行されてしまうため非効率的です。

webpackのようなモジュールバンドラを用いることで、複数のJavaScriptファイルを統合できます。

なお、Node.jsの場合は、モジュールの読み込みはファイルの読み込みに過ぎず、ネットワークを経由することはないため、このプロセスは通常必要ありません。

JavaScriptファイルの変換

Viteを用いたフロントエンド開発​

Web開発の領域では、ブラウザ (クライアント) で動くJavaScriptプログラムをフロントエンド、サーバーで動くプログラムをバックエンドと呼ぶことがあります。

Viteは、主にフロントエンドの領域における、トランスパイラやモジュールバンドラなどの機能を持つソフトウェアです。

Viteを用いて新しくプロジェクトを作成してみましょう。

詳細な手順は次のとおりです。

まずは、ターミナルでカレントディレクトリをプロジェクトフォルダを格納するディレクトリに移動し、

npm create vite@latest

を実行します。Select a frameworkと尋ねられるので、Vanillaを選択してください。その後、Select a variantと尋ねられるので、JavaScriptを選択してください。

すると、package.jsonを含む新しいディレクトリがカレントディレクトリに作成されます。このディレクトリをVS Codeで開きましょう。

続いて、作成されたpackage.jsonをもとにnpmから必要なパッケージをダウンロードするため、

npm install

を実行します。完了したら、

npm run dev

を実行してください。

Vite内蔵のウェブサーバーが起動し、http://localhost:5173/でウェブサイトが表示されます。

Viteの仕組み​

Viteの挙動を理解するため、control + C (macOS) / Ctrl + C (Windows) で先ほど起動させたウェブサーバーを停止させ、npm run buildコマンドを実行してみましょう。

$ npm run build

> vite@0.0.0 build
> vite build

vite v4.3.5 building for production...
✓ 7 modules transformed.
dist/index.html                      0.45 kB │ gzip: 0.30 kB
dist/assets/javascript-8dac5379.svg  1.00 kB │ gzip: 0.60 kB
dist/assets/index-48a8825f.css       1.24 kB │ gzip: 0.65 kB
dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
✓ built in 64ms

これにより、カレントディレクトリにdistディレクトリが作成され、トランスパイルとバンドルの結果が格納されます。

出力されたファイルを元のファイルと比較してみましょう。元のindex.htmlやmain.jsが、変換された状態で出力されていることがわかります。ディレクトリごとNetlify Dropなどにアップロードすれば使用可能になるでしょう。

npm runコマンド

npm runコマンドは、package.jsonのscriptsプロパティに記載されたコマンドを実行します。開発によく使うコマンドを登録しておくことで、コマンドを打つ手間を削減できます。

npm create vite@latestが自動的に生成するpackage.jsonのscriptsプロパティは、次のようになっていました。ここに記載されたコマンドでは、npxコマンドを用いたときのように、npmでインストールされたパッケージをそのまま実行できます。例えば、npm run devコマンドを実行することで、npx viteに相当する処理が行われます。

package.json (一部抜粋)
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

npmのパッケージをWebブラウザ上で利用する​

npmのパッケージがブラウザ上での実行に対応している場合は、Viteをはじめとしたトランスパイラやモジュールバンドラにより、ブラウザ向けのJavaScriptに変換させられます。例としてdate-fnsパッケージを使用してみましょう。

import { format } from "date-fns";

document.getElementById("app").textContent = format(
  new Date("2022-01-10"),
  "yyyy年MM月dd日",
);
GitHub で表示このプログラムを実行する

フロントエンドとバックエンドの統合​

Viteなどのツールによって出力されたブラウザ上で動くアプリケーションと、Node.jsをはじめとしたサーバー向けのアプリケーションを統合するためには、複数の手法が考えられます。

最も単純なアプローチは、ビルド時に統合することです。この方法のメリットは、本番環境にデプロイするのが簡単であることです。ディレクトリ構成は、例えば次のようになります。

app
├── client
│   ├── index.html
│   └── main.js
├── package.json
├── package-lock.json
└── server
    └── main.mjs
GitHub で表示このプログラムを実行する

npm run buildコマンドによってViteがビルド結果を/distに出力するようにしておきます。

/package.json
{
  "scripts": {
    "start": "node server/main.mjs",
    "build": "vite build client --outDir ../dist"
  }
}

express.staticによりViteが作成したディレクトリを指定すれば完成です。

server/main.mjs
import express from "express";
const app = express();

app.use(express.json());

// Viteによって出力されたディレクトリを配信する
app.use(express.static("./dist"));

app.listen(3000);

演習問題1​

chart.jsを用いると、ブラウザ上に非常に美しいグラフを描画することができます。このパッケージを用いて、適当なデータをビジュアライズしてみましょう。

GitHub で表示

演習問題2（発展）​

Viteを用いて作成したWebフロントエンドと、Node.jsのバックエンドが協調して動作するアプリケーションをRenderにデプロイしてみましょう。