[Next.js] Storybookのバックグラウンド変更

概要

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトに適用されたStorybookのバックグラウンの色を変更する方法について説明します。

Storybook

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/6.storybook

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

TypeScriptベースのNext.jsプロジェクト生成

TypeScriptが適用されたNext.jsでStorybookを使うため、次のコマンドを実行してTypeScriptが適用されたNext.jsプロジェクトを生成します。

npx create-next-app --typescript storybook-background-color

Storybookのインストールや設定

TypeScriptが適用されたNext.jsプロジェクトでStorybookのタックグラウンドの色を変える方法を説明するため、Storybookをインストールする必要があります。以前のブログポストを参考してStorybookをインストールして設定してください。

[Next.js] Storybook

Storybookの実行

以前のブログを参考して設定したStorybookを実行して、Storybookが上手くインストールされたか確認します。次のコマンドを実行してStorybookを実行します。

npm run storybook

その後、ブラウザにhttp://localhost:6006/が自動で表示されて、次のような画面が確認できます。

基本背景

Storybookは次のように基本的lightとdarkの背景を提供しています。

メニューの色を選択したら次のように色が変わることが確認できます。

背景設定や変更

Storybookが提供する基本背景のみでも十分使えますが、私たちがサービスで提供する基本背景と違ってコンポーネントが実際画面違く見える時があります。このように実際サービスで使うバックグラウンド色を基本色背景に設定したり、他の色をメニューに追加する方法について説明します。

Storybookのバックグラウンド色を設定して基本背景を変更するためには.storybook/preview.jsファイルを修正する必要があります。.storybook/preview.jsファイルを開いて下記のように修正します。

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
   ...
  },
  backgrounds: {
    default: 'gray',
    values: [
      {
        name: 'gray',
        value: '#F3F5FB',
      },
      {
        name: 'white',
        value: '#FFFFFF',
      },
      {
        name: 'black',
        value: '#000000',
      },
      {
        name: 'blue',
        value: '#2E48A0',
      },
    ],
  },
};