理系公務員のプログラミング日記

Vuetifyについて

Vuetify はGoogleが提唱したマテリアルデザインという方法論に則って作られたVue.js用のUIライブラリです。デザインの知識がなくても、簡単に使いやすいユーザーインターフェイスを持ったコンポーネントを実装できます。

マテリアルデザイン:wikipedia

Material Design:google

なお、Vuetifyのようなデザインをサポートしてくれるフレームワークとしては、他にも以下のような選択肢があります。状況によって使い分けることができると便利なので、一通り触ってみると良いと思います。

BootstrapVue

BootStrap5

Bluma

Tailwind CSS

とほほのCSSフレームワーク入門

Vuetifyのインストールしたプロジェクトを新規に作成する

既存のVueプロジェクトに追加する方法と、設定が完了したものを新規に作る方法がありますが、この新規に作る方法がめちゃくちゃ簡単なのでこちらを紹介します。

Vite（ヴィート）について

今回インストールするVuetifyは、Vue3に対応したバージョン3.0になります。Vuetify3.0の公式サイトには、Vueプロジェクトの作成にはVue CLIではなくViteを利用することを推奨する表示があります。

Viteとは、フランス語で「早い」という意味を持つ言葉で、Vue.jsと同じ作者が作成した「次世代フロントエンドツール」だそうです。

Vite

大層な名前や説明が付いてるなぁと感じますが、本当にめちゃくちゃ早いし、VueだけでなくReactなど他のフロントエンドフレームワークの開発にも利用することができるプログラムです。

Vuetifyを新規プロジェクトとして作成するとき、内部でこのViteを利用する方法が公式から提供されています。

yarnについて

Vuetifyをインストールする際にyarnを使用することが指定されているので、この説明も行います。

yarnとは、npmと互換性のあるJavaScriptのパッケージマネージャーで、Facebookが開発したものです。

基本的な機能はほぼ違いがないので、指定されていない場合は好みで好きな方を使えば良いと思います。（今回は指定があるのでyarnを使います。）

インストールにはnpmを利用します。

npm install -g yarn

npmから乗り換えてわかったYarnの4つのメリット

npm互換のJavaScriptパッケージマネージャーYarn入門

Vuetifyの入ったVue3プロジェクトを作成

早速yarnを使ってVuetifyの入ったVue3プロジェクトを作成していきましょう。

yarn create vuetify

プロジェクト名の決定

上記コマンドを通すと、まず最初にプロジェクト名を聞かれますので、適当に入力します。

yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vuetify@1.0.5" with binaries:
      - create-vuetify
[##############] 14/14
Vuetify.js - Material Component Framework for Vue

? Project name: › vuetify-project

追加ライブラリの決定

次にVuetify以外に追加しておきたいライブラリを指定します。

Defaultで良いですが、折角なので名前が上がっている２つのライブラリを紹介します。

VueRouter・・・フロントエンド側でURLに対応したページを構成するための、ルーティングを行うためのライブラリです。

はじめてのVue Router(基本編):アールエフェクト

Pinia・・・Vue上でコンポーネント間でPropsやEmitを使った状態(state)の伝達をグローバルに行なって管理をすることができるライブラリです。

Vue.js Piniaを使って状態管理(データの共有)を行ってみよう:アールエフェクト

なお従来のVue2ではVuexというライブラリが使われていましたが、Vue3からはこのPiniaが推奨されているそうです。（知らんかった）

? Which preset would you like to install? › - Use arrow-keys. Return to submit.
❯   Default (Vuetify)
    Base (Vuetify, VueRouter)
    Essentials (Vuetify, VueRouter, Pinia)
    Custom (Choose your features)

TypeScriptの利用の決定

TypeScriptは、Microsoftが開発した代替JavaScript(AltJS)と呼ばれる種類の言語の一つで、JavaScriptに型定義などの機能を追加したものです。型のチェックを逐一行うことで、プログラムの品質を高めることが期待できます。

2022年の時点では、フロントエンドの開発にはTypeScriptを使うことがほぼ必須となってきているようですが、今回はJavaScriptで書きたいのでNoを選びます。

? Use TypeScript? › No / Yes

パッケージ管理ツールの指定

どのパッケージ管理ツールを利用するかを聞かれていますが、当初と同じyarnで良いでしょう。

? Would you like to install dependencies with yarn, npm, or pnpm? › - Use arrow-keys. Return to submit.
❯   yarn
    npm
    pnpm
    none

ここまで進むと、指定したライブラリとVuetifyを含んだVue3プロジェクトが作成されたと思います。

プロジェクトのフォルダに移動したあと、下記コマンドでサーバーを起動してください。

今回はnpmではなくyarnでプロジェクトを作成したので、yarnを使って起動します。

yarn dev

下記のような画面が出ればOKです。

次：Vue3でVuetifyを利用する②