Parcelでお気軽にビルドしたい

Parcelでお気軽にビルドしたい

宣伝

 皆様,おはこんばんちは.またしても一年ぶり(であってます?)のエントリです.ブログの方は最早アドベントカレンダー専用と化していますが,中の人,みっきぃはまあまあ元気です.この記事は「拓殖大学ディジタルコンテンツ研究愛好会 Advent Calender 2018」の8日目の記事です.

adventar.orgよろしければ他の記事もご覧になってください.

Parcelでお気軽Web開発をしたい

 今回の記事では,Parcelというパッケージの導入から簡単な使い方をふんわりと紹介していきます.

 Parcelはバンドラーと呼ばれるものの一つです.バンドラーの主たるお仕事は,複数のファイルに分かれたソースコードを一つに結合することです.主にWebプヨグヤミングの世界で用いられています.(他にどこかで使われてるんですかね?)例えば,複数のJavaScriptファイルを一つのファイルにしてしおまう,といった作業を自動でやっつけてくれるのがバンドラーです.*1

 また,Parcelは便利なもので,コンパイルが必要なソースコードPugSassTypeScript等)を検知すると,自動でそれらをコンパイルしてからファイルの結合をやってくれます.つまり,ビルドツールとしての機能も備えているわけです.すごいですね!

 前置きが若干長くなりましたが,今回はParcelをインストールし,複数ファイルからなるWebコンテンツをビルドし,結果を表示して確認してみたいと思います.

動作確認環境

 記事を書くにあたって,動作確認を行った環境は以下の通りです.

  • OS: Linux Mint 18.3 (Cinnamon 64-bit)
  • Node.js: 10.14.1
  • npm: 6.4.1
  • ブラウザ: Firefox 61.0.1 64-bit

Parcelのインストール

 早速インストールの方からやっていきましょう! の,前に,Parcelはnpmを介してインストールされ,Node.js上で動作します.Node.jsとnpmをインストールしていない方は先にそちらをインストールしましょう.

nodejs.org Node.jsとnpmがインストールできた上で,ターミナル*2上で以下のコマンドを実行します.

$ npm i -g parcel-bundler

*3

 Parcelは結構大きなパッケージであるため,インストールにはそれなりに時間がかかります.お茶でも飲みながら気長に待ちましょう.インストールが完了したら,以下のコマンドで確認しましょう.

$ parcel --version

 無事にインストールが完了していれば,バージョンの値が表示されるかと思います.

コンテンツを作成してビルドする

 Parcelのインストールが無事に済んだら,次はコンテンツを作成していきます.今回はParcelの自動コンパイル機能を試してみるために,以下の構成で作成します.

(うーん,これはモダン!w)

 まずは,これらのコンテンツを作成するための作業フォルダを適当な場所に作成しましょう.今回は,例として「parcel-bundle-test」というフォルダ作成し,そこを作業フォルダとして用います.

 次いで,上で作成した作業フォルダをターミナル上で開き,そこでnpm initを行います.

$ npm init

 今回はこの時点で特に凝った設定をする必要もないので,Enterキー連打で初期値で埋めてしまっても問題ありません.

 次に,作業フォルダ内に,ソースファイルを保存するためのフォルダを作成します.

$ mkdir src

  今回はこのフォルダを「src」という名前で扱っていきます.

 ここまで準備ができたら,いよいよコンテンツの作成を始めます.srcフォルダ内に以下の4つのファイルを作成します.

・ index.pug

index.pug

・ master.scss

master.scss

・ main.ts

main.ts

・ greeter.ts 

greeter.ts

 ソースファイルの記述に当たってですが,私はVisual Studio Codeを用いて作成しています.上記のファイルの形式(.pug, .scss, .ts)はいずれもハイライティングと構文チェックが行われるため,快適に書くことができます.

 コーディングが完了したら,いよいよこれらのファイルを元にWebコンテンツをビルドしていきます! ターミナルから以下のコマンドを実行しましょう.

$ parcel src/index.pug

  これだけです! たったこれだけでParcelは「ソースコードコンパイル,バンドル,サーバの起動」というビルド作業の全てを実行してくれます.簡単過ぎて拍子抜けしてしまいそうですね.尚,上記のコマンドは初回実行時に,コンパイルなどに必要な他のパッケージを自動でインストールする関係で,実行時間は長くなります.以下の説明を流し読みでもしながら待ちましょう.

 Parcelの基本的な使い方としては,「parcel バンドル対象のファイル」となります.今回はファイルの関係は以下のようになっています.

