やさしめ Vue.js チュートリアル(4) ~ 周辺ツールや情報紹介

## はじめに

こちらは [やさしめ Vue.js チュートリアル(3) ~ コンポーネントによる構成](https://qiita.com/taiju59/items/b54335674dca062fee3e) の続きです。

続きものであり、今回も一応半分ハンズオンっぽく進めますが、
この記事単体でもまあ読めるかなと思います。

ドキュメントを読み進めていくだけでは見逃しがちな周辺ツールについて紹介します。

## Vue.js devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

これは公式にも書いてありますがあまりにも必須なので言及します。

### ハンズオン？

チュートリアルの第三回までやった方は、
Chrome 拡張機能に追加し、
ブラウザで devtools を開いてみてください。

コンポーネントの構成と各コンポーネントの `props` や `data` を見ることができるはずです。
めっちゃ便利ですね。

## UI フレームワーク

独自のデザインにこだわりがあって且つ CSS 力と時間がたっぷりある場合を除いて、
UI フレームワークを使わない手はないでしょう。

自分が使ったことがある UI フレームワークは Vuetify と Vuesax の2つです。
Vuetify の方が有名で機能も情報も多く安定もしているのですが、
他にいくらでも情報があるのと、デザインの好みと、
Vuetify はちょっと動かすのにやたら記述する傾向があるので
ここでは Vuesax を導入してみます。

### ハンズオン

手順は公式の通りです。
https://lusaxweb.github.io/vuesax/development/#use

#### 準備

必要なパッケージをインストールしましょう。[^1]

```
$ yarn add vuesax material-icons
```

`main.js` を以下のように修正します。[^2]

```diff:main.js
  import Vue from "vue";
  import App from "./App.vue";
+ import Vuesax from "vuesax";
+ import "vuesax/dist/vuesax.css";
+ import "material-icons/iconfont/material-icons.css";

  Vue.config.productionTip = false;
+ Vue.use(Vuesax);
```

これで Vuesax コンポーネントを利用する準備が整いました。

#### 使う

解説に力尽きたため、
動作物とソースコードを載せておきます。

:zap: 動作 :zap:
https://taiju59.github.io/lovely-vue/

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

## ログ出力

JavaScript のログ出力(`console.log`)はブラウザに出力されます。
ということは、そのページを見たユーザのブラウザにも出力されます。
だからと言って全ての `console.log` を削除してしまっては開発がしづらいです。

というわけで、本番ビルド時と開発時でログレベルを切り替え、
開発時にのみログを出すような実装をします。

### ハンズオン

#### 準備

ログレベルの切り替えは自前でしても大したことはないのですが、
自前でする意味もあまりないと思うのでライブラリを使います。

デファクトがあれば教えて欲しいんですが、自分はとりあえず
loglevel というライブラリを使っています。
https://github.com/pimterry/loglevel

```
$ yarn add loglevel
```

`main.js` を以下のように修正します。

```diff:main.js
  import "material-icons/iconfont/material-icons.css";
+ import * as log from "loglevel";

  Vue.config.productionTip = false;
  Vue.use(Vuesax);

+ const logLevel =
+   process.env.NODE_ENV === "development" ? log.levels.DEBUG : log.levels.SILENT
+ log.setLevel(logLevel, false);
```

- `process.env.NODE_ENV` はビルド時、Vue CLI が開発時(`serve`)には `development` で、
本番ビルド時(`build`)には `production` で置き換えます
- そのため、開発時には 本番ビルド時には `SILENT` が設定されることになります。
※ログレベルの設定はお好みでどうぞ

#### 使う

`console.log` を置き換えます。

```diff:TaskCard.vue
  <script>
+ import * as log from "loglevel";
  ...
-       console.log(`remove: ${this.id}`);
+       log.debug(`remove: ${this.id}`);
```

`log.debug` を `log.warn` や `log.error` に置き換えたり、
`main.js` で設定した `log.levels.DEBUG` を `log.levels.ERROR` に置き換えるなどして
遊んでみてください。

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

## ぜひとも読んでおきたい記事

Vue.js の優れたドキュメントなどはたくさんあって
キリがないのですが、その中でも自分が特に **すぐに活かせる** 観点で
役に立った記事を2つ消化しておきます。

- [スタイルガイド — Vue.js](https://jp.vuejs.org/v2/style-guide/index.html)
  - 公式のスタイルガイド
  - 日本語ですし、それぞれ例を用いてわかりやすく説明されているので暇つぶしにちょうどいいです
- [2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita](https://qiita.com/kahirokunn/items/6b4834b9a13406535f32#vuejsの最も協力な武器であるsfcの質を上げるtips)
  - 実開発上で共感する部分が多く、とても役立つと感じました

## おわりに

書きたいことは全て書いてきたので今更特に言うことはありません。
とにかく Vue.js ライフを楽しんでいただけたら何よりです。

逆に読んでいただいた方からのご指摘やご質問など待ってますので
遠慮なくコメントや編集リクエストをお願いします。

Lovely Vue :heartbeat: 

[^1]: コンポーネントによっては `material-icons` が必要になるります。判断が難しいのでここでは何も考えずインストールします。
[^2]: ここではわかりやすく全コンポーネントを入れています。ファイルサイズの節約には必要なコンポーネントだけをインポートするのが有効です(https://lusaxweb.github.io/vuesax/development/#use)