Parcel.jsを使って、Webアプリケーションをバンドルする方法はどのようなものですか？

1年 ago
夏樹, 風
6 minutes

はじめに

サイトやウェブアプリケーションを開発する際には、コードを小さな、管理しやすいチャンクに分割することが良い習慣です。本番環境では、個々のリソースを個別に要求することでアプリケーションが遅くなる可能性があります。バンドラとは、この遅延の問題を解決するために使用されるツールであり、コードをひとつのファイルに結合・マージします。これにより、リソースのためのサーバーへのHTTPリクエストの数を制限できます。バンドラを使用することは、ユーザーと開発者の両方にとって経験を最適化するのに役立ちます。

Parcel.jsはオープンソースのバンドラーです。TypescriptやSASSなど多くの人気言語をサポートしており、また画像やフォントなどのファイル形式も扱うことができます。Parcelにはいくつかの追加ツールが組み込まれており、開発サーバーや診断、最小化、さらには画像圧縮も行えます。もしプロジェクトに追加の設定が必要な場合は、Parcelの多くのプラグインを利用するオプションもあります。

このチュートリアルでは、Parcelを使用してHTML、CSS、JavaScriptファイルを含む小さなWebアプリケーションをビルドしバンドルします。テキストエディタとターミナルを交互に使用して作業します。また、カスタムnpmスクリプトを使ってParcelを設定し、アプリケーションの実行とビルドを補助する方法も学びます。

前提条件

このチュートリアルに従うには、次のものが必要です：

  • An understanding of HTML, CSS, and JavaScript. You can learn about these from our How To Build a Website with HTML, How To Style HTML with CSS, and How To Code in JavaScript tutorial series.
  • A text editor like Visual Studio Code. You may use any text editor you like.
  • Familiarity with a terminal. You can learn how to use a terminal from our An Introduction to the Linux Terminal and Learning to Love Your Terminal guides.
  • Node.js installed on your local machine. Follow our How to Install Node.js and Create a Local Development Environment tutorial for your specific environment.

あなたのマシンにNode.jsがセットアップされたら、次のステップに進む準備が整いました。

ステップ1：Parcel Bundlerのインストール

このチュートリアルでは、作業ディレクトリとして”your_project”を使用しますが、自由に名前を変更したり、独自のプロジェクトフォルダを使用しても構いません。お好みのテキストエディタとターミナルまたはコマンドプロンプトを開き、次のステップに進む前にプロジェクトのトップディレクトリにいることを確認してください。

「your_project」ディレクトリ内で、ターミナルまたはコマンドプロンプトを使用して、npm initコマンドを使用してプロジェクトを初期化してください。

あなたのプロジェクト
  1. npm init

 

このコマンドを実行すると、プロジェクトに関する一連のプロンプトが表示されます。各質問に進むにはENTERキーを押すか、デフォルトの設定を好きなように変更することができます。終了したら、デフォルトの設定を変更しなかった場合、テキストエディタから表示できる以下の情報が含まれたpackage.jsonファイルが作成されます。

