51
Help us understand the problem. What are the problem?

posted at

updated at

Organization

Next.js + TypeScriptのプロジェクトにStorybookを導入する

この記事の概要

Next.js + TypeScriptのプロジェクトにStorybookを導入する手順を解説した記事です。

対象読者

  • Next.jsを触った事がある人
  • TypeScriptの基礎的な知識がある人
  • Storybookについて基礎的な知識がある人

実行環境

  • Node.js 12.16.2
  • Next.js 9.5.5
  • React 16.14.0
  • Storybook(React) 6.0.27

具体的な手順とゴール

公式の Storybook for React にあるように @storybook/cli で構築する方法を確認出来ます。

特に Create React App を使っている場合 npx -p @storybook/cli sb init --type react_scripts を実行するとかなり簡単に環境が構築出来ます。

今回はNext.jsを使っていたりTypeScriptを使っていたりするので自前で環境を用意します。

必要なpackageをインストールする

今回インストールするpackageは下記の通りになります。

@storybook/react
@storybook/addon-essentials
@storybook/addon-a11y
@storybook/addon-links
@storybook/addon-storyshots

※ 最小構成ではなく、便利なアドオンをいくつか追加してあります。

必要な設定ファイルを作成する

以下の設定ファイルを追加します。

TypeScript前提なので .tsx.mdx の拡張子のファイルをStorybook用のファイルとして認識してさせるような設定です。

.storybook/main.js
module.exports = {
  stories: ['../src/components/**/*.stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
  ],
};

optionsstorySort はStorybookをどうソートさせるか?のロジックです。

これは 公式サイト に載っていた例をそのまま記載した物です。

.storybook/preview.js
const addParameters = require('@storybook/react').addParameters;

addParameters({
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
});

設定ファイルは以上になります。

以前はTypeScriptに対応させる為に .storybook/webpack.config.js を追加する必要があったのですが、Storybook6系でTypeScriptに標準対応したのでかなり楽になったと感じます。

Storyを作成する

以下のようにシンプルなStoryを作成します。

命名規則は Component名 + .stories.tsx とします。

src/components/AppTitle.stories.tsx
import React from 'react';
import AppTitle from './AppTitle';

export default {
  title: 'AppTitle',
};

export const showAppTitle = () => <AppTitle />;

Storyboookを起動する

package.json のscriptsに以下の記述を追加します。

package.json
{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build:storybook": "build-storybook -o build/storybook"
  },
}

yarn run storybook もしくは npm run storybook で起動します。

http://localhost:6006 にアクセスを行い以下のような画面が表示されていたら成功です。

Storybook.png

ちなみに yarn run build:storybook もしくは npm run build:storybook を実行すると上記の内容を静的なHTMLとしてアウトプットする事が出来ます。

おわりに

今回作成したサンプルはかなり単純な物なので、開発が進むにつれ、設定等を追加する事になると思います。

その場合はまた何らかの形で情報発信を行います。

以上になります。最後まで読んで頂きありがとうございます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
51
Help us understand the problem. What are the problem?