Vuetify — セットアップとテーマ

Lv1: 基本 — v-btn の color / variant

問題

以下の仕様を満たすボタンを実装せよ。

1. primary 色のボタン「送信」
2. error 色で outlined のボタン「削除」
3. success 色で text のボタン「完了」

合格基準

• 3つのボタンが色違いで表示される
• variant を変えたボタンの見た目が異なる（枠だけ / 文字だけ）

Lv2: 応用 — useTheme でテーマ切り替え

問題

useTheme() を使い、クリックするたびにアプリ全体のテーマを

light ⇄ dark で切り替えるボタンを実装せよ。

1. ボタンのラベルに現在のテーマ名（light または dark）を表示すること
2. クリックのたびに light ⇄ dark が交互に切り替わること
3. テーマの切り替えには change() を使うこと（プロパティへの直接代入はしない）

合格基準

• 初期状態は light と表示される
• クリックすると dark に変わり、もう一度押すと light に戻る

Lv3: 発展 — 複数コンポーネントで theme を共有

問題

以下の仕様を満たすコンポーネント構成を実装せよ。

1. 親コンポーネントに ThemeButton（Lv2 のテーマ切り替えボタン）と、

現在のテーマ名だけを表示する ThemeLabel（別コンポーネント）を並べて配置する

1. ThemeButton と ThemeLabel は、それぞれ自分自身で useTheme() を呼び出す
2. 親コンポーネントから子へ props を渡したり、子から emit したりしてはいけない
3. ThemeButton でテーマを切り替えたときに、ThemeLabel の表示も自動的に追従すること

合格基準

• 別コンポーネントなのに、片方の操作がもう片方の表示に反映される
• なぜ props/emit なしで反映されるのか、自分の言葉で説明できる

Lv4: 発展 — createVuetify でカスタムカラーテーマを定義する

問題

以下の仕様を満たすボタンを実装せよ。

1. createVuetify() のテーマ設定に、好きな名前でカスタムカラー

（組み込みにない独自の配色）を1つ定義する

1. v-btn の color prop にそのカスタムカラー名を指定し、ボタンに反映させる

合格基準

• ボタンの背景色に、定義したカスタムカラーが適用されている
• primary や error など組み込みの色名ではなく、独自に定義した色名を使っている

提出

submission.md に4問の回答を。

ヒント

まずは第1段階だけを見て考えてみる。それでも分からなければ第2段階、

それでも分からなければ最後の手段として第3段階を見る。

第1段階: 考え方

• Vuetify の「テーマ」（配色・ライト/ダークの設定）は、コンポーネントの外（main.ts）で

一度だけ定義されている。それを画面側の <script setup> から読み書きするには、

Vuetify が提供している「テーマにアクセスするための composable」を呼び出す必要がある。

• その composable の戻り値を、テンプレートやクリック処理から使えるように

変数へ代入しておく。

• 「切り替える」処理は、今の状態を見て逆の状態を選ぶ、という単純な分岐でしかない。

今の状態を読み取る方法と、状態を変更する方法さえ分かれば、toggleTheme() の中身は

自分で組み立てられる。

第2段階: 使う API 名

• composable の名前は useTheme()。vuetify パッケージからインポートする。
• 現在のテーマ名は、戻り値の global.name.value というプロパティで読み取れる。
• テーマを切り替えるときは、戻り値が持つ change() というメソッドを使う

（プロパティへの直接代入は非推奨）。

• toggleTheme() は「今の名前が 'light' かどうかを見て、'dark' か 'light' かを

change() に渡す」という三項演算子 1 行で書ける。

第3段階: コード断片

• Vuetify のテーマ（配色設定）を JS から読み書きするには useTheme() を呼び出す。import { useTheme } from 'vuetify'。
• useTheme() の戻り値を theme という変数に代入すればよい。
• 現在のテーマ名は theme.global.name.value（'light' または 'dark'）で読み取れる。
• テーマを切り替えるときは theme.global.name.value = ... と直接代入せず、theme.change('dark') のように change() メソッドを使う（直接代入は非推奨警告が出る）。
• toggleTheme() の中身はこう書ける: theme.change(theme.global.name.value === 'light' ? 'dark' : 'light')

解説

Vuetify の「テーマ」はアプリ全体で共有される設定

Vuetify を導入すると、色・ダークモードなどの見た目の設定は createVuetify({ theme: {...} }) で

アプリ起動時に一度だけ定義し、あとはどのコンポーネントからでも useTheme() で参照・変更できる。

import { useTheme } from 'vuetify'

const theme = useTheme()
console.log(theme.global.name.value)   // 'light' | 'dark'

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

