12周年記念パーティ開催! 2024/5/10(金) 19:00

Storybook入門

全9回

フロントエンドの現場で欠かせない工程の一つである、コンポーネントの開発・保守を手助けするツール、Storybookを解説するシリーズです。

最終回 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を解説します。まずはどのようなツールなのか、概要と主な機能を見てみましょう。