【React】StoryBookプロジェクトにTypeScriptを導入する方法【npm】

この記事の最終更新日: 2023年4月12日

Storybookは、ReactやVueなどのフレームワークでUIコンポーネントをテスト・開発するためのツールであり、開発者がUIコンポーネントを独立して開発できるようにすることで、開発プロセスを効率化することができます。

TypeScriptは、JavaScriptの上に構築された静的型付け言語であり、コンパイル時にエラーを検出することができ、開発プロセスを安全かつ効率的にすることができます。

この記事では、StorybookプロジェクトにTypeScriptを導入する方法を紹介します。

TypeScriptをインストールする

まず、StorybookプロジェクトにTypeScriptを導入するには、TypeScriptをインストールする必要があります。npmパッケージマネージャーを使用して、以下のコマンドを実行してください。

npm install typescript --save-dev

TypeScriptコンパイラを設定する

次に、TypeScriptコンパイラを設定する必要があります。プロジェクトルートにtsconfig.jsonというファイルを作成し、以下のような内容を記述します。

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "lib": ["dom", "es2015"],
    "sourceMap": true,
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["./src/**/*"]
}

この設定ファイルは、TypeScriptコンパイラがコンパイル時に使用する設定を含んでいます。例えば、jsxオプションは、ReactのJSX構文をサポートするために必要な設定です。

StorybookをTypeScriptに変換する

StorybookをTypeScriptに変換するために、.storybookフォルダ内にあるmain.jsファイルを以下のように編集します。

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
  typescript: {
    check: true,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

この設定では、StorybookがTypeScriptを使用するように設定されています。typescriptプロパティには、TypeScriptに関する設定が含まれています。

reactDocgenプロパティは、ReactコンポーネントのPropsを自動的にドキュメント化するためのツールであるreact-docgen-typescriptを使用しています。

propFilterプロパティは、Propsのうち、特定のファイルやモジュールを除外するための設定です。

StorybookコンポーネントをTypeScriptに変換する

StorybookコンポーネントをTypeScriptに変換するには、.stories.jsファイルを.stories.tsxファイルに変更し、以下のように変換します。

import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { Button, ButtonProps } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
    onClick: { action: "clicked" },
  },
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: "Button",
};

この変換では、React.FCを使用していた部分を、React.FunctionComponentに変更しています。また、StoryとMetaの型をインポートし、Templateの型をStory<ButtonProps>に変更しています。最後に、export defaultで定義したStoryオブジェクトをas Metaで型定義しています。

TypeScriptのLintツールを設定する

最後に、TypeScriptのLintツールを設定することで、コードの品質を向上させることができます。一般的には、ESLintとPrettierの組み合わせが使われます。以下のように、.eslintrc.jsファイルをプロジェクトルートに作成し、設定を記述します。

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
  },
};

この設定では、@typescript-eslint/parserパッケージを使用してESLintの設定を行い、extendsプロパティで各種プラグインを指定しています。また、parserOptionsプロパティで、JSX構文を有効にし、rulesプロパティで、明示的な型指定やany型の使用に関するルールを設定しています。

まとめ

以下まとめです。

1. TypeScriptをインストールする。
2. tsconfig.jsonファイルを作成し、必要な設定を行う。
3. Storybookのコンフィグファイルであるmain.jsにTypeScriptの設定を追加する。
4. StorybookコンポーネントをTypeScriptに変換する。
5. TypeScriptのLintツールを設定する。

これらの手順に従って、StorybookプロジェクトにTypeScriptを導入することができます。TypeScriptを使用することで、静的型チェックによるコードの品質向上や開発効率の向上が期待できます。

また、Storybookには、TypeScriptをサポートする多くのアドオンがあります。例えば、@storybook/addon-docsは、Storybookコンポーネントのドキュメントを自動生成することができます。また、@storybook/addon-knobsは、Storybook上でコンポーネントのプロパティを簡単に操作することができます。

これらのアドオンを組み合わせることで、より高度なStorybookの開発が可能になります。ただし、アドオンの設定や使用方法には、TypeScriptの知識が必要となる場合があります。

最後に、StorybookプロジェクトにTypeScriptを導入する際には、プロジェクトの規模や環境に合わせて、適切な設定を行うことが重要です。また、TypeScriptの導入によって生じる影響を事前に調査し、予期せぬエラーや問題を回避することが望まれます。

daigoro

大阪のエンジニアが書いているブログ。