React 向け Storybook のチュートリアル
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React Native、Vue、Angular、Svelte、Ember 向けのバージョンがあります。
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 に合わせて調整するのを忘れないようにしましょう。
プロジェクトのルートフォルダーに .env という名前で、以下の内容のファイルを作成してください:
SKIP_PREFLIGHT_CHECK=true
それでは、作成したアプリケーションが問題なく動くことを次のコマンドで確認しましょう:
# ターミナルでテストランナー (Jest) を開始する:
yarn test --watchAll
# ポート 6006 でコンポーネントエクスプローラーを起動する:
yarn storybook
# ポート 3000 でフロントエンドアプリケーションを起動する:
yarn start
--watchAll フラグを付けているのに気づいたでしょうか。これは間違いではありません。このフラグを付けることにより、すべてのテストが実行され、アプリケーションに問題ないことを確実にできます。チュートリアルを進めると、別のテストシナリオも出てきます。必要ならばこのフラグを package.json のテストコマンドに追加することで、テストスイートのすべてのテストが実行されるようになります。
フロントエンド開発の 3 つのモード: 自動化されたテスト (Jest)、コンポーネント開発 (Storybook)、アプリケーション自体
作業をする対象に応じて、このモードのうち 1 つまたは複数を同時に動かしながら作業します。今は単一の UI コンポーネントを作るのに集中するため、Storybook を動かすことにしましょう。
CSS を再利用する
Taskbox はデザイン要素を GraphQL と React のチュートリアルより再利用しますので、このチュートリアルでは、CSS を書く必要はありません。このコンパイル済み CSS ファイル をコピーして src/index.css に貼り付けてください。
アセットを追加する
狙い通りのデザインにするためには、フォントとアイコンのフォルダーをダウンロードし、src/assets フォルダーに配置する必要があります。次のコマンドを実行してください:
npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
以上です。これでアプリケーションの設定が完了しました。
変更をコミットする
プロジェクトを初期化したとき、Create React App (CRA) が既にローカルリポジトリーを作ってくれています。この段階で、最初のコミットにファイルを追加しても問題ありません。
次のコマンドを実行し、今までの変更を追加して、コミットしましょう。
$ git add .
次に以下を実行します:
$ git commit -m "first commit"
それでは最初のコンポーネントを作り始めましょう！