あなたのプロジェクト/パッケージ.json
{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

次に、–save-devフラグを使用してParcelバンドラをローカルにインストールしてください。

あなたのプロジェクトについて。
  1. npm install –save-dev parcel

 

–save-dev フラグは、インストールパッケージを開発時の依存関係として保存します。つまり、Parcelを使用してアプリケーションを管理および作成するために、開発プロセス中にプロジェクトがParcelに依存することを意味します。

インストール後、プロジェクトには追加のpackage-lock.jsonファイルとnode_modulesディレクトリが含まれます。package-lock.jsonファイルは、npmのインストール時に自動生成されます。このファイルには、プロジェクトが正常に動作するために依存しているすべての依存関係が記載されています。もし、このファイルが持つ情報に興味がある場合は、npmのドキュメントを参照してください。package-lock.jsonファイルと同様に、node_modulesフォルダはプロジェクトが依存しているさまざまなパッケージを保持しています。ただし、このシナリオで自動生成されるファイルは直接編集することは想定されていません。

あなたのpackage.jsonファイルには、開発の依存関係としてparcelが含まれていることに注意してください。

あなたのプロジェクトのパッケージ.json
...
"devDependencies": {
    "parcel": "^2.7.0"
  }
…

パーセルバンドラーがローカル依存関係としてインストールされているので、アプリケーションの作業を開始する準備ができました。

ステップ2 – アプリケーションファイルの作成

次の例では、ボタンをクリックすると背景色が変わる小さなアプリケーションを作成します。これらのアプリケーションファイルの作成後に、プロジェクトにParcelを実装します。

Parcelは、アプリケーションのエントリーポイントとして任意のファイルを受け入れることができます。エントリーポイントファイルとは、アプリケーションの実行が開始される場所です。このエントリーポイントから、Parcelは指定したすべての依存関係（CSSファイルやJavaScriptファイルへのリンクを含む）を使用してアプリケーションをビルドします。アプリケーションのエントリーポイントとして、index.htmlというHTMLファイルを使用します。

テキストエディタで、your_projectディレクトリ内にsrcフォルダを作成して、コードを保管し整理します。Visual Studio Codeを使用している場合、your_projectディレクトリ内で右クリックして、「新しいフォルダー」を選択し、名前をsrcとします。

Inside of Visual Studio Code, right-clicking inside of a directory to create a new folder.

そのsrcフォルダ内に、index.htmlというファイルを作成してください。Visual Studio Codeでsrcフォルダ内を右クリックし、新しいファイルを選択してください。このファイルの名前をindex.htmlとしてください。

index.html ファイルに以下の行を含めてください。

あなたのプロジェクトのソースコードである「index.html」
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Your Parcel Project</title>
  </head>
  <body>
    <h1>Welcome to Parcel!</h1>

    <div class="sammy-wrapper">
      <div class="img-wrapper sammy-1">
        <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
      </div>
    </div>
    
    <button>Change the Background Color</button>

    <script type="module" src="js/app.js"></script>
  </body>
</html>

このHTMLファイルは、あなたのアプリケーションのランディングページです。スタイルシートとスクリプトへのリンクが含まれています。これらのファイルはそれぞれのフォルダに保存され、コードを分離して整理することができます。更新後にファイルを保存することを忘れないでください。VS Codeでは、CTRL+SまたはCMD+Sキーを押してファイルを保存することができます。

あなたのsrcディレクトリ内に、cssという名前の別のフォルダを作成してください。次に、cssフォルダの中にstyle.cssという名前のCSSスタイルシートを作成してください。

Creating a new folder within the ‘src’ directory called ‘css’

style.css ファイルに以下の CSS を含めてください。

あなたのプロジェクトのソースコード（.css ファイル）は、以下の場所にあります：
your_project/src/css/style.css
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  color: white;
  background: var(--bg, rgb(26, 80, 190));
  font-size: 16px;
}
h1 {
  font-size: 3rem;
  padding: 2rem;
}
.img-wrapper {
  max-width: 600px;
  padding: 0 1rem;
  margin: 2rem;
  cursor: pointer;
}
.img-wrapper img {
  width: 100%;
}
button {
  font-size: inherit;
  font-size: 1rem;
  padding: .5rem;
  margin: 8rem 0;
}

このファイルを保存することを忘れないでください。

次に、srcディレクトリ内に、JavaScriptコードを保持するためのjsフォルダを作成してください。

Creating another folder named ‘js’ inside of your ‘src’ directory.

あなたのjsフォルダー内に、次のコードを持つapp.jsファイルを作成してください。

あなたのプロジェクトのソースコード（js/app.js）を日本語で述べる一つのオプション : ご自身が作成されたプロジェクトのソースコードである「js/app.js」です。
const btn = document.querySelector('button');
const body = document.querySelector('body');

let availableColors = ['darkslateblue', 'midnightblue', 'teal', 'tomato', 'seagreen', 'royalblue', 'saddlebrown', 'indigo', 'olivedrab', 'rosybrown'];

btn.addEventListener('click', function() {
  const randomizeColor = Math.floor(Math.random() * availableColors.length);
  body.style.setProperty('--bg', availableColors[randomizeColor]);
});

JavaScriptのコードは、availableColorsの配列からランダムに色を選択し、クリックすると背景色をその色に変更します。

あなたの編集が終わったら、このファイルを保存してください。

全体的に、現在のウェブサイトのアーキテクチャは以下のようになります。

your_project/
|── node_modules
|── src/
|   |── css/
|   |   |── style.css
|   |── js/
|   |   |── app.js
|   |── index.html
|── package.json
|── package-lock.json

あなたのアプリケーションの基本要素が作成されたら、Parcelを使用してアプリケーションを表示および設定することができます。

ステップ３ — 開発サーバーでアプリケーションを実行する

