index.mdx

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

import getStartedWithViteVideo from "./get-started-with-vite.mp4"; import buildVideo from "./build.mp4"; import fakerAppVideo from "./faker-app.mp4"; import canvasConfettiAppVideo from "./canvas-confetti-app.mp4";

複雑化するWeb開発

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

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

トランスパイラ

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

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

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

モジュールバンドラ

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

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

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

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

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

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

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