Sassの変換にオススメ！ Parcel入門

Sassの変換にオススメ！
Parcel入門

2020年2月14日メンテナンス済み / 株式会社ICS

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

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

▼ webpack.config.jsの例

module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  }
};

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

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

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

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

環境準備

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

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

cd /Users/★★★/myproject

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

cd C:¥Users¥★★★¥myproject

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

npm init -y

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

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

▼ コマンド

npm i -D parcel

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

※1 フォルダーの移動方法やNode.jsのインストールが不明であれば、記事「絶対つまずかないGulp入門」の「1. Node.jsをインストール」を参照ください。

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

Sassのコンパイル

style.scssというSassファイルのコンパイルを通して、Parcelの使い方を学びましょう。style.scssの内容は次のとおりで、Sass特有の変数やネストを使っています。

▼ style.scss

$redColor: #ea5b54;

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

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

▼ コマンド

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

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

▼ コマンド

npx parcel style.scss

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

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

.container .box {
  color: #ea5b54;
}

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

Sassファイルを更新すると、Parcelは自動で再コンパイルを行い、distフォルダーに出力します。ParcelのHMR（Hot Module Replacement）機能によるものです。Gulp.jsで同様のことを実現するには自前の設定が必要でしたが、Parcelは最初からこの機能が備わっています。

参考記事「🔥 Hot Module Replacement - Parcel」

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

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

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

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

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

{
  "devDependencies": {
    "parcel": "1.12.4",
    "sass": "^1.25.0"
  }
}

参考記事「依存関係の自動インストール - Parcel」

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

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

▼ コマンド

npx parcel style.scss -d public

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

ローカルサーバーの起動

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

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

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

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

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

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

▼ index.js

import "./style.scss";

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

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

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

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

▼ index.html

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

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

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

▼ コマンド

npx parcel HTMLファイル名 --open

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

▼ コマンド

npx parcel index.html --open

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

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

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

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

次のCSSで考えてみます。

▼ CSS

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

AutoprefixerはPostCSSの一部ですので、PostCSS用の設定ファイル.postcssrcファイルを作成し、次のように記述します。

▼ .postcssrcファイル

{
  "parser": "postcss-scss",
  "plugins": {
    "autoprefixer": {}
  }
}

npx parcel index.htmlを実行すると、出力されたCSSファイルにベンダープレフィックスが付与されていることがわかります（もし出力されない場合は、Sassを再編集すると実行されます）。

▼ 変換後のCSS

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

sassモジュールと同様に、autoprefixerモジュールも自動でインストールされるます。

▼ package.json。autoprefixerモジュールがdevDependenciesに追加されている

{
  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "parcel": "1.12.4",
    "sass": "^1.25.0"
  }
}

ブラウザーのサポート対象バージョンを設定したい場合は、.browserslistrcファイルを作成して対象バージョンを明記します。作成しない場合はIE11を含む各ブラウザーの最新2バージョンとなります。詳しくは記事「Autoprefixerの対象ブラウザの選び方 | Rriver」を参照ください。

最新のAutoprefixerを使ってIE11向けのCSS Grid変換を行いたい

Autoprefixerでは、IE11向けのCSS Grid変換機能が数多く備わっています。Parcelでは自動で最新版のAutoprefixerがインストールされるので、手軽にIE11向けのCSS Grid変換が行えます。

CSS Gridの検証サンプル

CSS GridとSassのネストを使ったコードで動作を確認しましょう。CSS Gridの書き方についてはスライド資料「CSS Grid入門」で詳しく解説していますので、あわせて参照ください。

▼ HTML（抜粋）

<div class="container">
  <header>ヘッダー</header>
  <aside>サイドバー</aside>
  <main>メインコンテンツ</main>
  <footer>フッター</footer>
</div>

▼ Sass（CSS Gridの設定部分のみ抜粋）