ファイル関係図

 Parcelはまず,バンドル対象のファイルの形式を確認し,コンパイルが必要な場合はコンパイルが実行されます.続いて,バンドル対象のファイルが参照している他のファイルをたどり,参照先のファイルを新たなバンドル対象とします.これをバンドル対象が見つからなくなるまで実行します.

 ざっくり簡単に言ってしまえば,「最初にバンドル対象に渡されたファイルが関係してるものを全部勝手にバンドルしてくれる」わけです.素敵ですね.

 さて,無事にビルド作業が完了すれば,以下のようなメッセージが表示されるかと思います.

Parcelのサーバの起動メッセージ

 サーバが起動している旨と,ビルドに要した時間が表示されていますね.表示されているurlをブラウザで開いでみましょう.ソースコードに誤りがなく,無事にビルドが完了していれば以下のようにコンテンツが表示されるはずです.

生成されたコンテンツ

 今回TypeScriptで記述した内容は,ブラウザのコンソールに反映されているはずです.*4

ブラウザのコンソール

 ここで,サーバを立ち上げた状態のまま,ソースコードを少し編集してみましょう.index.pugに以下のような変更を加えます.

・ index.pug

index.pug

 変更を加え,上書き保存ができたら,先ほど開いたページを再読み込みしてみましょう.コンテンツに変更が反映されているはずです.

変更後のコンテンツ

 Parcelはサーバが起動している間,ビルド対象のファイルの状態を監視し,変更を検知すると自動で再ビルドしてくれます.尚,サーバを終了するには,ターミナル上で「Ctrl+C」で大丈夫です.

 ね? 簡単でしょう?

ビルドをもっと簡単にする 

 さて,ここまででParcelを用いてコンテンツのビルドができるようになりました.しかし,コンテンツをビルドするたびに,「parcel ~」のコマンドを打つのはそれなりに面倒です.そこで,この過程をもっと簡単にする方法を紹介します.

 npm initを実行した際に生成された,「package.json」というファイルを開きましょう.このファイルは,作業フォルダ内でnpmに関連したアレコレを扱うための情報が格納されます.さて,npmには,このpackage.jsonを介して,任意のコマンドを実行する機能があります.その機能を使って,ビルドを簡単にしてみましょう.

 作業としては,package.jsonに以下のような変更を加えます.

package.json

 8行目に新たな1行を追加しています.追加されている"script"というプロパティが,npmを介して実行するコマンド群を意味しており,そこに含まれるプロパティが,実際に実行するコマンドを含んでいます.今回は"start"というプロパティに,Parcelでのビルドコマンドを登録しました.

 package.jsonにコマンドの登録ができたら,これを実行してみましょう.ターミナルで,以下のコマンドを実行します.

$ npm run start

or

$ npm start

*5

 これで,Parcelによるビルドが開始されます.ファイル名を打ち込む手間がなくなっていい感じですね.

ソースコード

 今回記事の中で作成し,動作確認を行ったソースコードは以下にあります.

github.com

 ここまで読むだけ読んで,「ソースを書くのに手を動かしたくない」という方は上のリンク先のリポジトリをクローンして貰えればおkです.

終わりに

 今回はParcelの本当に触りの部分だけを紹介させてもらいました.と言いつつ,PugやScssを入れてきたのはナゼか? 本来であればHTML+CSS+JSでもっとシンプルに書くべきだったとも思います.しかし,Parcelを使うことであまりに簡単にコンテンツが作れたときの私の驚きを皆さんに共有したかった,という思いから,コンパイルが必要な構成で書かせてもらいました.まともに読んでいる人もいないようなブログですし,別にいいじょのいこ.

 また,Parcelは登場時期が比較的新しく,今でも新しい技術をどんどん取り入れて変化し続けています.今後どのように変わっていくのか,注目していきたいですね.

 

*1:今でこそJavaScriptCSSはそれ自体から外部のソースにアクセスする術(ES6 importやCSS3 @import等ですね)を持ちますが,その昔はそんな便利なものはありませんでした.昔ながらの方法としてhtmlにタグで書いても良いのですが,こうなると今度はソース間の依存関係の解決が大変です.当初バンドラーはこの問題を解決するべく誕生しました.

*2:Windowsであればcmd,ないしpowershellMacまたはLinuxであれば端末

*3:$ はプロンプトです

*4:ブラウザごとのコンソールの表示方法はこちらを参考にしてください.

*5:「npm start」は若干特殊なコマンドで,「npm run start」と同じ挙動を示します.詳細はこちらを参照してください