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

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

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

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 に合わせて調整するのを忘れないようにしましょう。

プロジェクトのルートフォルダーに .env という名前で、以下の内容のファイルを作成してください:

SKIP_PREFLIGHT_CHECK=true

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

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

# ポート 6006 でコンポーネントエクスプローラーを起動する:
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 のソースファイルがここにあります。

アセットを追加する

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

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

以上です。これでアプリケーションの設定が完了しました。

変更をコミットする

プロジェクトを初期化したとき、Create React App (CRA) が既にローカルリポジトリーを作ってくれています。この段階で、最初のコミットにファイルを追加しても問題ありません。

次のコマンドを実行し、今までの変更を追加して、コミットしましょう。

$ git add .

次に以下を実行します:

$ git commit -m "first commit"

それでは最初のコンポーネントを作り始めましょう!

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