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

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

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

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

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

Angular 向けの Storybook を構築する

Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、degit を使用してビルドシステムをセットアップします。このパッケージを使うと、テンプレート (既定の設定で部分的に構築されているアプリケーション) をダウンロードできるので、開発フローを加速できます。

次のコマンドを実行してください。

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

cd taskbox

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

ここでアプリケーションのいくつかの環境が正常に動作しているかクイックに確認できます。

# Run the test runner (Jest) in a terminal:
npm run test

# Start the component explorer on port 6006:
npm run storybook

# Run the frontend app proper on port 4200:
npm run start

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

3 つのモード

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

変更をコミットする

この段階で、ローカルのリポジトリーにファイルを追加しても問題ありません。次のコマンドを実行し、リポジトリーの初期化と今までの変更の追加を行い、コミットしましょう。

Copy
git init

次に:

Copy
git add .

最後に:

Copy
git commit -m "first commit"

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

Keep your code in sync with this chapter. View a9b656f 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,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI