Zero Configuration Bundlerこと、Parcelを使ってみる

## 概要

去年から名前は聞くことの多かったParcelについてちょっと試してみる。ParcelはWebpackに心折れた人の救世主になるのだろうか...。

## 参考

[parcel + vue.jsでHelloWorldしてみた](https://qiita.com/shotanue/items/574205fe6a58b2793d1b)
[parcelでreact + typescript環境を爆速で構築する](https://medium.com/hiro08gh/parcel%E3%81%A7react-typescript%E7%92%B0%E5%A2%83%E3%82%92%E7%88%86%E9%80%9F%E3%81%A7%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B-24d9ad228405)

## 環境

* Node.js v12.4.0
* npm v6.9.0

## やること

* React with Parcelの環境構築
* Vue.js with Parcelの環境構築

## なぜParcel？

create-react-app, vue-cli, それぞれ便利ですよね。しかも強力なゼロコンフィギュレーションツールです。とても簡単に快適な環境が作られ必要最低限のサンプルも生成されます。ただし、ツールを使い作成したプロジェクトに含まれる各種設定ファイルがフロントエンド開発のハードルの高さになっていることもまた事実だと思います。本来の開発とは異なるところで学習コストを増やし開発に時間を費やせないことになってしまうのであれば、それは便利であっても決して最善とは言えない可能性があります。特に学習コストを最小限に抑えてスタートしたい場合にはこの問題はより顕著に現れます。
という前置きはここまでにして、なぜParcelを使うのか？の話に移りましょう。と言ってもその理由は上に書いた通りですけれどね:-)

npm trends的には[こんな感じ](https://www.npmtrends.com/create-react-app-vs-parcel)だそうです。

## ParcelでReactアプリを作ってみる

プロジェクト用に適当なディレクトリを作成します（適当にparcel-reactとかにしておきましょうか）。そのディレクトリで以下のコマンドを実行します。

```bash
npm init -y
npm i -D parcel-bundler
npm i react react-dom
```

npm scriptsに以下を追加します。

```json
"start": "parcel ./src/index.html"
```

ルートディレクトリに`src`ディレクトリを作成し、`index.html`を作成します。内容は以下の通りです。

```html
<html>
  <body>
    <div id="sample"></div>
    <script src="./index.js"></script>
  </body>
</html>
```

`index.html`と同階層に`index.js`を作成します。内容は以下の通りです。

```js
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return <h1>Hello Parcel + React !!</h1>;
};
ReactDOM.render(<App />, document.getElementById("sample"));
```

各ファイルが用意できたらParcelで実行してみましょう。

```bash
npm run start
```

Terminalに表示されますが、実行後は「 http://localhost:1234 」で確認ができます。Hello Parcel + React !!と表示されていれば成功です、やりましたね:-)

Parcel実行中に表示するテキストを変更したりHTMLを変更して保存してみましょう。ブラウザの方が自動的にリロードされて修正が適用されているのが確認できると思います。

### TypeScriptに対応させてみる

ついでと言っては何ですがTypeScriptに対応させていきます。
まずは必要なパッケージをインストールし、TypeScriptのコンパイラオプションファイルを作成します。

```bash
npm i -D typescript @types/react @types/react-dom
npx tsc --init
```

`tsconfig.json`が自動ででき上がるので一部修正します。

```json
"lib": [
  "dom",
  "es2015"
]
"jsx": "react"
"rootDir": "./src"
"experimentalDecorators": true
```

`tsconfig.json`を修正したら、`index.html`と`index.js`を修正します。`index.js`は｀`index.tsx`にリネームします。

```html
<html>
  <body>
    <div id="sample"></div>
    <script src="./index.tsx"></script>
  </body>
</html>
```

```ts
import React from "react";
import ReactDOM from "react-dom";
const App: React.SFC = () => {
  const msg: string = `Hello React with Parcel!!`;
  return <h1>{msg}</h1>;
};
ReactDOM.render(<App />, document.getElementById("sample"));
```

後は先程と同じようにParcelを実行するだけです！

TypeScriptを使ってReactアプリを作成するのに作成したconfigファイルはtsconfig.jsonの1つだけです。まさにZero Configuration Bundlerですね:-)

### React Tutorial

環境ができたら[React Tutorial](https://ja.reactjs.org/tutorial/tutorial.html)をやってみましょう:-)
サンプルコードを含めてチームや個人用のboilerplateを作っておくのも良いかもしれませんね！

## ParcelでVueアプリを作ってみる

プロジェクト用に適当なディレクトリを作成します（適当にparcel-vueとかにしておきましょうか）。そのディレクトリで以下のコマンドを実行します。

```bash
npm init -y
npm i -D parcel-bundler
npm i vue
```

npm scriptsに以下を追加します。

```json
"start": "parcel ./src/index.html"
```

ルートディレクトリに`src`ディレクトリを作成し、`index.html`を作成します。内容は以下の通りです。

```html
<html>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>
```

`index.html`と同階層に`index.js`を作成します。内容は以下の通りです。

```js
import Vue from "vue";
import App from "./App.vue";
new Vue({
  el: "#app",
  render: h => h(App)
});
```

続いて同じ階層に`App.vue`を作成します。内容は以下の通りです。

```js
<template>
  <p>Hello {{ name }} !</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      name: "Yoshida"
    };
  }
};
</script>

<style scoped>
p {
  color: #555;
}
</style>
```

各ファイルが用意できたらParcelで実行してみましょう。

```bash
npm run start
```

おそらくいくつか必要なパッケージのインストールが実行されますが、設定ファイルは増えたりしないので安心してくださいね:-)  
Terminalに表示されますが、実行後は「 http://localhost:1234 」で確認ができます。Hello Parcel + React !!と表示されていれば成功です、やりましたね:-)

Parcel実行中に表示するテキストを変更したりHTMLを変更して保存してみましょう。ブラウザの方が自動的にリロードされて修正が適用されているのが確認できると思います。

TypeScriptの適用はまた今度...かな。

### Vue.js Tutorial

環境ができたら[Vue Tutorial](https://jp.vuejs.org/v2/guide/index.html)をやってみましょう:-)
サンプルコードを含めてチームや個人用のboilerplateを作っておくのも良いかもしれませんね！

## 最後に

何番煎じだろう...。