Parcel

Page content

Parcelは、設定不要で高速なウェブアプリケーションバンドラーです。

ウェブアプリケーションの開発において、JavaScript、CSS、HTMLなどの複数のファイルを組み合わせて一つのまとまり（バンドル）にする作業が必要になります。この作業を行うツールを「バンドラー」と呼び、Parcelはその一種です。

従来のバンドラー（例えばWebpack）は、非常に強力ですが、多くの設定ファイルを書く必要があり、学習コストが高いという課題がありました。それに対し、Parcelは**「Zero Configuration（設定不要）」**を最大の売りにしています。

Parcelの主な特徴

  1. 設定不要 (Zero Configuration):

    • これがParcelの最も大きな特徴です。ほとんどの場合、package.json にスクリプトを一つ書くだけで、複雑な設定ファイルなしに動作します。
    • JavaScript（ES Modules, CommonJS）、CSS（PostCSS, Sass, Less, Stylus）、HTML、画像ファイルなど、様々なアセットタイプを自動的に検出して処理します。
    • TypeScript、React、Vueなどの一般的なツールやフレームワークも、追加の設定なしで動作します。

  2. 非常に高速:

    • マルチコア処理を活用し、非常に高速なバンドル速度を実現しています。
    • キャッシュ機能も強力で、2回目以降のビルドはさらに高速になります。
    • Hot Module Replacement (HMR) を標準でサポートしており、開発中にコードを変更すると、ページ全体をリロードすることなく、変更部分だけが即座に反映されます。これにより、開発体験が大幅に向上します。

  3. アセットパイプラインの自動処理:

    • HTMLファイルをエントリーポイントとして指定するだけで、そこからリンクされているCSSファイル、JavaScriptファイル、画像ファイルなどを自動的に追跡し、最適化してバンドルします。
    • ファイルの種類に応じて、BabelによるJavaScriptのトランスパイル、PostCSSによるCSSのベンダープレフィックス付与や最適化、画像ファイルの圧縮などを自動的に行います。

  4. コード分割 (Code Splitting):

    • 大規模なアプリケーションでは、すべてのコードを一つの大きなファイルにバンドルすると、初期ロードが遅くなります。Parcelは、動的な import() 文などを利用して、必要に応じてコードを分割し、必要な時にだけロードするように最適化します。これも設定なしで自動的に行われます。

  5. 診断情報の表示:

    • ビルド中にエラーが発生した場合、詳細なエラーメッセージとコードの場所をわかりやすく表示し、デバッグをサポートします。

Parcelの利用例

基本的なウェブプロジェクトでParcelを使う場合の手順は非常にシンプルです。

  1. プロジェクトのセットアップ:

    mkdir my-parcel-app
cd my-parcel-app
npm init -y

  2. Parcelのインストール:

    npm install parcel --save-dev
# または yarn add parcel --dev

  3. HTMLファイルを作成 (例: src/index.html):

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Parcel App</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>Hello from Parcel!</h1>
    <script type="module" src="./main.js"></script>
</body>
</html>

  4. JavaScriptファイルを作成 (例: src/main.js):

    import './another-module.js';
console.log('main.js loaded!');

const app = document.querySelector('h1');
if (app) {
    app.textContent = 'Hello, Parcel with JavaScript!';
}

  5. 別のJavaScriptファイルを作成 (例: src/another-module.js):

    console.log('another-module.js loaded!');

  6. CSSファイルを作成 (例: src/style.css):

    body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #007bff;
}

  7. package.json にスクリプトを追加:

    {
  "name": "my-parcel-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.x.x"
  }
}

  8. 開発サーバーの起動:

    npm start

    ブラウザで http://localhost:1234 (または表示されたURL) にアクセスすると、アプリケーションが動作していることが確認できます。コードを変更すると、ブラウザが自動的に更新されます。

  9. 本番ビルド:

    npm run build

    dist ディレクトリに、最適化された本番用のファイルが出力されます。

まとめ

Parcelは、特に小規模から中規模のプロジェクトや、フロントエンド開発の初心者にとって非常に魅力的なバンドラーです。複雑な設定に時間をかけることなく、すぐに開発を始めることができ、高速なビルドと優れた開発体験を提供します。