アプリケーションを確認する方法の一つは、HTMLファイルをブラウザで開くことです。ただし、ファイルのいずれかに変更を加えた場合、変更があるたびに手動でブラウザを再読み込みする必要があります。Parcelには、開発サーバーが付属しています。開発サーバーを実行している間にコードを変更すると、Parcelは自動的にブラウザでアプリケーションを更新します。これをホットリローディングと呼ぶことがよくあります。これにより、サーバーを停止し、変更を適用してから再度サーバーを起動する必要がなくなります。

たとえば、Parcelの開発サーバーが起動している場合、your_project/src/css/style.cssスタイルシート内の背景属性を赤に変更して保存することができます。保存後、開発サーバーを停止したり、リフレッシュする必要なく、すぐにブラウザで変更が反映されることに気付くでしょう。

ターミナルで、your_projectディレクトリの中にいることを確認してください。your_projectディレクトリに入ったら、以下のコードを実行して開発サーバーを起動してください。

あなたのプロジェクト
  1. npx parcel src/index.html

 

Output

❯ npx parcel src/index.html Server running at http://localhost:1234 ✨ Built in 5ms

パーセルの組み込み開発サーバーが起動しました。npxパーセルコマンドは、src / index.htmlのエントリーポイントを取り、必要なアセットを使ってアプリケーションをビルドします。出力にも、アプリケーションがhttp://localhost:1234で実行されていることが示されています。

実行中のアプリケーションを表示するには、ウェブブラウザを開き、http://localhost:1234にアクセスしてください。

Your Parcel application running on http://localhost:1234 landing page.

“your_projectディレクトリ内で、npx parcelコマンドを実行した際に2つの新しいフォルダが生成されました。.parcel-cacheフォルダにはプロジェクトに関する情報が保存され、Parcelがアプリケーションを再構築する際に使用されます。ファイルに変更を加えると、Parcelはその変更を検知し、ゼロからではなく、これらのファイルを使用してビルドを再実行します。”

「dist」という名前の別のフォルダには、Parcelが生成した動的なファイルが格納されています。このフォルダには、HTML、CSS、JavaScriptファイルが含まれていますが、すべてのファイルはランダムな文字列の間にインデックスが付けられています。また、.mapファイルも含まれています。npx parcelコマンドを使用すると、Parcelはソースマップを生成します。ソースマップは、ブラウザにバンドルされたコードから元のソースコードの場所を特定するために使用されます。これは、開発および本番環境でコードのデバッグを補助するために使用されます。

Inside of VS Code, the ‘.parcel-cache’ and ‘dist’ folders are automatically generated after you run the ‘npx parcel’ command.

はっきり申し上げますが、これらのファイル内で作業を行う必要はありません。実際には、これらのフォルダを削除すると、npxパーセルコマンドを再度実行する際に、.parcel-cacheフォルダとdistフォルダが自動的に生成および更新されます。

Note

注意: コードに重要な変更を加える場合、それらの変更がブラウザに反映されていないことがあることに気付くかもしれません。このような場合、ブラウザをリフレッシュしてみることができます。それでも問題が解決しない場合は、ターミナルでCTRL+Cを押してサーバーの実行を停止してください。そして、.parcel-cacheフォルダとdistフォルダを削除してください。.parcel-cacheフォルダには古いコードの残骸が残っている可能性があるため、それを削除することで問題を解消することができます。これらを削除した後、再度「npx parcel src/index.html」コマンドを実行してください。これにより、更新されたコードで’.parcel-cache’フォルダとdistフォルダおよびファイルが再生成されます。

新しいフォルダやファイルの検査が終わったら、ターミナルやコマンドプロンプトでCTRL+Cを押してサーバーを終了させてください。

ステップ4 — アプリケーションの開始とビルドのためのnpmスクリプトの作成

開発サーバーを確認するたびにターミナルで「npx parcel src/index.html」というコマンドを実行する代わりに、package.jsonファイル内にnpmスクリプトを作成してこの繰り返し作業を自動化することができます。また、本番に向けてアプリケーションをビルドするための追加のスクリプトを含めることもできます。

最初に、テキストエディタでyour_project/package.jsonファイルを開いてください。

このファイルを変更して、以下の行を含めてください。

あなたのプロジェクトのパッケージ.json
{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build --dist-dir public"
  },
  "author": "",
  "license": "ISC"
  ...

