Angular 向け Storybook のチュートリアル
開発環境に Storybook を導入しましょう
このコミュニティの翻訳は、最新の Storybook バージョンに対応していません。英語ガイドの最新の変更を適用して、この日本語ガイドの更新にご協力ください。 Pull requests を大歓迎します。.
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。 この Storybook チュートリアルのバージョンは Angular 向けです。他にも React、 React Native、 Vue、 Svelte and Ember 向けのバージョンがあります。
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)、アプリケーション自体
作業をする対象に応じて、このモードのうち 1 つまたは複数を同時に動かしながら作業します。今は単一の UI コンポーネントを作るのに集中するため、Storybook を動かすことにしましょう。
変更をコミットする
この段階で、ローカルのリポジトリーにファイルを追加しても問題ありません。次のコマンドを実行し、リポジトリーの初期化と今までの変更の追加を行い、コミットしましょう。
git init
次に:
git add .
最後に:
git commit -m "first commit"
それでは最初のコンポーネントを作り始めましょう！