parcel + vue.jsでHelloWorldしてみた

#はじめに
モダンモダンしたフロントエンド開発としてvue.jsに入門したいが、モジュールバンドラやらトランスパイラやらで「うーん」となる方は多いのではないでしょうか。

自分はそのクチです。。。

しかしながら、parcelというその辺をよしなに自動でやってくれるツールがありますので、
今回エコシステムは楽をして、vue.jsに入門しようと思います。

parcel+vue.jsでHelloWorldするところまで出来ましたので、簡単にまとめます。

#バージョンなど
- yarn=>1.6.0
- parcel=>1.9.7
- vue.js=>2.5.17


#前提
npmではなく、基本的にyarnで進めていきます。
(yarnのインストールなどは省きます)

#手順

プロジェクトのディレクトリを作成します

```shell
mkdir hello_world
cd hello_world
```

yarn initでpackage.jsonを作成します。

```shell:色々聞かれますが、ここは基本的にEnter連打でいいと思います。
$ yarn init
yarn init v1.6.0
question name (hello_world): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 2.19s.
```

yarnでパッケージを落としつつ、package.jsonに記録していきます。

```shell:-Dをつけることで開発用としてパッケージに追加します。
yarn add parcel@1.9.7 -D
```

```shell:vueをパッケージに追加します。
yarn add vue@2.5.17
```
　　　
この時点でだいたいこんな感じのファイル構造になるのではないでしょうか。

```shell
hello_world
├── node_modules　
├── package.json
└── yarn.lock
````
　　
package.jsonはこの時点でこんな感じになります。

```json:package.json
{
  "name": "hello_world",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "1.9.7"
  },
  "dependencies": {
    "vue": "2.5.17"
  }
}
```

ここからコードを書いていきます。
ソースコードはsrcというディレクトリに格納していきます。

```diff:srcというディレクトリと、HelloWorld用のファイルを追加
hello_world
 ├── node_modules
 ├── package.json
+├── src
+│   ├── App.vue
+│   ├── index.html
+│   └── index.js
 └── yarn.lock
```

index.htmlはシンプルにdivをひとつだけ置き、最後にjsを読み込みます。

```html:src/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app"></div>

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

index.jsではvue本体と、この後作成するApp.vueを読み込んで、
先ほどのindex.htmlのdiv#appにマウントしています。

```javascript:src/index.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render:h => h(App)
});
```


実は上のコードはこのままだと、`import Vue from 'vue';`で、`'vue'なんか無いよ`と怒られてしまいます。
自分はここで地味にはまってしまったのですが、これはpackage.jsonを修正するとうまく動きます。
(ちなみにこの記事中で設定ファイルに触るのはここだけです。)

下記の通りに`alias`という項目を増やすと、importの際に自動で指定したパッケージを読みに行ってくれます。

```diff:package.json
{
  "name": "hello_world",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel": "1.9.7"
  },
  "dependencies": {
    "vue": "2.5.17"
+ },
+ "alias": {
+   "vue": "./node_modules/vue/dist/vue.common.js"
  }
}
```

App.vueは、ここでは特に詳しく解説しませんが、単一ファイルコンポーネントというやつです。

```vue:src/App.vue
<template>
    <p>{{ greeting }} World!</p>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                greeting: 'Hello'
            }
        }
    }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>
```

後は、package.jsonがあるディレクトリに戻り、parcelで実行するだけです。
`yarn parcel`でparcelのコマンドを実行できます。

```shell
yarn parcel src/index.html
```

[http://localhost:1234](http://localhost:1234)にアクセスすると無事Hello Worldが見えるはずです。

もし試していて、見れなかったらごめんなさい。



#最後に
去年(2017)の年末はparcelが出現して、結構話題になっていた（物議を醸し出していた？）と思うのですが、最近はあまりqiitaで記事を見かけないなーという印象です。

最近のバージョンではvue.jsの標準サポートが入ったり[^1]、開発もちゃんと進んでいるようなので、
`ひとまずparcelの上で簡単なSPAなりを作ってみて、後からwebpackやbabelなどで凝った開発に手を出す`という学習パスも選択肢のひとつとしてどうだろうなー、と思う次第です。

[^1]: parcelが出た当初、vueを使うには[プラグイン](https://github.com/BoltDoggy/parcel-plugin-vue)を使わなければいけませんでした。現在ではこのプラグインは非推奨になっています