この記事の最終更新日: 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
型の使用に関するルールを設定しています。
まとめ
以下まとめです。
- TypeScriptをインストールする。
- tsconfig.jsonファイルを作成し、必要な設定を行う。
- Storybookのコンフィグファイルであるmain.jsにTypeScriptの設定を追加する。
- StorybookコンポーネントをTypeScriptに変換する。
- TypeScriptのLintツールを設定する。
これらの手順に従って、StorybookプロジェクトにTypeScriptを導入することができます。TypeScriptを使用することで、静的型チェックによるコードの品質向上や開発効率の向上が期待できます。
また、Storybookには、TypeScriptをサポートする多くのアドオンがあります。例えば、@storybook/addon-docs
は、Storybookコンポーネントのドキュメントを自動生成することができます。また、@storybook/addon-knobs
は、Storybook上でコンポーネントのプロパティを簡単に操作することができます。
これらのアドオンを組み合わせることで、より高度なStorybookの開発が可能になります。ただし、アドオンの設定や使用方法には、TypeScriptの知識が必要となる場合があります。
最後に、StorybookプロジェクトにTypeScriptを導入する際には、プロジェクトの規模や環境に合わせて、適切な設定を行うことが重要です。また、TypeScriptの導入によって生じる影響を事前に調査し、予期せぬエラーや問題を回避することが望まれます。

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