Web の世界の進歩とともに今までの Web の作り方とは異なるやり方で実装することが増えてきました。
今回から、React とともに使うことであとで調整する時に困りにくくなるやり方を連載で紹介します。
-
第１回. Storybook をつかう
第２回. Redux を Typescript から利用する
第３回. styled-components を使う
第１回目は個別のコンポーネントの調整の役に立つ Storybook についてです。
1. Storybook をつかう
React をつかうとき重要になるのがコンポーネントの設計、実装です。
今回はその助けになる Storybook を紹介します。
Storybook は UI コンポーネントをサンドボックス上で試すカタログのようなものを作るツールです。
これを書くことによって、作ったコンポーネントをアプリ外で試すことができるようになります。
「エラーのときだけ表示されるコンポーネントの調整」のような、場合によっては手間のかかる作業も手軽にできるわけです。
使い方
使い方は非常に簡単で、@storybook/cliをインストール、 react を使ったプロジェクトで getstorybook コマンドを実行すると準備は完了します。
npm install -g @storybook/cli getstorybook
生成される.storybook/config.jsやstories/index.stories.jsを参考にして UI コンポーネントを読み込む様にしましょう。
config.js ファイルで指定されている stories ディレクトリの中で story を書きます。
文字列の配列を props として渡すと、 ul エレメントなどを使ったリストとして表示してくれるコンポーネントGaprotListを作るとします。
その story はこんな感じになります。
import React from 'react'
import { storiesOf } from '@storybook/react'
import GaprotList from '../src/GaprotList'
storiesOf('GaprotList', module)
.add('配列を受け取る', () => <GaprotList items={['Gaprot', 'is', 'Here!']} />)
.add('なにも渡さない時', () => <GaprotList />)
UI コンポーネントの実装はこんな感じ
import React from 'react'
const GaprotList = ({ items }) => <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
export default GaprotList
これをカタログにするには以下のコマンドです
npm run storybook
npm を知ってる方なら、 scripts なんて記述してねーぞ！と思うかもしれませんが、
getstorybookを実行した時に自動的に生成されています。
Storybook started on => http://localhost:6006/と表示されたらブラウザで http://localhost:6006/を開きましょう
写真
3 つめでエラーになりましたね。このコンポーネントは受け取った items でそのまま map を実行しているので、 props を渡さないパターンではエラーになることがわかりました。
1 つのコンポーネントに切り出して storybook にすることで、こういったことを確認しやすくなります。
以下のコマンドも生成されており、実行することで同様の物を静的に出力できます。
npm run build-storybook
できあがったstorybook-static/index.htmlを開けば同じものが表示されます。
これを利用することで、コンポーネントの確認が容易になるでしょう。
API から受け取った値をコンポーネントに渡す、といった場合、アプリ上での確認は大変ですが、
Storybook 上でなら簡単に試すことができますね。
まとめ
本質的に UI のテストは難しいものです。 UI が問題ないものかどうか、それは人間の感覚にかかっているからです。
しかし UI のテストをテストコードでおこなうことが難しくとも、 Storybook なら簡単に試せますね。
静的に出力した物を 常に閲覧できるようにしておけば、エンジニア以外による確認作業もできるでしょう。
うまく生かせれば継続した開発の助けになると思います。
