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

はじめに

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

今更？

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

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

手を動かす
教わらないと見逃しそうな話
やさしさ

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

想定読者

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

ゴール

第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回: データとイベントの制御
(既に Vue.js プロジェクトある人はここからでも)
第3回: コンポーネントによる構成
第4回: 周辺ツールや情報紹介

ハンズオン

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

1. 事前準備

(必須)Node.js のインストール
- Mac は Homebrew 経由で brew install node で OK
(推奨)Yarn
- Node.js についてくる npm で代用できるのでなくてもOK
- Mac は Homebrew 経由で brew install yarn で OK
(推奨)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

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

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

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

確認

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

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

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

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

3. Linter の設定

vscode 設定

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

拡張機能

画面左のを押して拡張機能をインストールします。
以下2つを検索してインストールしましょう

Vetur
ESLint

settings.json の編集

settings.json を開く

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

settings.json を編集

{
    // 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
ESLint
- セミコロンを外してみる
- シングルクオートで文字列を囲んでみる
  => 保存 => 自動整形されれば OK

Lint and fix on commit の確認

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

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

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

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

eslint.autoFixOnSave を true に戻す

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

.eslintrc.js 修正

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

.eslintrc.js 修正

vue の規約を厳しくしてみる
essential => recommended

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

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

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

補足

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

おわりに

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

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

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

次回やさしめ Vue.js チュートリアル(2) ~ データとイベントの制御

Lovely Vue

参考リンク

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 ツールです