sagara.inkITエンジニアのまとめノート

手っ取り早くフロントエンド開発するならParcel

思いついたアイデアをブラウザ上にJavaScriptを使って表現したい。 でも本格的に開発するならGulpだWebpackだと用意するのが面倒。そんな時にParcelが役立ちます。

Parcelでサクッとフロントエンド開発環境を手に入れる

Parcelは、HTML、CSS(Sass)、JSXなどメジャーなオンブラウザ技術での開発を 簡単に始められるパッケージです。Webサーバも含まれており、自動的に変更を検知しリロードしてくれる優れものです。

Parcel

npmまたはyarnが使えるローカル環境であれば、すぐに始められます。

console
#npmの場合
npm init
npm install --save-dev parcel
npx parcel src/*.html

#yarnの場合
yarn init
yarn add --dev parcel
yarn parcel src/*.html

Webサーバが起動するので、localhost:1234にアクセスすると指定したHTML(ここではsrc/index.html)が表示されます。

設定不要で効率的な開発をスタート

ホットリロードが有効で、エディタで編集するとそれを検知して自動的にブラウザをリロードしてくれます。

src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parcel Test</title>
  <link rel="stylesheet" href="./styles/style.scss">
</head>
<body>
  <h1>test</h1>
  <script src="./scripts/main.ts"></script>
</body>
</html>

注目すべきは、linkタグとscriptタグ。それぞれscss(Sass)、ts(TypeScript)を読み込んでいます。 通常ブラウザはこれらのファイルを解釈できませんが、Parcelがビルドする際にそれをCSSやJavaScriptに変換して distディレクトリに出力してくれるので、ブラウザ上では正しく表示されます。

dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parcel Test</title>
  <link rel="stylesheet" href="/index.38ec9247.css">
</head>
<body>
  <h1>test</h1>
  <script src="/index.6195b75c.js"></script>
</body>
</html>

コンフィグ設定が不要でSassやTypeScriptが最初から書けるので、 何かアイデアを思いついた時にParcelで立ち上げてさっと効率良く書き始めることができます。