最終回 GitHubとChromaticの連携と便利な設定
Chromatic上での視覚的な差分による確認や、チームによるレビュー方法を解説します。これらは、GitHubのプルリクエストごとにChromaticと紐付けると便利です。
第8回 公開(Chromaticの設定)
チームのメンバーと共有できるように、作成したStorybookを公開します。任意のホスティングサービスにデプロイできますが、ここではStorybook専用のCI・ホスティングサービスの「Chromatic」を利用してみましょう。
第7回 アドオンパネル(Interactions)
エッセンシャルアドオンのInteractionsについて解説します。ユーザーの操作をシミュレートするコードを定義しておくと、動作に問題がないかデバッグすることが可能になります。
第6回 アドオンパネル(ControlsとActions、アドオンの追加)
アドオンパネルとアドオンについて解説します。Storybook導入時にインストールされるアドオンのほか、個別に追加インストールする方法も紹介します。
第5回 Docs(MDXによるドキュメント)
マークダウンの中にJSXを埋めるMDXを利用してドキュメントを作成していきます。DocsPageに比べて少し手間はかかりますが、ドキュメントの自由度が高くなります。
第4回 Docs(DocsPageによるドキュメント)
Storybookのドキュメントとなる、「Docs」を解説します。今回は、自動的に生成されたDocsPageを見ていきますが、これにコンポーネントの説明文や各引数の型や情報を加え、充実させていきましょう。
第3回 サイドバー・ツールバー・Canvas
Storybookをブラウザ上で見たときに利用できる、いくつかの機能を詳しく見ていきます。さらにカスタマイズする方法も紹介するので、自分の使い方に合った表示にしてみましょう。
第2回 インストールとstoriesファイルの作成
Storybookをインストールし、実際にファイルやコードを触りながらStorybookの基本的な使い方を見てみます。複数のストーリーを定義するstoriesファイルを作成しましょう。
第1回 Storybookの概要とその機能
コンポーネントの品質を向上させ、それを保持することを強力にサポートしてくれるツール、Storybookを解説します。まずはどのようなツールなのか、概要と主な機能を見てみましょう。