【Nuxt3】Storybookを導入する

はじめに

前回の記事

前回作成したものもとに開発していきます。

今回は、Storybookを導入して画面を確認することができるようにします。

公式のStorybookのインストール手順に従っていきたいと思います。

Storybookをインストールして実行する

以下コマンドでStorybookをインストールします。

npx storybook@latest init

インストールが終わったら以下のコマンドで起動させます。

npm run storybook

そうするとブラウザが立ち上がりStorybookの画面が表示されます。

しかし、少し時間がたった後、以下のようなエラーが出てしまいました。

vite.config.jsファイルを作成しなくてはいけなかったようです。

そのため、以下のサイトであるようなvite.config.jsを作成しました。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

これでもう一度Storybookの起動コマンドを再実行すると、以下のようにエラーがなくなり、デフォルトで入っているStorybookのボタンなどが見れるようになりました。

自分で作成した画面をStorybookで見る

前回作成したカウントアップする画面をStorybookで見ることができるようにしたいと思います。

まずは、views/CountView/index.tsxと同じ階層にindex.stories.tsを用意します。

index.stories.ts

import MyPage from './index.vue';

export default {
  title: 'Views/CountView',
  component: MyPage,
  parameters: {
    layout: 'fullscreen',
  },
};
export const Default = {
  args: {
    label: 'CountView',
  },
};

読み込むファイルをviews配下も含めてあげるようにするため、.storybook/main.jsを以下のように修正します。

main.js

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
const config = {
  stories: [
    // '../stories/**/*.mdx',
    // '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../views/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

これでStorybookを立ち上げると、自分の作成したページを見ることができますが、カウンターが動きませんでした。

どうやら、Nuxtには自動インポート機能があり、それがStorybookではインポートされないために起きているようです。

そのため、Nuxtの自動インポート機能をOffにして、composablesで書いていた処理をReactのようにhooks.tsにしてindex.vueと同じ階層に置くことにしました。

nuxt.config.tsを以下のように修正し、

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  components: ['@/components'],
  imports: {
    autoImport: false, //追加
  },
});

hooks.tsを以下のように作成しました。

hooks.ts

import { readonly, ref, type Ref } from 'vue';
const inc = (counter: Ref<number>) => () => counter.value++;
const dec = (counter: Ref<number>) => () => counter.value--;

export const useCounter = () => {
  const counter = ref(0);
  return {
    counter: readonly(counter),
    inc: inc(counter),
    dec: dec(counter),
  };
};

そこから、index.vueファイルもhooks.tsを読み込むように修正しました。

index.vue

<script setup lang="ts">
  import { useCounter } from './hooks';

  const { counter, inc, dec } = useCounter();
</script>

<template>
  <div class="bg-red-600">
    カウンター: {{ counter }}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
    <!-- <button
      class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"
    >
      ...
    </button> -->
  </div>
</template>

これでStorybookを起動してみると、

このようにカウントアップが動いていることを確認することができました。

おわりに

Next.jsと比べると色々やらなくてはいけないことが多いなという印象がありました。

もし、もっといいやり方があるや、間違っている部分があるといったご意見をいただければ幸いです。

今後はStorybookを用いてテストコードを書いていきたいと思っております。

最後まで読んでいただきありがとうございました。

参考

次の記事