「package.json」ファイルで、「main」の値を「index.js」から「source」の値「src/index.html」に変更しました。「source」は、アプリケーションの入力ファイルまたはソースファイルを示し、ファイルへの具体的なパスを示します。また、次の2つのスクリプトも含めました。

  • “start”: “parcel”: “start” is the name of this command. You can name this whatever you like. “parcel” is the actual command you want your script to perform. In this instance, “parcel” does exactly what the previous npx parcel command does. It starts the development server with your entry point file and builds it with the assets you’ve included. Since you specified the source of the entry point in the “source” field, Parcel understands where to find this file.
  • “build”: “parcel build –dist-dir public”: “build” is the name of this command like ”start” above. You can name this anything you like. The ”parcel build” command builds and optimizes your code for production. This is typically run after you’ve finished developing your application. Parcel’s default directory for your output is named dist. The –dist-dir public tag defines the output folder for your production files and is named public to avoid confusion with the dist default directory. You will perform this task in a later step.

今では、開発サーバーを起動するためにターミナルで「npx parcel src/index.html」と入力する代わりに、「npm start」と入力することができます。

あなたのプロジェクト (Anata no purojekuto)
  1. npm start

 

Output

❯ npm start > your_project@1.0.0 start > parcel Server running at http://localhost:1234 ✨ Built in 5ms

npm start コマンドは、開発サーバーを簡単に起動するためのショートカットです。

ウェブブラウザを開き、http://localhost:1234 にアクセスしてください。アプリケーションのランディングページは以前と同じである必要があります。

設定ファイルが完了したら、アプリケーションの開発とテストを続けることができます。アプリケーションが本番用に準備できたら、次のステップを始めることができます。

ステップ5 – プロダクション向けアプリケーションのビルド

バンドラーの主な特徴の一つは、ファイルの統合です。これは、buildコマンドを実行するとParcelが行ってくれます。たとえば、src/cssディレクトリ内に依存関係のある複数のCSSファイルがある場合、npm run buildコマンドを使用するとParcelはそれらのファイルを1つのファイルに結合します。同じことはJavaScriptファイルにも適用されます。Parcelがこれをどのように行っているかについては、公式ドキュメントを参照して詳しく学ぶことができます。

あなたのアプリケーションが本番用に準備ができたら、package.json ファイルに含まれているビルドコマンドを使用して、本番用ファイルを作成してください。

最初に、トップレベルディレクトリである「your_project」にいることを確認してから、次のコマンドをターミナルまたはコマンドプロンプトに入力してください。

あなたのプロジェクト (Anata no purojekuto)
  1. npm run build

 

Output

❯ npm run build > your_project@1.0.0 build > parcel build ✨ Built in 767ms public/index.html 781 B 239ms public/index.9daf4050.css 582 B 21ms public/index.a9c94235.js 532 B 179ms

上記の通り、Parcelのデフォルトの出力先はdistフォルダです。ビルドスクリプトでファイルの出力先をpublicと指定したため、Parcelはこのフォルダを生成して、本番用のファイルを出力します。開発時とは異なり、このフォルダにあるファイルはマージされ、最小化され、さらに最適化されています。Parcelがコードを最適化する方法や本番用のファイルについては、ドキュメントで詳しく説明されています。

例えば、public/index.htmlファイルを開けば、コードはミニファイされているはずです。

あなたのプロジェクトの公開フォルダ内にあるindex.htmlファイル
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.9daf4050.css"><title>Your Parcel Project</title></head><body><h1>Welcome to Parcel!</h1> <div class="sammy-wrapper"><div class="img-wrapper sammy-1"><img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark"></div></div> <button>Change the Background Color</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

公開ディレクトリ内では、distフォルダと同様に作業を行いません。コードを変更する必要がある場合は、srcディレクトリ内のファイルを直接変更してください。

npm startコマンドと同様に、変更を加えた後にnpm run buildコマンドを使用して、プロダクションファイルを再構築することができます。公開フォルダとその中に含まれるファイルは、準備が整った時点でWebサーバーに展開する必要があります。

現在、あなたはParcelを使用してアプリケーションを作成し、バンドル化しました。

結論

このチュートリアルでは、アプリケーションを作成し、それをParcelでバンドルしました。また、開発用および本番用のファイルを作成するために2つのnpmスクリプトも作成しました。Parcelについてさらに詳しく学びたい場合は、公式ドキュメントを参照してください。

アプリケーションのデプロイ方法を学びたい場合は、当社のデジタルオーシャンアプリプラットフォームで、静的サイトをクラウドにデプロイする方法についてのチュートリアルをお読みください。

コメントを残す 0

Your email address will not be published. Required fields are marked *