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

はじめに

こちらは やさしめ Vue.js チュートリアル(3) ~ コンポーネントによる構成 の続きです。

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

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

Vue.js devtools

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

ハンズオン？

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

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

UI フレームワーク

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

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

ハンズオン

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

準備

必要なパッケージをインストールしましょう。¹

$ yarn add vuesax material-icons

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

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 コンポーネントを利用する準備が整いました。

使う

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

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

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

ログ出力

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

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

ハンズオン

準備

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

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

$ yarn add loglevel

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

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 を置き換えます。

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 に置き換えるなどして
遊んでみてください。

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

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

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

• スタイルガイド — Vue.js
  • 公式のスタイルガイド
  • 日本語ですし、それぞれ例を用いてわかりやすく説明されているので暇つぶしにちょうどいいです
• 2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
  • 実開発上で共感する部分が多く、とても役立つと感じました

おわりに

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

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

Lovely Vue

1. コンポーネントによっては material-icons が必要になるります。判断が難しいのでここでは何も考えずインストールします。 ↩

2. ここではわかりやすく全コンポーネントを入れています。ファイルサイズの節約には必要なコンポーネントだけをインポートするのが有効です(https://lusaxweb.github.io/vuesax/development/#use) ↩