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

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

複雑化する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 で表示このプログラムを実行する

演習問題1​

Fakerは、ランダムな名前や住所などのデータを生成するためのパッケージです。Fakerをインストールして、次のようにランダムな名前を生成して画面に表示してみましょう。

解答例: Faker

Viteを用いて新しいプロジェクトを作成し、npm install @faker-js/fakerコマンドでFakerをインストールします。続いて、main.jsを次のように書き換えます。

faker.person.fullName関数を用いると、ランダムな氏名を生成できます。

main.js
import { faker } from "@faker-js/faker";

document.getElementById("app").textContent = faker.person.fullName();
GitHub で表示このプログラムを実行する

演習問題2​

canvas-confettiパッケージは、Webブラウザ上で紙吹雪を降らせるためのパッケージです。canvas-confettiパッケージをインストールして、次のように画面に紙吹雪を降らせてみましょう。

解答例: canvas-confetti

Viteを用いて新しいプロジェクトを作成し、npm install canvas-confettiコマンドでcanvas-confettiパッケージをインストールします。続いて、main.jsを次のように書き換えます。

main.js
import confetti from "canvas-confetti";

confetti();
GitHub で表示このプログラムを実行する