【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた

Vue.jsの続きでず。前回まではコンポーネントについて触れましたが今回からはVue.jsのUIフレームワーク、Vuetifyにトライしてみます。CDNリンクで事始めることができました。それではいきましょう！

【目次】

VuetifyはUIフレームワーク
CDNリンクでの事始め方
コンポーネントで書き出されたコード
最後に

前回記事はこちら

※参考：【Vue.js】コンポーネントにpropsオプションで値を渡す - クモのようにコツコツと

VuetifyはUIフレームワーク

まずVuetifyとは何ぞや、というところから。日本語公式サイトには「マテリアルデザインコンポーネントフレームワーク」とある。

※参考：Vue Material Design Component Framework — Vuetify.js

Vue.jsシリーズの初回にも書いたようにVue.js自体もフレームワークなんだが、その中にさらにフレームワークがあるとはこれいかに。コンポーネントフレームワークとのことだがコンポーネントも前回まで触れていたVue.jsの機能だ。

※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ - クモのようにコツコツと

マテリアルデザインとはGoogleの提唱するUIデザイン。サルワカの記事がとてもわかりやすい。こういうデザインはGoogleだけでなく多くのWebアプリやスマホアプリで見られる。

※参考：【2018年版】マテリアルデザインとは？作り方とガイドラインまとめ

つまりVuetifyはVue.jsにマテリアルデザイン的なUIデザインを簡単に導入ができるフレームワーク。UIフレームワーク、またはCSSフレームワークというわれるジャンルに入る。有名どころではBootstrapなどがある。

※参考：Bootstrap · The most popular HTML, CSS, and JS library in the world.

BootStrapは自分も以前使ってみた。いわゆる「BootStrap臭」といわれるほうな似たようなデザインになりがちで、それを消し去るのは手間がかかった。しかしWebアプリのダッシュボードなどデザインよりも使いやすさが重視される仕事では有効な手段と感じた。Vuetifyも同様にVue.jsで作るWebアプリの管理画面などのUIには有効と思われる。

CDNリンクでの事始め方

クイックスタートのページにはVue CLIやWebpackなどを使ったインストール方法がいろいろ書かれているが、頑張ってスクロールすると下の方にCDNのリンクで始める方法も書かれている。

※参考：https://vuetifyjs.com/ja/getting-started/quick-start

とりあえずCodePenでハローワールドしてみた。

See the Pen Vuetify 01 by イイダリョウ (@i_ryo) on CodePen.

CDNリンクのおかげでCodePenで体験できた！

HTMLコード。まずheadタグ

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

Googleフォントの「Roboto」をリンク
アイコンフォント「materialdesignicons」をリンク
Vuetifyデフォルトのスタイル設定「vuetify.css」をリンク
レスポンシブデザイン用のvuewport設定

次にbodyタグの中

<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>こんにちは、びゅうてぃふぁい。</v-container>
      </v-content>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>

#appタグ
#appタグの中にv-appコンポーネント
v-appコンポーネントの中にv-contenコンポーネント
v-contenコンポーネントの中にv-containerコンポーネント
v-containerコンポーネントの中にハローワールド的なテキスト
bodyの閉じタグの直前にvue.jsをリンク
同じくvuetify.jsをリンク

headの中にはVuetifyのCSSが、bodyの閉じタグの直前にはVue.jsとVuetifyのJSファイルがリンクされている。

JSコード

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })

Vueインスタンス作成
elオプションで#appと紐付け
vuetifyオプションでVuetifyインスタンス作成

コンポーネントで書き出されたコード

さっきの画面は見た目はなんだか単に「ハローワールド」を表示しただけじゃないか、と感じる。

しかし、デベロッパーツールでHTMLを見てみるたら#appの中身はこんなコードになっていた。

<div id="app">
    <div data-app="true" class="v-application v-application--is-ltr theme--light" id="app">
        <div class="v-application--wrap">
            <main class="v-content" data-booted="true" style="padding: 0px;">
                <div class="v-content__wrap">
                    <div class="container">こんにちは、びゅうてぃふぁい。</div>
                </div>
            </main>
        </div>
    </div>
</div>

#appの中にdivタグやmainタグが何層にも入れ子になっており、class名、id名に元コードのコンポーネント名が見受けられる。

しかし自分で書いたJSにはこれらの設定はない。単に#appとvuetifyインスタンスを紐づけただけだ。それだけでVuetifyコンポーネントがこのDOM要素に置き換わったことがわかる。

class名の中にv-xxxxという名前がいくつかある。この中で例えば.v-applicationはvuetify.cssの設定が見受けられた。

vuetify.cssのコード

.v-application .display-1, .v-application .display-2 {
    font-weight: 400;
    font-family: Roboto, sans-serif !important
}

.v-application .display-1 {
    font-size: 2.125rem !important;
    line-height: 2.5rem;
    letter-spacing: .0073529412em !important
}

.v-application .display-1 のフォントをRobotoにせよ、文字サイズを2.5remにせよ、などのスタイルが書いてある。

そしてvuetify.jsの中にも.v-applicatioに関する設定が見受けられた。

vuetify.jsのコード

render: function render(h) {
    var wrapper = h('div', {
      staticClass: 'v-application--wrap'
    }, this.$slots.default);
    return h('div', {
      staticClass: 'v-application',
      class: __assign({
        'v-application--is-rtl': this.$vuetify.rtl,
        'v-application--is-ltr': !this.$vuetify.rtl
      }, this.themeClasses),
      attrs: {
        'data-app': true
      },
      domProps: {
        id: this.id
      }
    }, [wrapper]);
  }