ウェブ開発では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コマンドを扱う際の便利なショートカットです。詳しくは記事「webpackやGulp.jsを使う時に覚えて幸せになったnpmの便利な使い方」を参照ください。
Sassのコンパイル
style.scss
というSassファイルのコンパイルを通して、Parcelの使い方を学びましょう。style.scss
の内容は次のとおりで、Sass特有の変数やネストを使っています。
▼ style.scss
$redColor: #ea5b54;
.container {
.box {
background-color: $redColor;
}
}
Sassファイルをコンパイルするには次のコマンドを使います。npx
について不明であれば記事「『npx』でローカルパッケージを手軽に実行しよう」を参照ください。
▼ コマンド
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は最初からこの機能が備わっています。
なお、ファイルの監視を終了する場合は、コマンドラインで[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変換機能が数多く備わっています(参考記事「Autoprefixerが進化してCSS GridのIE11対応が楽になった」)。Parcelでは自動で最新版のAutoprefixerがインストールされるので、手軽にIE11向けのCSS Grid変換が行えます。
CSS Gridの検証サンプル
CSS GridとSassのネストを使ったコードで動作を確認しましょう。CSS Gridの書き方についてはスライド資料「2019年までに見直しておきたい CSS・JavaScriptの手法」で詳しく解説していますので、あわせて参照ください。
▼ 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}
}
}
作成が面倒であれば、以下のファイルをダウンロードしてご利用ください。
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 ./
のように設定すれば相対パスで指定できます。
公式のドキュメントもあわせて参照ください。
GitHubにアップしているサンプルでは、次の設定を行っています。
../docs
フォルダーに出力- ソースマップを無効化
- CSSやJavaScriptのパスを相対パスに
今回のサンプルでは、npm-scripts(参考記事npm-scriptsのタスク実行方法まとめ)を使ってnpm rum build
でビルドタスクが実行できるように設定しました。設定の参考にしていただければと思います。
webpackとの使い分け
解説してきたように、Parcelには独自の設定ファイルがなく、コンパイル設定は使用している各ツールの設定ファイルに任せています。これによりParcelというバンドルツールへの依存度が小さくなり、将来的にParcelから別のバンドルツールへ移行するのもラクになると期待できます。移り変わりの早いウェブ開発のツールにとっては大きなメリットと言えるでしょう。
ただ、独自設定ファイルがないということは、バンドル過程がブラックボックス化してしまい凝ったカスタマイズが難しいとも言えます。案件の性質によっては細かいところまでカスタマイズできるwebpackのほうが向いているケースも多いので、見極めが必要でしょう。
2020年2月現在、Parcel v2の開発が進められており、設定ファイルが適用可能になっています。気になる方はこちらもチェックしてみるとよいでしょう。
なお、webpackにも設定ファイル(webpack.config.js
)を書かなくてもビルドする機能があります。Parcelとはまた違った使い勝手ですので、気になる方は記事「設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる」を参照ください。
モダンなコンパイル環境を手軽に作れるParcelを使おう
Parcelは独自設定ファイルがないため、学習コストが低いです。ただ単にSassコンパイルやローカルサーバーのための環境を作りたければ、わざわざwebpackやGulp.jsを使わずとも事足りる事が多いでしょう。
高度化・複雑化するウェブ開発の中で、こういった独自設定不要(ゼロコンフィグ)のツールが台頭してきたのは開発者にとっては嬉しいことです。面倒な作業はできるだけツールや機械に任せ、我々開発者はコンテンツの作り込みに時間をかけましょう。
※この記事が公開されたのは2年1ヶ月前ですが、 2020年2月に内容をメンテナンスしています。