Parcel入門 - Sassの導入方法

2022年4月18日更新 / 株式会社ICS

ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。

webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。

Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。

Sassのコンパイル
Autoprefixerによるベンダープレフィックスの自動付与
ソースマップの作成
モジュールのバンドル
モジュールのTreeShaking
TypeScriptのコンパイル
Babelのコンパイル
ビルドファイルのminify
ローカルサーバーの起動、自動リロード

本エントリーではParcelの入門編として次の内容を解説します。

Sassのコンパイル方法
ローカルサーバーの起動・自動リロード方法
納品ファイルの作成方法
webpackとの使い分け

本記事のサンプルファイル

GitHubにサンプルファイルを用意しているので、ダウンロードしてご利用ください。

2022年4月時点のParcel 2.4でサンプルを用意しています。

環境準備

今回はプロジェクトフォルダー（ウェブサイトのファイル一式が保存されるフォルダー）として、myprojectというフォルダーを使う前提で解説します。コマンドラインでmyprojectフォルダーに移動します（※1）。

▼ macOSでのフォルダーの移動のコマンド

cd /Users/★★★/myproject

▼ Windowsでのフォルダーの移動のコマンド

cd C:¥Users¥★★★¥myproject

以下のnpmコマンドで初期化します。

npm init -y

完了すると、package.jsonファイルがプロジェクトフォルダー内に作られます。

続いて、Parcelを次のコマンドでインストールします。

▼ コマンド

npm install -D parcel

以上でParcelの環境設定は終了です。Parcelのための設定ファイルを作成する必要はありません。

※-yや-Dは、npmコマンドを扱う際の便利なショートカットです。

Sassのコンパイル

style.scssというSassファイルのコンパイルを通して、Parcelの使い方を学びましょう。srcフォルダーにstyle.scssというファイル名でテキストファイルを作成ください。

./
├── package.json
└── src
    └── style.scss

style.scssは次の内容とします。Sass特有の機能である「変数」や「ネスト」を使っています。

▼ src/style.scss

$redColor: #ea5b54;

.container {
  .box {
    background-color: $redColor;
  }
}

Sassファイルをコンパイルするには次のコマンドを使います。

▼ コマンド

npx parcel コンパイルしたいファイル名

src/style.scssをコンパイルするには次のとおりです。

▼ コマンド

npx parcel src/style.scss

プロジェクトフォルダー内にdistフォルダーが生成され、コンパイル後のCSSファイルが生成されているのがわかります。

./
├── dist
│   ├── style.css
│   └── style.css.map
├── node_modules
├── package.json
└── src
     └── style.scss

▼ dist/style.cssファイルの中身

.container .box {
  background-color: #ea5b54;
}

Sassファイルの更新は自動で反映される

Sassファイルを更新すると、Parcelは自動で再コンパイルを行い、distフォルダーに出力します。

なお、ファイルの監視を終了する場合は、コマンドラインでCtrl+Cキーを同時に押します。

不足しているモジュールは自動でインストールされる

Sassのコンパイルコマンドは、初回実行時はやや時間がかかります。Sassのコンパイルに必要なモジュールを、Parcelが自動でインストールしているためです。Parcelは必要なモジュールがnode_modulesフォルダーに存在しない場合、それをインストールしようとする仕組みがあります。開発者のモジュールインストールの負担を減らす便利な機能です。

package.jsonの見ると、モジュールがインストールされていることがわかります。

▼ package.json。@parcel/transformer-sassモジュールがdevDependenciesに追加されている

{
  // （抜粋）
  "devDependencies": {
    "@parcel/transformer-sass": "2.4.1",
    "parcel": "^2.4.1"
  }
}

出力フォルダーを変更したい場合

初期設定ではコンパイル後のファイルはdistフォルダーに格納されます。出力フォルダーを変更するには、コマンドに--dist-dir 出力したいフォルダー名を設定します。たとえば、publicフォルダーに格納するコードを紹介します。

▼ コマンド

npx parcel src/style.scss --dist-dir public

実行すると、publicフォルダーにコンパイル後のCSSファイルが格納されます。

./
├── package.json
├── node_modules
├── public
│   ├── style.css
│   └── style.css.map
└── src
    ├── index.js
    └── style.scss

ローカルサーバーの起動

これまで紹介したのはSassファイル単体をコンパイルする方法でした。現場の開発では、次のような開発手法を行いたいケースも多いでしょう。

コンパイルされたCSSファイルが、ウェブページにどのように反映されるかを確認したい
ローカルサーバーを起動したい
ファイルを更新したら確認中のウェブページを自動的に更新したい

Parcelにはそれらを実現する手法が備わっています。

メインの処理を行うJavaScriptファイル作成

