見出し画像

初心者でもできる開発！Storybookを使ったUIコンポーネント開発

栫怜志

エンジニア歴4年目にして初めてStorybookを使ったので備忘録も兼ねてこの記事を書かせていただきました。今回紹介するのは下記の目次通り触りの部分のみなので具体的に知りたい方は他の記事を参照してください🙏


1.はじめに

Storybookとは何か？

Storybookは、UIコンポーネントの開発、テスト、ドキュメント化を容易にするツールです。主にReactやVue、Angularなどのフロントエンドフレームワークで使用されますが、他のフレームワークやライブラリにも適用可能です。Storybookを使うと、個々のコンポーネントを独立して開発し、実際のアプリケーションのコンテキストに依存せずにテストできます。また、コンポーネントのさまざまな状態を視覚的に確認しやすくなり、チーム全体でのコンポーネントの共有やドキュメント化も容易になります。

初心者でも取り組みやすい理由

Storybookは初心者にとって非常に取り組みやすいツールです。その理由は次のとおりです。

  1. 視覚的なテスト環境: Storybookは、UIコンポーネントを実際のアプリケーションから切り離して表示するため、コンポーネントの外観や動作を容易に確認できます。これにより、初心者でもコンポーネントの機能や見た目を簡単にテストできます。

  2. インタラクティブな開発環境: Storybookは、コンポーネントの各状態やプロパティを簡単に切り替えて確認できるインタラクティブな開発環境を提供します。これにより、初心者でもコンポーネントの動作を理解しやすくなります。

  3. 学習コストの低さ: Storybookの基本的な使い方を習得するのに必要な学習コストは比較的低く、公式ドキュメントやコミュニティのサポートも充実しています。そのため、初心者でも比較的短期間で使いこなせるようになります。

  4. コラボレーションの促進: Storybookを使うことで、チーム全体でコンポーネントを共有し、フィードバックを受け取ることが容易になります。初心者でも他のチームメンバーとのコラボレーションを促進することができます。

Storybookの使い方をマスターすることで、初心者でも効果的なUIコンポーネントの開発が可能になります。

2.準備

1. Node.jsのインストール

  1. Node.jsの公式ウェブサイトにアクセスします。

  2. 最新バージョンのNode.jsをダウンロードします。

  3. ダウンロードが完了したら、インストーラーを実行してNode.jsをインストールします。

  4. インストールが完了したら、ターミナル（コマンドプロンプト）を開き、以下のコマンドを入力してNode.jsのバージョンを確認します。

node -v

2. プロジェクトのセットアップ

1. 新しいディレクトリを作成し、そのディレクトリに移動します。

 mkdir my-storybook-project
 cd my-storybook-project

2. プロジェクトを初期化します。以下のコマンドを入力して、npmパッケージを管理するための package.json ファイルを作成します。

npm init -y

3. Storybookのインストール

1. 以下のコマンドを入力して、StorybookのCLIツールをグローバルにインストールします。

npm install -g @storybook/cli

2. Storybookの初期設定を行います。

sb init

このコマンドを実行すると、Storybookの初期設定が完了し、プロジェクトに必要なファイルやディレクトリが作成されます。
以上で、Node.jsのインストール、プロジェクトのセットアップ、Storybookのインストールが完了しました。 Storybookを使って、UIコンポーネントの開発を始める準備が整いました。

3.基本的な使い方

1. コンポーネントの作成

Storybookで表示するコンポーネントを作成します。通常のReactやVueのコンポーネントと同様に、必要なコンポーネントを作成します。たとえば、Reactの場合は src/components ディレクトリ内にコンポーネントを作成します。

// src/components/Button.js

import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

2. Storybookの構成ファイル

Storybookの構成ファイルを使って、Storybookの設定をカスタマイズします。`.storybook` ディレクトリ内に main.js という名前のファイルを作成し、以下のように設定します。

// .storybook/main.js

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

この設定では、`src` ディレクトリ内の .stories.js または .stories.jsx ファイルをStorybookのストーリーとして読み込みます。

3. コンポーネントのストーリーの作成

各コンポーネントに対するストーリーを作成します。これにより、コンポーネントのさまざまな状態やプロパティをStorybookで視覚的に確認できます。コンポーネントと同じディレクトリに、`コンポーネント名.stories.js` という名前のファイルを作成し、ストーリーを記述します。

// src/components/Button.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Default = () => <Button onClick={action('clicked')}>Default Button</Button>;

export const Disabled = () => <Button onClick={action('clicked')} disabled>Disabled Button</Button>;

export const CustomStyle = () => (
  <Button onClick={action('clicked')} style={{ backgroundColor: 'blue', color: 'white' }}>
    Custom Style Button
  </Button>
);

上記の例では、`Default`、`Disabled`、`CustomStyle` というストーリーを作成しています。各ストーリーは異なる状態のボタンを表示しています。 Storybook UIでこれらのストーリーを確認することができます。 以上で、コンポーネントの作成、Storybookの構成ファイルの設定、コンポーネントのストーリーの作成が完了しました。 Storybookを使って、作成したコンポーネントを視覚的にテストし、開発する準備が整いました。

storybook

以上、3項目をまとめさせて頂きました。まだstorybookを使った開発は途中なので知見が深まり次第、再度詳しく記事にさせて頂こうかなと思います。

この記事が気に入ったらサポートをしてみませんか？