Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

Vue で Material Design。Vuetify を導入してみた

Vue ベースのアプリに Material Design を導入できる、Vuetify を試してみた。

前提

Vue CLI (@vue/cli 4.4.1) を使い、TypeScript + SCSS なアプリを作った状態を前提とする。

Vue-Router および Vuex も導入済みだ。

Vuetify を導入する

Vuetify を導入するには、以下のコマンドを叩く。

$ vue add vuetify

するといくつかパッケージがインストールされたり、設定ファイルが追加・更新されたりする。本稿執筆時点では vuetify v2.3.2 がインストールされた。

自分が試した限りだと、src/main.tsvuetify が追加されるが、TypeScript エラーが発生してしまった。

上の記事によると、tsconfig.jsontypes 配列内に "vuetify" を追加すれば解消できた。

{
  "compilerOptions": {
    // 省略
    
    "types": [
      "webpack-env",
      "jest",
      "vuetify"  // ← コレを追加した
    ],
  }
}

Roboto フォントを使用しない・ベースフォントを変更するには

Vuetify をインストールすると、public/index.html に Roboto フォント用の link 要素が追加される。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

しかし自分は Roboto フォントは使わないスタイルに変更したかったので、まずはこの link 要素の記述を消してしまった。

で、ベースフォントを変更するには、src/scss/variables.scss という名前のファイルを作り、そこで Vuetify が用意する SCSS 変数を上書きしてやれば良い。このファイルは自動的に読み込まれるので、特に設定ファイルを変更したりする必要はない。

// src/scss/variables.scss

$body-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

このファイル内で SCSS を @import したりしなくても良い。便利。

Material Design Icons を手動インストールする

Vuetify をインストールすると、Roboto フォントと同じく、public/index.html に Material Design Icons を読み込む link 要素が追加される。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

CDN から読み込まずにバンドルしたい時は、この link 要素の記述を削除して、次のように書いていく。

# 本稿執筆時点で v5.3.45 がインストールされた
$ npm install -D @mdi/font

そして src/plugins/vuetify.ts に次のように追記していく。

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

// ↓ コレを追加
import '@mdi/font/css/materialdesignicons.css';

Vue.use(Vuetify);

export default new Vuetify({
  // ↓ 以下を追加
  icons: {
    iconfont: 'mdi'
  }
});

とりあえずココまでやっておけば初期設定は完了かな。

Vuetify で作っていく

Vuetify は公式サイトのガイドがほとんど日本語化されているので、基本的には公式のリファレンスを見ていけば作れる。

ページの全体的なレイアウトは、以下の「既成レイアウト」を参考にすれば良い。

あとは「UI コンポーネント」を個別に見ていって書いていく。v-input なんかは専用の解説ページがないっぽいので、「API Explorer」ページも軽く見ておくと良いかと。

フォント操作やマージン調整など細かいところは「スタイルとアニメーション」内にそれぞれまとまっている。

所感

Material Design 系のフレームワークはどれもそうなのだが、やたらと HTML が肥大化してつらい。

Vuetify 独自の要素を大量に覚えねばならず、普通の inputselect 要素なんかを使えなくなるので、フォーム構築も大変だ。v-cardv-list は子要素が多すぎてつらい。

あと、ちょっと凝ったデザインを組み込もうとするとすんなりいかないところがあるので、ちょくちょく調べて Stack Overflow なんかのお世話にならないといけない。

フレームワークとしても富豪的で、ビルド後のバンドルサイズが全体で 1MB 近くなるかな。

一見した見栄えは良いけど、結構頑張って作っていかないといけないね。

Vue.jsのツボとコツがゼッタイにわかる本

Vue.jsのツボとコツがゼッタイにわかる本

  • 作者:中田亨
  • 発売日: 2019/05/10
  • メディア: Kindle版