function toggleTheme() {
  theme.change(theme.global.name.value === 'light' ? 'dark' : 'light')
}
</script>

<template>
  <v-btn @click="toggleTheme">
    テーマ: {{ theme.global.name.value }}
  </v-btn>
</template>

• theme.global.name はアプリ全体で 1 つだけ存在する グローバルな状態。

どのコンポーネントで useTheme() を呼んでも同じ値を参照する（Pinia の store に近い性質）。

• 値を直接 theme.global.name.value = 'dark' と書き換えることもできるが、Vuetify は

theme.change('dark') を推奨している（将来的な内部処理の変更に対応するため）。

なぜコンポーネントごとに v-theme-provider を書かなくてよいか

Vue の provide/inject（component-design の ch04 で学んだ仕組み）を Vuetify がプラグイン内部で

使っており、app.use(vuetify) した時点でアプリ全体にテーマ情報が provide 済みになっている。

だからこそ、深い階層のどのコンポーネントからでも useTheme() するだけで同じテーマにアクセスできる。

「ライブラリが用意する composable（useXxx()）は、内部で provide/inject や store を

使っていることが多い」と知っておくと、他のライブラリを読むときにも見通しが良くなる。

ヒント

まずは第1段階だけを見て考えてみる。それでも分からなければ第2段階、

それでも分からなければ最後の手段として第3段階を見る。

第1段階: 考え方

• Vuetify にはあらかじめ primary / error / success などの色名が

用意されているが、それとは別に、自分だけの色名（カスタムカラー）を

追加で定義することもできる。

• カスタムカラーは createVuetify() を呼び出すときの設定（テーマ設定）の中に、

「好きな名前」と「16進カラーコード」のペアとして書く。

• 定義した色名は、組み込みの primary などと全く同じように、v-btn の

color prop にそのまま指定して使える。

第2段階: 使う API 名

• createVuetify({ theme: { themes: { light: { colors: { ... } } } } }) という

構造の中の colors オブジェクトに、キー名: '#16進カラーコード' の形で

カスタムカラーを追加する。

• 例えば brand という名前で色を定義したら、v-btn には color="brand" と書く。

第3段階: コード断片

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          brand: '#8E24AA', // 好きな16進カラーコードでOK
        },
      },
    },
  },
})

<template>
  <v-btn color="brand">ブランドボタン</v-btn>
</template>

解説

Vuetify は組み込みの色以外に「自分だけの色」を追加定義できる

primary や error のような色名は、Vuetify が最初から用意している「テーマの色」の

一部でしかない。createVuetify() の theme.themes.<テーマ名>.colors に

自分の好きなキー名を追加すれば、そのままアプリ独自の色として使えるようになる。

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          brand: '#8E24AA', // 独自に追加したカスタムカラー
        },
      },
    },
  },
})

<template>
  <v-btn color="brand">ブランドボタン</v-btn>
</template>

• color prop は「組み込みの色名」と「自分で定義したカスタム色名」を区別しない。

theme.themes.light.colors に登録されている名前であれば、そのまま使える。

• キー名は自由に付けられる（brand である必要はない。プロジェクトの

ブランドカラーなどに合わせて名前を決めるとよい）。

内部でどう反映されているか

Vuetify は createVuetify() に渡されたテーマ設定から、色ごとに

--v-theme-<色名> という CSS カスタムプロパティ（CSS 変数）を生成し、

<style id="vuetify-theme-stylesheet"> として <head> に差し込む。

v-btn などの color prop は、その値に応じて bg-<色名> というクラスを

コンポーネントに付与するだけで、実際の色は background-color: rgb(var(--v-theme-<色名>))

という形でこの CSS 変数から解決される。

graph LR
  A["createVuetify({ theme: { colors: { brand: '#8E24AA' } } })"] --> B["--v-theme-brand が\nCSS変数として生成される"]
  B --> C["v-btn color='brand' が\nbg-brand クラスを付与"]
  C --> D["background-color: rgb(var(--v-theme-brand))\nとして描画される"]

つまり「色名を書いただけ」と「テーマにその色を定義した」は別物で、

colors に登録していない名前を color prop に渡しても、対応する CSS 変数が

存在しないため色は反映されない。

この演習でのファイル構成について

通常のアプリでは createVuetify() は main.ts で1回だけ呼び出し、

各コンポーネントは app.use(vuetify) 済みの状態からその恩恵を受けるだけでよい

（ch01 の「セットアップ」スライドの通り）。

この演習では、テストで動作を確認しやすくするため、createVuetify() の呼び出しを

answer.vue / starter.vue の中に書いているが、書いているテーマ設定の内容自体は

main.ts に書く内容と何も変わらない。