React 向け Storybook のチュートリアル

開発環境に Storybook を導入しましょう

Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React NativeVueAngularSvelte 向けのバージョンがあります。

Storybook と開発中のアプリの関係

React 向けの Storybook を構築する

Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、Create React App (CRA) を使用してアプリケーションを作成し、Storybook とテストフレームワークの Jest を有効にしましょう。それでは、次のコマンドを実行してください:

# アプリケーションを作成する:
npx create-react-app taskbox

cd taskbox

# Storybook を追加する:
npx -p @storybook/cli sb init
このチュートリアルでは、コマンドの実行には基本的に yarn を使用します。 もし yarn ではなく npm を使用したい場合には、上記のコマンドに --use-npm フラグをつけることで、CRA および Storybook の設定を変更することができます。npm を使用してチュートリアルを進めても問題ありませんが、使用するコマンドを npm に合わせて調整するのを忘れないようにしましょう。

作成したアプリケーションが問題なく動くことを次のコマンドで確認しましょう:

# ターミナルでテストランナー (Jest) を開始する:
yarn test --watchAll

# ポート 9009 でコンポーネントエクスプローラーを起動する:
yarn storybook

# ポート 3000 でフロントエンドアプリケーションを起動する:
yarn start
テストのコマンドに --watchAll フラグを付けているのに気づいたでしょうか。これは間違いではありません。このフラグを付けることにより、すべてのテストが実行され、アプリケーションに問題ないことを確実にできます。チュートリアルを進めると、別のテストシナリオも出てきます。必要ならばこのフラグを package.json のテストコマンドに追加することで、テストスイートのすべてのテストが実行されるようになります。

フロントエンド開発の 3 つのモード: 自動化されたテスト (Jest)、コンポーネント開発 (Storybook)、アプリケーション自体

3 つのモード

作業をする対象に応じて、このモードのうち 1 つまたは複数を同時に動かしながら作業します。今は単一の UI コンポーネントを作るのに集中するため、Storybook を動かすことにしましょう。

CSS を再利用する

Taskbox はデザイン要素を GraphQL と React のチュートリアルより再利用しますので、このチュートリアルでは、CSS を書く必要はありません。このコンパイル済み CSS ファイル をコピーして src/index.css に貼り付けてください。

Taskbox の UI

スタイルをカスタマイズしたければ、LESS のソースファイルがここにあります。

アセットを追加する

狙い通りのデザインにするためには、フォントとアイコンのフォルダーをダウンロードし、public フォルダーに配置する必要があります。次のコマンドを実行してください:

npx degit chromaui/learnstorybook-code/public/font public/font
npx degit chromaui/learnstorybook-code/public/icon public/icon
ここでは GitHub からフォルダーをダウンロードするのに degit を使用しています。手動でダウンロードしたければ、それぞれのフォルダーはこちらにあります。

CSS とアセットを追加すると、アプリケーションの描画が崩れてしまいますが、そのままで問題ありません。今はアプリケーションに手はつけません。まずは一つ目のコンポーネントを作り始めましょう!

Next Chapter
単純なコンポーネント
単純なコンポーネントを切り離して作りましょう