【ISSUE】Storybook入門

0

2024年12月23日 8:40

はじめに

Storybookは、Reactやその他のフロントエンドフレームワークで使用されるUIコンポーネントを開発、テスト、文書化するためのツールです。
主な目的は、個々のUIコンポーネントを分離して、それらがどのように見えるか、どのように動作するかを視覚的に確認し、テストすることです。
そうすることで、デザイナーとの連携が取りやすくなったり、アプリケーションを起動しなくてもUIコンポーネントの動作確認ができるようになります。

インストール

今回は、ReactとTypeScriptを使用するので、Reactのプロジェクトを立ち上げます。
img

プロジェクトが立ち上がったら、以下のコマンドでStorybookをインストールします。

img
以下のようなファイルが作成されます。
初期では、Button, Header, Pageの3つのストーリーが作成されています。
スクリーンショット 2024-03-07 22.47.20.png

Storybookを起動

Storybookがインストールできたら、Storybookを立ち上げてみます。
img

すると、以下のような画面が表示されます。
スクリーンショット 2024-03-07 22.49.07.png

初期では「Button」「Header」「Page」の3つのストーリーが自動で作成されています。
今回は、Buttonコンポーネントをインポートして、ストーリーを作っていくので、自動で作成された「Storybook」フォルダは削除します。
スクリーンショット 2024-03-07 22.51.19.png

ストーリーを作成しよう

ボタンストーリーを作成するために、まずボタンコンポーネントを作成します。このコンポーネントは、次のようになります。
img

このコンポーネントは、label(ボタンのテキスト)、primary(プライマリボタンかどうかを示すブール値)、onClick(クリック時のイベントハンドラー)の3つのプロパティを受け取ります。primary プロパティは省略可能で、省略された場合はデフォルトで false が設定されます。ボタンのスタイルはprimary プロパティの値に応じて変更されます。

次に、ストーリーを作成します。ボタンコンポーネントに関するストーリーをまとめるためのモジュールを components/Button.stories.tsx ファイルに作成します。以下のようになります
img
それでは、作成したストーリーを見てみましょう。
npm run storybookコマンドを実行し、Storybookを起動します。
すると、以下のように作成した2つのストーリーが表示されます。

スクリーンショット 2024-03-07 22.58.37.png

スクリーンショット 2024-03-07 22.57.55.png

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。