Zenn
🎩

Vuetifyについて学んでみた🧑‍🎨

2022/04/24に公開
Vue.js
Vuetify
tech

Vuetifyとは?

公式ドキュメント
https://vuetifyjs.com/ja/

Material Design Framework

Vuetifyは美しく整えられたマテリアルコンポーネントを提供するVue UIライブラリです。 デザインスキルは必要ありません 。素晴らしいアプリケーションを作成するために必要な全てが揃っています。
公式によればフレームワークではなく、ライブラリーとのことです。

インストールの仕方
今回は気軽に使いたいので、CDNでやってみます。
こちらから、インストール
https://vuetifyjs.com/ja/getting-started/installation/

今回はVue2.6を使用します。Vue3でも使えるみたいですが、安定していないみたい🤔

index.html

<!DOCTYPE html>
<html>
<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@6.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>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

使い方

まず注意しないといけなのは、v-appというタグです。これがないとVuetifyは使えない!
v-appタグは<div id=”app”>(v-appタグを使うことでdiv id=”app”がブラウザ上に追加される)と同じ役目をします。
以前はそんなことも知らなかった???

Vuetifyはどうやって使えば良いのか?
それは、ドキュメントを見ながらです。

まずは、見た目レイアウトから学んでいきましょうか...
公式のドキュメント
https://vuetifyjs.com/ja/features/layouts/

画面左のスクロールするサイドメニューから、はじめましょう->ワイヤーフレームを選択しましょう。
リンク
https://vuetifyjs.com/ja/getting-started/wireframes/#section-30b530f330d730eb

色々ありますね。どれにするか...
今回は、Baseを選択しましょう。

右下のGithubのアイコンをクリックするとソースコードが見れます。

今回は、CDNなので、<template>タグは入りません。<v-app id="inspire">で囲んでいるものだけ使います。これだけでOKです。

index.html

<!DOCTYPE html>
<html>
<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@6.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>
<body>
  <div id="app">
      <v-app id="inspire">
        <v-navigation-drawer
          v-model="drawer"
          app
        >
          <!--  -->
        </v-navigation-drawer>

        <v-app-bar app>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

          <v-toolbar-title>Application</v-toolbar-title>
        </v-app-bar>

        <v-main>
          <!--  -->
        </v-main>
      </v-app>

    <script>
      export default {
        data: () => ({ drawer: null }),
      }
    </script>
  </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

ブラウザの画面

おお!、使えているみたいですね。それではこの調子で色んなUIを作っていきましょうか...

そうだな、スマートフォンのボトムナビゲーションバーをHTML、CSSで再現する方法が今日、見つけられなかったので、UIライブラリーを使って作っていきましょうかね😅

公式に作り方紹介されてた!
https://vuetifyjs.com/ja/components/bottom-navigation/

index.html

<!DOCTYPE html>
<html>
<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@6.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>
<body>
  <div id="app">
      <v-app id="inspire">
        <v-navigation-drawer
          v-model="drawer"
          app
        >
          <!--  -->
        </v-navigation-drawer>

        <v-app-bar app>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

          <v-toolbar-title>Application</v-toolbar-title>
        </v-app-bar>

        <v-main>
          <!--  -->
        </v-main>

        <v-bottom-navigation v-model="value">
          <v-btn value="recent">
            <span>Recent</span>

            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn value="favorites">
            <span>Favorites</span>

            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn value="nearby">
            <span>Nearby</span>

            <v-icon>mdi-map-marker</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </v-app>

    <script>
      export default {
        data: () => ({ drawer: null }),
      }
    </script>
  </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

現場では、UIライブラリーを使ってスマートフォンのUIのようなホームページを作っているのだろうな...
便利すぎる。

カルーセルというスライドショーですかね。あれを簡単に作ることもできます。今回はCDNの画像を読み込んでいます。公式のものをそのまま使わせていただきます。

https://vuetifyjs.com/ja/components/carousels/

index.html

<!DOCTYPE html>
<html>
<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@6.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>
<body>
  <div id="app">
      <v-app id="inspire">
        <v-navigation-drawer
          v-model="drawer"
          app
        >
          <!--  -->
        </v-navigation-drawer>

        <v-app-bar app>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

          <v-toolbar-title>Application</v-toolbar-title>
        </v-app-bar>

        <v-main>
          <v-carousel>
            <v-carousel-item
              v-for="(item,i) in items"
              :key="i"
              :src="item.src"
              reverse-transition="fade-transition"
              transition="fade-transition"
            ></v-carousel-item>
          </v-carousel>
        </v-main>

        <v-bottom-navigation v-model="value">
          <v-btn value="recent">
            <span>Recent</span>

            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn value="favorites">
            <span>Favorites</span>

            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn value="nearby">
            <span>Nearby</span>

            <v-icon>mdi-map-marker</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </v-app>

    <script>
      export default {
        data: () => ({ drawer: null }),
      }
    </script>
  </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
        return {
          items: [
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
          },
          {
            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
          },
        ],
        }
      }
    })
  </script>
</body>
</html>

Gih画像の加工うまくいかないな😅

おお!、すごい!、カッコいいWebサイトが簡単に作れそうだ🤣
レスポンシブ対応も自動でされているようだ。設定は必要だが...

Udemyの講師、世界のアオキさんの教材によればこちらで設定方法を見れます。
https://vuetifyjs.com/ja/components/grids/#props

う〜ん?、いい感じでされたっぽい🤔まだまだ勉強が必要ですね...

最後に

Webの勉強を始めた頃は、HTML、CSS、JavaScriptを使って動きのあるUIやカッコいいUIを作ることにこだわっていました。しかし、実際の開発現場では、UIフレームワークなんてものを使うみたいで自分達で自作することはあまり無いのかもしれない無いですね🤔
速く、レスポンシブ対応したWebアプリケーション作れるようになりたい😅

Discussion