まず、メインとなる処理を行うJavaScriptファイル「エントリーポイント」を作成します。今回はindex.jsというファイル名にします。ファイル構成は次のとおり。挙動をわかりやすくするため、前回の解説で用いたdistフォルダーやpublicフォルダーは手動で削除してあります。

./
├── package.json
├── node_modules
└── src
    ├── index.js
    └── style.scss

エントリーポイント内ではコンパイルやバンドルをしたいファイルをimport宣言で読み込みます。今回の例で言えばstyle.scssファイルです。

▼ src/index.js

import "./style.scss";

importの宣言は複数可能なので、CSS・SassファイルやTypeScriptファイルなど、バンドルしたいファイルを含められます。

メインのエントリーポイントをHTMLで読み込む

HTMLファイルを作成し、エントリーポイントを読み込みます。フォルダー構成は次のとおりです。

./
├── package.json
├── node_modules
└── src
    ├── index.html
    ├── index.js
    └── style.scss

HTMLファイルでは、作成したいウェブページのHTMLコードに加えてエントリーポイントの読み込みを追加します。次のコードの★部分です。

▼ src/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <!-- ★エントリーポイントの読み込み -->
  <script src="index.js" type="module"></script>
</head>
<body>
<div class="container">
  <div class="box">.box要素です</div>
</div>
</body>
</html>

ローカルサーバーを起動する

ローカルサーバーの起動とSassファイルのコンパイル・バンドルを行うには次のコマンドを使います。--openは省略可能ですが、付与しておくとブラウザーが自動で開きます。

▼ コマンド

npx parcel HTMLファイル名 --open

今回の例で言えば次のコマンドです。

▼ コマンド

npx parcel src/index.html --open

実行している様子は次のとおりです。編集したSassファイルが自動的にコンパイルされ、ウェブページに反映されているのがわかります。ソースマップにも対応しているので、デバッグも容易です。

Sassの単体コンパイルで説明した不足モジュールの自動インストール、出力フォルダー変更なども有効です。なお、ファイルの監視を終了する場合は、コマンドラインでCtrl+Cキーを同時に押します。

AutoprefixerでCSSの古い記法に対応したい

開発の現場では、Sassと共にAutoprefixer（CSSのベンダープレフィックスや旧記法を自動付与するツール）を導入したいケースも多いでしょう。

次のCSSで考えてみます。

▼ CSS

main {
  display: flex;
  user-select: none;
}

npx parcel src/index.htmlを実行すると、出力されたCSSファイルにベンダープレフィックスが付与されていることがわかります。このことにより、幅広いブラウザでCSSの互換性を保つことができます。

▼ 変換後のCSS

main {
  -webkit-user-select: none;
  user-select: none;
  display: flex;
}

納品用にビルドファイルを生成する

納品用ファイルを作成するようなケースでは、以下のコマンドでビルドファイルを生成できます。minify（ファイル圧縮）された納品用ファイルがdistフォルダーに出力されます。

▼ コマンド

npx parcel build ビルドしたいファイル名

たとえば、前述のエントリーポイントを用いたファイルをビルドするには次のとおりです。

▼ コマンド

npx parcel build src/index.html

いくつかオプションがあるのであわせて覚えておくと便利です。

--dist-dir 出力フォルダー名：出力フォルダーを設定できます。デフォルトはdistです。
--no-source-maps：ソースマップを無効化できます。
--public-url URL名：CSSやJavaScriptのファイルに対するパスを設定可能です。デフォルトでは<script src="/index.e5f6g7.js"></script>のように/から始まるルートパスとなります。--public-url ./のように設定すれば相対パスで指定できます。

公式のドキュメントもあわせて参照ください。

CLI - Parcel

GitHubにアップしているサンプルでは、次の設定を行っています。

ソースマップを無効化
CSSやJavaScriptのパスを相対パスに

今回のサンプルでは、npm-scripts（参考記事npm-scriptsのタスク実行方法まとめ）を使ってnpm rum buildでビルドタスクが実行できるように設定しました。設定の参考にしていただければと思います。

ビルドタスクの例

webpackとの使い分け

解説してきたように、Parcelには独自の設定ファイルがなく、コンパイル設定は使用している各ツールの設定ファイルに任せています。これによりParcelというバンドルツールへの依存度が小さくなり、将来的にParcelから別のバンドルツールへ移行するのもラクになると期待できます。移り変わりの早いウェブ開発のツールにとっては大きなメリットと言えるでしょう。

ただ、独自設定ファイルがないということは、バンドル過程がブラックボックス化してしまい凝ったカスタマイズが難しいとも言えます。案件の性質によっては細かいところまでカスタマイズできるwebpackのほうが向いているケースも多いので、見極めが必要でしょう。