やさしめ Vue.js チュートリアル(1) ~ Vue CLI でプロジェクト作成と Linter の設定

## はじめに

社内で Vue.js 勉強会(ハンズオン)をやるため作成した資料を
せっかくだからと公開したのがこの投稿となります。

## 今更？

Vue.js のチュートリアルは世の中に溢れかえっていますが
個人的にちょうどいいやつが見つからなかったので書きました。

本稿は自分が見たいくつかのチュートリアルに対して

- 手を動かす :hand_splayed: 
- 教わらないと見逃しそうな話 :ear: 
- やさしさ :heart: 

を重視したつもりです。
逆に、**できる人** が **短時間** で **知識** を得るには
向かないと思うのでご了承くださいませ。
(とは言え、易しさは相対的なので難しいですね)

## 想定読者

- 生の HTML/CSS/JavaScript (+ jQuery) はなんとなく書いたことある
- もう少し複雑な Web アプリはどうやって作ればいいのかわからない
- 難しい説明をされても頭に入らないので、手を動かしながら学びたい

## ゴール :checkered_flag: 

第1回~第4回までで億万番煎じの TODO アプリを作り、
第5回は周辺知識について学習します。
(今回は1記事目)

**TODO アプリ**

- GitHub Pages: https://taiju59.github.io/lovely-vue/
- ソースコード(Github): https://github.com/taiju59/lovely-vue

**目次**

