Storybook入門 第1回 Storybookの概要とその機能
コンポーネントの品質を向上させ、それを保持することを強力にサポートしてくれるツール、Storybookを解説します。まずはどのようなツールなのか、概要と主な機能を見てみましょう。
- カテゴリー
- 開発ツール
発行
はじめに
昨今のモダンなフロントエンドの開発現場では、効率的に開発を進め、なおかつデザインのルールを崩さないようにするために、画面を構成する要素を「コンポーネント」という単位で分け、これを再利用しながら全体を構築する方法が多く採用されるようになってきています。
これは、コンポーネントの品質がサイトやアプリケーションの品質に大きく影響することを意味します。規模の大きいプロジェクトになれば、コンポーネントの機能も数も膨大になるでしょう。そのため、この「コンポーネント」をどうやって管理していくかというのが開発／運用時に重要であり、悩ましいポイントでもあります。
Storybookは、このコンポーネントの品質を向上・保持するのを強力にサポートしてくれるツールです。
コンポーネントとは何なのか。これは言ってしまえば開発者の塩梅次第ですが、具体的には、ボタン、ダイアログ、フォームのコントロール、パンくずリストなどを「コンポーネント」として管理することがあります。
たとえば、次のコードはReactのボタンのコンポーネントです。sizeのpropsにsmallを渡していますが、smallでなくlargeにしたら見た目が変わります。そうすることで、別のページのボタンとして使うこともできるでしょう。
コンポーネントの一例
<Button size="small">ボタン</Button>Storybookが対応しているライブラリやフレームワーク
このシリーズではコンポーネントはReactのコードを取り上げていきますが、StorybookはVue.js、Angular、Svelteなどのコンポーネント機能のあるライブラリやフレームワークのほか、Web Componentsにも対応しています。
この例からもわかるように、コンポーネントには、次のような特徴があると考えられます。
- 渡すprops（引数）によって、見た目や機能が変化する
- さまざまな場所で使い回すことが可能
この特徴は関数と似ているかもしれません。これは筆者の個人的な見解ですが、品質の維持・向上を目指す目的で関数にJestのような単体テストツールがあるように、 コンポーネントの品質の維持・向上のためにStorybookがあると考えています。
コンポーネントが関数と比べて厄介なのは、「見た目」の確認やテストも必要になるという点です。Storybookはこの問題を解決するための大きな助けとなり得るツールです。Storybookを使うと、コンポーネントについてのテストを書くことができるだけでなく、柔軟なコンポーネントのプレビューも可能になります。プロジェクトメンバーとの意思疎通をスムーズにするのにも一役買ってくれます。
先ほど関数と比較しましたが、関数の仕様を他のメンバーと共有したい場合、わかりやすい関数名と引数名や型、ちょっとしたコメントやドキュメントが用意されていれば十分です。もちろん、ソースコードがきれいで読みやすければ、それに越したことはないでしょう。また関数であれば、共有するメンバーはエンジニアに限定されていても問題ありません。
ではコンポーネントはどうでしょうか？ 動作や仕様はコンポーネント名やpropsからある程度わかるかもしれませんが、見た目がどのようになるのか、propsによってどう変化するか、こればかりは実際にブラウザ上で動かして見てみないと把握するのは難しいでしょう。
また、コンポーネントの具体的な仕様を共有するメンバーは、エンジニアはもちろんですが、デザイナーやディレクター、後述するデザインシステムと紐付けるのであれば、プロジェクトや組織をまたいだメンバーにも共有したくなります。
Storybookは、このためにプレビューや共有のための機能も備えています。ここで紹介した機能を具体的にどのように提供してくれるのか、まずはそれを紹介します。
Storybookを使う際の注意点
Storybookは強力なツールですが、ただ入れれば後は手間いらずというものではありません。開発を進めながら、WebアプリケーションやWebサイトの更新にあわせ、Storybook自体も更新していかなければならないため、運用体制や保守するためのコストを考えておく必要があります。この連載を判断材料の一つとしていただければ幸いです。
Storybookの機能
プレビューと共有
Storybookを使うとどんなものが作れるのか、まずは実際に見てもらうのが早いでしょう。公式のチュートリアルによって完成したものが公開されているので確認してみてください。
Storybookを構築してデプロイすれば、次のようなサイトが閲覧可能になります。
【ワンポイント】公開Storybook
自社で開発したコンポーネントのStorybookを公開している企業もあります。ぜひ、参考にしてみてください。
上記の2社は、後述するデザインシステムも公開しています。
左側のナビゲーションに、各コンポーネントとそのコンポーネントの「ストーリー」の一覧が列挙されます。ストーリーとは、公式ドキュメントによればコンポーネントの「レンダリングされた状態」を「キャプチャ」すると説明されています。
「レンダリングされた状態」というのは具体的にはコンポーネントに渡されるpropsの値、HTMLの属性、子要素・テキストなどの組み合わせによって表示される状態のことを指します。ストーリーは、この組み合わせをあらかじめ定義しておくことで、さまざまなコンポーネントの状態をブラウザ上ですばやくプレビューできるようにするものです。
例として、上記チュートリアルに登場しているTaskコンポーネントを見てみましょう。次のストーリーが用意されています。
- チェックボックスにチェックが入っていないデフォルトの状態（Default）
- 右端のスターがピン留めされた状態（Pinned）
- チェックボックスにチェックが入った完了の状態（Archived）
- タスク名が長文の状態（Long Title）
上部のナビゲーションのCanvasタブからは、プレビューの状態を変化させることができます。たとえば、プレビューの拡大／縮小、画面幅の変更、ダークモードでの確認のための背景色変更といった機能が提供されます。次の図は、プレビューの背景色を変更するポップアップを開いているところです。
Docsタブはコンポーネントの詳細を説明するドキュメントを用意しておけば、その内容を確認することができます。各機能の詳細については、このシリーズで解説していきます。
このようにプレビューがWebサイトとして公開できるため、各コンポーネントの詳細について他のメンバーとも共有できます。
【ワンポイント】Storybookによってコンポーネントがページから分離される
各コンポーネントをそれぞれ単体でプレビューできるようにすることは、ページからコンポーネントを分離するという副次的な効果もあります。
コンポーネントの開発をする際、ページで必要になるコンポーネントを、そのページと同時進行で作り込むことはないでしょうか？
その場合、コンポーネントが渡されたpropsによってどのように見た目や機能が変化するのかを、ページ上に配置したコンポーネントのpropsの値を直接変えて確認することになります。そのため、どうしてもページとコンポーネントの結びつきが強くなってしまいます。
ですが、Storybookを利用すればコンポーネントそのものをさまざまなパターンで確認・検証ができるので、コンポーネントが使用されているページとの依存関係の分断を意識して開発しやすくなります。
コンポーネントのテストや検証
Storybookを使うことで見た目を含むコンポーネントのテストがしやすくなります。コンポーネントのテストには具体的に次のようなものがあります。
これらの情報やテスト・検証結果は、主に画面下部にある各タブ内に表示されます。たとえば、イベントの動作テストを表示するActionsタブや、ユーザーの行動をシミュレートした結果を表示するInteractionsタブが用意されています。
これらのテストや検証については、このシリーズで詳しく解説します。
最後のビジュアルリグレッションテストについては、Storybookの開発チームによって運営されているChromaticというサービスを利用することで簡単に環境を構築できます。StorybookとChromaticを使ってビジュアルリグレッションテストをする方法も、このシリーズで紹介する予定です。
また、このChromaticはStorybookをビルド・デプロイして、サイト上に公開する機能も備えています。先ほど、紹介した公式チュートリアルのStorybookのサイトもChromatic上に公開されています。
デザインシステムのためのStorybook
現代はデジタル社会といわれるように、最近ではさまざまなサービス・製品に、Webサービスやスマートフォンアプリがセットで提供されることが多くなっています。それに伴いデザインシステムが注目を集めています。
デザインシステムとは、組織やチームで共通言語や視覚的な一貫性を作成・整理し、デザインのための一連のガイドラインや標準を管理するものです。デジタル庁がデザインシステムへの取り組みを始めていることからも、海外のみならず日本でも注目が高まっていることがわかります。
このデザインシステムには、プロジェクト内で使用されるUIコンポーネント集を含めることが多いです。
Storybookには、UIコンポーネントのプレビューを他サイトから参照できるようにする機能があります。具体的には、特定のUIコンポーネントの表示だけを確認できるURLを作る機能があり、これをiframeを経由して表示させることができます。
直接Storybookを利用しないにしても、デザインシステム内でUIコンポーネントのコンテンツを作る際に、Storybookがその手助けになることは間違いないでしょう。
国内の事例
日本国内の事例としてSmartHR社のデザインシステムであるSmartHR Design Systemが公開されていて、誰でも閲覧できるようになっています。
コンポーネントのページには、SmartHR UIのStorybookのコンポーネントのプレビューをiframeを経由して表示しています。
海外の事例
海外のデザインシステムの事例としては、ShopifyのデザインシステムであるShopify PolarisでもStorybookが使われています。
公式によるデザインシステムへの取り組み
Storybookの公式ブログやチュートリアルでも、Storybookをデザインシステムに組み入れることが積極的に推奨されています。
まとめ
今回はStorybookの概要について解説しました。 次回は実際にStorybookを導入してストーリーを組み立てていく方法について解説します。