本記事は
Design Week 2023
5日目の記事です。
🌈
4日目
▶▶ 本記事 ▶▶
6日目
💐
はじめまして。フロントエンドエンジニアを目指して日々奮闘中の中平です。この春でNRIネットコムに入社して2年目になります。
昨年の8月に現場配属され、9月頃からはコーダーとしてWeb画面リニューアルの案件に参画しました。初めて参画したこの案件では、画面上に表示するボタンやチェックボックス等のUIパーツ（以下、UIコンポーネントと記載）がStorybookを使って管理されていました。
私自身は途中からの参画だったこともあり、案件参画中はStorybookの導入方法や活用方法をあまり理解しておらず、サイトで使われているUIコンポーネントが一覧で見られるもの程度の認識でした。しかしうまく活用できていれば、さらにスムーズにページのコーディングができていたということに気づき、もう少しStorybookについて学習したいと思いました。
そこで今回は、自身の勉強も兼ねてStorybookでのUIコンポーネント管理について調べたこと、試してみたことを紹介します。
- Storybookとは
- AngularのプロジェクトにStorybookを導入する
- UIコンポーネントを作成してStorybook上で表示する
- プロパティの値が変更できるUIコンポーネントの紹介
- おわりに
Storybookとは
Storybookを簡単に説明すると、UIコンポーネントのカタログを作成するためのツールです。1つのUIコンポーネントでも使用場面やユーザーの操作などに応じて複数の状態をもちますが、Storybookでは各状態の表示を一覧で管理することができます。またStorybook上ではUIコンポーネントのプロパティ値を変更することができ、その場で状態を変化させて表示を確認したり、ボタンを押すなどの操作を行って挙動を確認したりといったことも可能です。
Storybookの導入はReact、Vue、Angularなどの主要なJavaScriptフレームワークで行うことができますが、今回は案件で使用していたものと同じくAngularでの導入紹介を行います。
AngularのプロジェクトにStorybookを導入する
まずはAngularでプロジェクトを作成して、Storybookをインストールします。コマンドを2,3個打つだけの非常に簡単なセットアップ作業です。手順については以下のサイトを参考にしました。
起動してみると、ブラウザが立ち上がりこのようなページが表示されます。これでStorybookの導入が完了しました。
UIコンポーネントを作成してStorybook上で表示する
続いては、UIコンポーネントを作成してStorybook上に表示させてみます。自身の学習も兼ねて、はじめは「Angular向けStorybookのチュートリアル」を参考にUIコンポーネントの開発を進めていきます。こちらのチュートリアルでは、タスク管理リストを作成します。
作成したUIコンポーネントをStorybook上に表示させるとこのような感じです。
画面左側にUIコンポーネントの一覧がありますが、構成は以下のようになっています。ストーリーとは1つのUIコンポーネントがもつ複数の状態1つ1つのことを指し、この例では3つの状態、つまり3つのストーリーをもっていることになります。
TaskListコンポーネントのパーツであるTaskコンポーネントを見てみると、通常状態（Default）、完了状態（Archived）、ピン付き状態（Pinned）のストーリーをそれぞれ確認することができます。
プロパティの値が変更できるUIコンポーネントの紹介
続いては、冒頭で説明した「Storybook上ではUIコンポーネントのプロパティ値を変更することができる」という点について紹介します。今回はセットアップ当初から入っているExampleのButtonコンポーネントを参考に、簡単なボタンを作成してみました。このUIコンポーネントでは、ボタンのテキスト、背景色、文字色、ラインの色、形、サイズ、活性/非活性を切り替えられるようにしています。
画面下部にINPUTSエリアがあり、ここにあるプロパティを変更することによってその場でUIコンポーネントの状態を変化させることができます。またプロパティの変更方法は、文字入力、ラジオボタン、チェックボックス、プルダウン、トグル、カラーピッカー、スライダーなど選択肢の数や目的に応じて選ぶことができます。
ここでは一例として、CustomButtonコンポーネントの赤いボタン（Red）を用いて説明します。プロパティ値は以下のようにあらかじめ設定されています。その場で非活性状態にするなど各種プロパティの値を変更したり、ホバー時やクリック時の挙動を確認したりすることもできます。
おわりに
ページのコーディングを行う中で、使いたいUIコンポーネントと同じものを使っている箇所を別のページから探し、コピペして流用するということが多々ありました。しかし、そのまま流用しただけでは少し見た目が違っているということも何度もありました。Storybookのことを詳しく知らなかった私は、その度にUIコンポーネントのコードを読み解いたりしていたのですが、もしStorybookをうまく活用できていたら、どのプロパティ値をどのように変更すれば望み通りの見た目になるのか、もっと簡単に分かっていたかもしれないのに…と今になって後悔をしています。（UIコンポーネントの中身を理解することも大切なので、無駄な時間ではありませんでした。）
StorybookはUIコンポーネントの開発と同時に整理していくことで、開発者以外の人、つまりUIコンポーネントをパーツとして使うだけの人にも仕組みが分かりやすくなります。そのため、複数人で開発を行っていて、同じUIコンポーネントを色々なページで何度も繰り返し使うというような場合には、特にメリットを発揮すると感じました。もし今後の案件でもStorybookでUIコンポーネントを管理するような機会があれば、今回学んだことを活かしてコンポーネントの開発や管理を行い、ページのコーディングにもうまく役立てていきたいです。