- 第1回: Vue CLI でプロジェクト作成と Linter の設定(今回)
- 第2回: [データとイベントの制御](https://qiita.com/taiju59/items/a45908ea1cb6c5199130)  
  (既に Vue.js プロジェクトある人はここからでも)
- 第3回: [コンポーネントによる構成](https://qiita.com/taiju59/items/b54335674dca062fee3e)
- 第4回: [周辺ツールや情報紹介](https://qiita.com/taiju59/items/c13865c9998502cb95dc)

## ハンズオン

さて、前置きが長くなってしまいましたがここからが本題です。

### 1. 事前準備

- (必須)Node.js のインストール
  - Mac は [Homebrew](https://brew.sh/index_ja) 経由で `brew install node` で OK
- (推奨)[Yarn](https://www.yarnpkg.com/ja/docs/install)
  - Node.js についてくる npm で代用できるのでなくてもOK
  - Mac は [Homebrew](https://brew.sh/index_ja) 経由で `brew install yarn` で OK
- (推奨)[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
  - 好きなエディタで OK (あとで vscode で自動整形する方法を紹介します)

※筆者の環境は以下

```
$ sw_vers 
ProductName:	Mac OS X
ProductVersion:	10.14.4
BuildVersion:	18E226
$ node -v
v11.13.0
$ yarn -v
1.15.2
```

#### 注記

- npm 使う人向けの読み替え
  - `yarn add xxxx` => `npm install xxxx`
  - `yarn global add xxxx` => `npm install -g xxxx`
  - `yarn serve` => `npm run serve`
  - `yarn build` => `npm run build`

### 2. Vue.js のプロジェクト作成

#### @vue/cli インストール

- `yarn global add @vue/cli`

##### 確認

```
$ vue -V
3.5.5
```

バージョンは多少違っても OK :ok_hand: 

#### 2. プロジェクト作成

- プロジェクトを作りたいディレクトリに移動

- `vue create lovely-vue`
  - lovely-vue の部分は任意のプロジェクト名を設定

- どの機能を入れるか聞かれるので、それぞれ以下のように選択
    - スペースキーで選択、エンターキーで次へ
    - npm or yarn を聞かれたら使っている方を選択しましょう

```
Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
```

議論のありそうな箇所について触れておきます :point_up: 

- Pick additional lint features
  - 「Lint and fix on commit」を有効化するとコミット時自動整形が入り、  
    その分コミットが遅くなります
  - CI で検証する場合は不要と思います
  - 今回は初心者や JavaScript を書き慣れていない人がチームに参加することを想定し、  
    熟練者にバチボコに殴られる前に有効化するのが得策と考えました
- Pick a linter / formatter config
  - どれがいいのかあんまりわかってません。意見をお持ちの方はコメントくださいますと幸いです

#### 確認

- `cd lovely-vue`
- `yarn serve`
- 表示されたリンク(たぶん localhost:8080)をブラウザで開く

:zap: 動作 :zap:
**以下のような画面が表示されれば OK!!** :raised_hands: :raised_hands: 

<img width="634" alt="スクリーンショット 2019-04-14 0.02.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93608/c38ab6d4-098e-3d98-c2f2-c252e014535d.png">

:book: ソースコード :book:
https://github.com/taiju59/lovely-vue/commit/11657ad008fb3c0156f6c9e4e60b0a2fb3aaa1dd

- さらに、 `Welcome to Your Vue.js App` の部分を編集して保存すると、その内容がリアルタイムに見た目にも反映されるはずです

### 3. Linter の設定

#### vscode 設定

(vscode 以外をお使いの方は読み飛ばしてください)

##### 拡張機能

画面左の <img width="39" alt="スクリーンショット 2019-04-14 0.18.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93608/c3c7a09a-25b4-e718-f002-8e5dc8e2c029.png"> を押して拡張機能をインストールします。
以下2つを検索してインストールしましょう

- Vetur
- ESLint

##### settings.json の編集

- settings.json を開く

※vscode 1.33.1 且つ Mac の場合、設定を開く(`⌘,`) → 画面右上 `{}` ボタン

- settings.json を編集

```js
{
    // ESLint で保存時自動整形
    "eslint.validate": [
        "javascript",
        {
            "autoFix": true,
            "language": "vue"
        }
    ],
    "eslint.autoFixOnSave": true,
    // vscode デフォルトの自動整形との競合を避ける
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[typescript]": {
        "editor.formatOnSave": false
    },
    "[vue]": {
        "editor.formatOnSave": false
    }
}
```

確認

- Vetur
    - src/App.vue を開いてみる  
      => 色が付いていればOK :ok_hand: 
- ESLint
    - セミコロンを外してみる
    - シングルクオートで文字列を囲んでみる  
=> 保存 => 自動整形されれば OK :ok_hand: 

#### Lint and fix on commit の確認

(Gitがわからない人は読み飛ばして OK です)

コミット時自動整形される機能の確認。

確認のため、一旦 `eslint.autoFixOnSave` を false にする

1. セミコロンを外して保存 => コミット => 自動整形される :wrench: 
2. `export default {` の `{` を削除して保存 => コミット => エラーが出てコミットされない :no_entry_sign: 

`eslint.autoFixOnSave` を true に戻す

※検知対象は変更があったファイルのみのため注意

#### .eslintrc.js 修正

特に template 部分も自動整形/警告されるように、以下の設定をします。

- `.eslintrc.js` 修正
  - vue の規約を厳しくしてみる
    - essential => recommended

    ```diff
    - extends: ["plugin:vue/essential", "@vue/prettier"],
    + extends: ["plugin:vue/recommended", "@vue/prettier"],
    ```

この状態で App.vue で保存してみると自動整形が走り、
`name: "app",` が `name: "App",` となります。

:book: ソースコード :book:
https://github.com/taiju59/lovely-vue/commit/c90829fb02c5b8b5f9354d831cbed8e0bbd4a4ed
※ついでに `HelloWorld.vue` も修正していますが必須ではありません

### 補足

- 開発中は常にブラウザのデベロッパーツールでコンソールを表示しておきましょう  
  - エラーが表示されている場合はソースコードの記述を見直しましょう
  - ただし、記述途中のに保存したことで出ているエラーもあるので、  
    疑わしい場合はページをリロードしてまだエラーが出るか確認しましょう

## おわりに

ちゃんと最後までたどり着けましたか？

疲れちゃった人もいるかもしれませんが、
次からようやく本番、 Vue の記法を学んでいくので
もう少しお付き合いいただけますと幸いです。

**やさしさ** を重視しているので、わかりづらいところなどあれば
ぜひコメントや編集リクエストをお願いします :smiley: 

次回 :point_right: [やさしめ Vue.js チュートリアル(2) ~ データとイベントの制御](https://qiita.com/taiju59/items/a45908ea1cb6c5199130)

Lovely Vue :heartbeat: 

## 参考リンク

- Vue.js 公式: https://jp.vuejs.org
  - 日本語だしめちゃわかりやすい。これからたくさん利用することになると思います
  - 本チュートリアルでも頻繁にリンクを貼りますが、
    本チュートリアルでは単一ファイルコンポーネントで実装しており、
    ドキュメント内の記述とところどころ異なるため、
    適宜読み替えてください
      - https://jp.vuejs.org/v2/guide/single-file-components.html
- Vue CLI: https://cli.vuejs.org
  - 今回用いる Vue.js プロジェクトを作成するための CLI ツールです