Vue.jsでSPAサイトを作成するチュートリアル【5. JS編】 #Vue.js

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

前提

タスクはnpm scriptsで一限管理
コマンドはyarnを使用
vue-cliのwebpack-simpleを使用

バージョン

"vue": "^2.5.11"
"webpack": "^3.6.0"
"eslint": "^4.17.0"

ESLint

ESLintを設定していきましょう。
今回はeslint-config-standardを採用します。

必要なパッケージを追加します。

$ yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

設定ファイルを追加します。

.eslintrc

{
  "extends": [
    "standard",
    "plugin:vue/essential"
  ],
  "rules": {
  }
}

無視したいファイル群は/vendorにまとめて.eslintignoreファイルを作成して指定すると無視できます。

.eslintignore

/src/js/vendor/**/*.js

参考：Configuring ESLint

VSCodeを使用している人は、以下を参考にVeturとESLintをインストールして設定すると良いみたいです。

参考：Visual Studio Code で使う | eslint-plugin-vue を作っている話

VSCode以外の人は、各自で使用しているテキストエディタでの設定を調べてみてください。

ESLintはCLIで監視してエラーを表示させることもできますが、集中したい部分に集中できなくなる場合もあるので、個人的にはテキストエディタでの表示が好みです。
しかし、機械的に変換できるエラーは自動的に修正することもできるので、その機械変換させるコマンドはnpm scriptsに記述しておいて使いたい時に実行するようにしましょう。

package.json

{
  // 省略
  "scripts": {
    "eslint": "eslint src --fix",
  // 省略
}

これで以下をCLIで実行すれば不要なカンマやセミコロン等を機械的に削除してくれます。
ひとまず、今まで書いたものでエラーが出ているものを一通り確認し、機械的に変換してくれそうなところが以下で変換できれば成功です。

$ yarn eslint

まだテキストエディタで赤くなってエラーになっているところがないか確認し、どんどん潰していきましょう。

以下のようなエラーがどうしても消えない場合があると思います。

'app' is assigned a value but never used src/main.js

上記は無視しても動作上問題なさそうですが、気になる人は以下の参考にしてみてください。

参考：【Vue.jsエラー】hogehoge is assigned a value but never used

まとめ

Vue.js自体がJSなので「JS編ってなんだか気持ち悪いなぁ」とは思いながらJSファイルに関する内容をまとめるところに落ち着きました。
快適な開発環境を構築してストレスがかからず品質を担保できるようにしましょう。
（本当はテスト系ツールも書きたかったんですが、まだ導入していないので導入方法がわかれば掲載しようと思っています。

Vue.jsでSPAサイトを作成するチュートリアル【5. JS編】

目次

前提

バージョン

ESLint

まとめ