Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

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

Vue.js devtools

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

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

ハンズオン?

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

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

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

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 を以下のように修正します。

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.debuglog.warnlog.error に置き換えたり、
main.js で設定した log.levels.DEBUGlog.levels.ERROR に置き換えるなどして
遊んでみてください。

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

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

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

おわりに

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

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

Lovely Vue :heartbeat:


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

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

taiju59
Flutterスキスキ
https://note.com/taiju____
ferix
R&Dを中心に主に受託開発でソフトウェアを開発するエンジニア集団
https://www.ferix.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした