New
I18n with StorybookAutomate with Chromatic
Star74,085
Back to Intro to Storybook
Chapters
  • はじめに
  • 単純なコンポーネント
  • 複合的なコンポーネント
  • データ
  • 画面
  • デプロイ
  • テスト
  • アドオン
  • まとめ
  • 貢献する

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

開発環境に Storybook を導入しましょう
このコミュニティの翻訳は、最新の Storybook バージョンに対応していません。英語ガイドの最新の変更を適用して、この日本語ガイドの更新にご協力ください。 Pull requests を大歓迎します。.

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

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

React 向けの Storybook を構築する

Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、degit を使用してビルド環境をセットアップしましょう。このパッケージを利用することで、テンプレート(アプリケーションの一部をデフォルト設定で構築したもの)をダウンロードし、開発ワークフローの短縮に役立てることができます。

それでは、次のコマンドを実行してください:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn
💡 このテンプレートには本バージョンのチュートリアルに必要なスタイル、アセット、最低限の設定が含まれています。

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

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

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

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

3 つのモード

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

変更をコミットする

この段階で、ローカルリポジトリにファイルを追加しても大丈夫です。以下のコマンドを実行して、ローカルリポジトリを初期化し、これまでに行った変更を追加してコミットしてください。

Copy
git init

つづいて:

Copy
git add .

次に以下を実行します:

Copy
git commit -m "first commit"

最後に:

Copy
$ git branch -M main

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

Keep your code in sync with this chapter. View 9245261 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
単純なコンポーネント
単純なコンポーネントを切り離して作りましょう
✍️ Edit on GitHub – PRs welcome!
Join the community
5,772 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI