【StoryBook × TypeScript × Vue.js】TS構文のVueコンポーネントをStorybookに対応づける方法

はじめに

SrorybookにTypeScript構文のVueコンポーネントを登録する方法が分からずつまったため備忘録として残す。

Storybookはそのままの状態だとVueコンポーネントのTypeScript構文に対応できない。そこで、webpack.config.jsに設定を加えることで対応できるようにする。

目次

1. 開発環境・使用ツールについて
2. StoryBook for Vue.jsの導入方法
3. StoryBookをTypeScript記述に対応させる方法

1.開発環境・使用ツールについて

1. 環境構築
   • Mac
2. 使用ツール
   • VueCLI

2.StoryBook for Vue.jsの導入方法

1. VueCLIでVueプロジェクトを作成

ここではプロジェクトの作成方法については割愛する。

2. Srcと同じディレクトリに.storybookディレクトリを作成

3. .storybookディレクトリにconfig.jsを作成

4. index.jsに以下の記述を行う

config.js

import { configure } from '@storybook/vue'

import Vue from 'vue'

function loadStories() {
  require('../src/stories/index.stories.ts')
}

configure(loadStories, module)

5. src/components配下にディレクトリを作成、コンポーネントを一つ用意する

今回はTypeScript構文で記述する。

6. src配下にstoriesディレクトリを作成

7. storiesディレクトリにindex.stories.jsを作成

8. index.stories.jsに以下の記述を行う

index.stories.js

import { storiesOf } from '@storybook/vue';

import SimpleButton from '../components/atoms/Sample.vue';

storiesOf('Atoms', module).add('Button', () => ({
  components: { Sample },
  template: `<Sample></Sample>`,
}));

9. .storybookディレクトリにwebpack.config.jsを作成

10. webpack.config.jsに以下の記述を行う

これにより、Vue.jsコンポーネント内でTypeScriptの構文が見つかると、対応するローダー(ts-loader)が働き、StorybookがTypeScriptが読み込むようになる。

webpack.config.js

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/\.vue$/] }
            }
        ]
    }
};