.container {
  display: grid;
  gap: 10px;
  grid-template:
    "header header" 50px
    "aside  main" 1fr
    "aside  footer" 50px /
    200px 1fr;

  header {
    grid-area: header;
  }

  aside {
    grid-area: aside;
  }

  main {
    grid-area: main;
  }

  footer {
    grid-area: footer;
  }
}

モダンブラウザーでは次のようにCSS Gridによるレイアウトが正しく反映されます。

▼ Google Chromeでの確認結果

IE11ではレイアウトが崩れます。IE11はCSS Gridの古い記法にしか対応していないことが原因です。

▼ IE11での確認結果

IE11向けでもCSS Gridのレイアウトが崩れないよう、AutoprefixerのCSS Grid変換設定を行いましょう。

AutoprefixerのCSS Grid変換設定

.postcssrcファイルの"autoprefixer"部分に"grid": trueを指定します。CSS Gridの変換を有効にする設定です。

▼ .postcssrcファイル

{
  "parser": "postcss-scss",
  "plugins": {
    "autoprefixer": {"grid": true}
  }
}

作成が面倒であれば、以下のファイルをダウンロードしてご利用ください。

AutoprefixerのCSS Grid変換対応済みの.postcssrcファイル

Auroprefixerを用いつつ、Sassをコンパイルする

記事内で紹介したSassの単体コンパイル、またはエントリーポイントを使ったコンパイルを実行します。さきほどインストールした最新版のAutoprefixerよって、IE11でも動作するCSS Gridのコードが出力されます。エントリーポイントを使ったコンパイルで試してみましょう。

▼ コマンド

npx parcel style.scss

コンパイル後のコードは次のとおりです。Sassのコンパイルとともに、SS GridのIE11向け変換（旧仕様向けの変換・エリア名変換・gapプロパティ変換など）が行われています。

▼ 変換後のCSS

.container {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  -ms-grid-rows: 50px 10px 1fr 10px 50px;
  -ms-grid-columns: 200px 10px 1fr;
  grid-template: "header header" 50px "aside  main" 1fr "aside  footer" 50px/200px 1fr;
}
.container header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: header;
}
.container aside {
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: aside;
}
.container main {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: main;
}
.container footer {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: footer;
}

このコードにより、IE11でもCSS Gridによるレイアウトが意図通りに反映されます。

▼ Autoprefixerによる変換後のIE11での確認結果

サンプルを別ウインドウで開く

サンプルコードはGitHubにアップロードしています。あわせてご確認ください。

サンプルファイル

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

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

▼ コマンド

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

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

▼ コマンド

npx parcel build index.html

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

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

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

CLI - Parcel

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

../docsフォルダーに出力
ソースマップを無効化
CSSやJavaScriptのパスを相対パスに

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

ビルドタスクの例

webpackとの使い分け

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

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

2020年2月現在、Parcel v2の開発が進められており、設定ファイルが適用可能になっています。気になる方はこちらもチェックしてみるとよいでしょう。

parcel-bundler/parcel: 📦🚀 Blazing fast, zero configuration web application bundler

なお、webpackにも設定ファイル（webpack.config.js）を書かなくてもビルドする機能があります。Parcelとはまた違った使い勝手ですので、気になる方は記事「設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる」を参照ください。

モダンなコンパイル環境を手軽に作れるParcelを使おう

Parcelは独自設定ファイルがないため、学習コストが低いです。ただ単にSassコンパイルやローカルサーバーのための環境を作りたければ、わざわざwebpackやGulp.jsを使わずとも事足りる事が多いでしょう。

高度化・複雑化するウェブ開発の中で、こういった独自設定不要（ゼロコンフィグ）のツールが台頭してきたのは開発者にとっては嬉しいことです。面倒な作業はできるだけツールや機械に任せ、我々開発者はコンテンツの作り込みに時間をかけましょう。

※この記事が公開されたのは2年10ヶ月前ですが、 2020年2月に内容をメンテナンスしています。