React 向け Storybook のチュートリアル
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React Native、Vue、Angular、Svelte 向けのバージョンがあります。
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)、アプリケーション自体
作業をする対象に応じて、このモードのうち 1 つまたは複数を同時に動かしながら作業します。今は単一の UI コンポーネントを作るのに集中するため、Storybook を動かすことにしましょう。
CSS を再利用する
Taskbox はデザイン要素を GraphQL と React のチュートリアルより再利用しますので、このチュートリアルでは、CSS を書く必要はありません。このコンパイル済み CSS ファイル をコピーして src/index.css に貼り付けてください。
アセットを追加する
狙い通りのデザインにするためには、フォントとアイコンのフォルダーをダウンロードし、public フォルダーに配置する必要があります。次のコマンドを実行してください:
npx degit chromaui/learnstorybook-code/public/font public/font
npx degit chromaui/learnstorybook-code/public/icon public/icon
CSS とアセットを追加すると、アプリケーションの描画が崩れてしまいますが、そのままで問題ありません。今はアプリケーションに手はつけません。まずは一つ目のコンポーネントを作り始めましょう！