Storybook で Vue3 (Typescript) と HTML を混在させる

菱川拓郎
菱川拓郎

久しぶりの技術小ネタ更新です。Storybook はUIテストとドキュメント作成を同時に行える便利なツールで、弊社でもフロントエンド開発に活用しています。弊社では Concrete CMS のUIライブラリにも採用されていることから、Vue.js を使用することが多いので、Storybook を Vue 用にセットアップしています。しかし、CMS を使ったWebサイト制作というプロジェクトの特性上、例えばWYSIWYGエディタ内で使いたいUIパーツなど、一部は HTML でUIコンポーネントを作りたいことがあります。そういった時に同居させる方法を考えてみましたのでご紹介です。

まず、HTMLファイルはそのままでは TypeScript でインポートできませんので、拡張子 .html をモジュールとして認識させてやります。 *.d.ts に以下のようなモジュール定義を追加します。

declare module "*.html" {
  const content: string;
  export default content;
}

次に、storyファイルで普段はVueコンポーネントをインポートするところを、HTMLファイルをインポートしてあげます。ファイル名の末尾に ?raw を追加することで、JSファイルとして評価されなくなります。あとは、そのまま Story の template 変数にHTMLの内容を突っ込んであげるだけでOKです。

import type { Meta, Story } from "@storybook/vue3";
import content from "./example_snippet.html?raw";

export default {
  title: "Snippets/Example",
} as Meta;

const Template: Story = (args) => ({
  template: content,
});

export const Default = Template.bind({});
Default.parameters = {
  docs: {
    source: {
      language: "html",
      code: content,
    },
  },
};

これで、全体としては Vue.js 用にセットアップした Storybook の中に、HTML を混在させることができました。Docs にもHTMLを渡してあげれば、Storybook 上でソースがコピーできるようになります。Storybook は柔軟なカスタマイズ性が魅力です。ぜひ色々なプロジェクトで使っていきましょう！

＜ 前へ 一覧へ戻る 次へ ＞