HTML/CSSを勉強しようと思ってStorybookを使った話

文系、SIer出身エンジニアです。
仕事を始めて5年目になりますが、HTML/CSSに今ひとつ自信が持てません:thinking: 

そんな方、結構いるのではないでしょうか？

StorybookとReactという２つの技術を使う事で、HTML/CSSの学習がイイ感じにできましたという話をします。

React→VueとかAngularとかに置き換えてもイケると思います :thumbsup: 

---

## 目次

1. StorybookとReactとはなんぞや
2. 環境構築
3. コンポーネントの再発明
4. まとめ

---

## StorybookとReactとはなんぞや

### Storybook

> The UI Development Environment
https://storybook.js.org/

UIの開発環境だそうです。

---

> - StorybookでUIコンポーネントのカタログを作ることができる
> - カタログのおかげでデザイナーと認識の齟齬が生まれなくなる
> - アドオンを追加するとStorybookがかなり便利アイテムになる 
> 
> [Storybookがなぜ必要か？(Vue.js編) - qiita](https://qiita.com/masaakikunsan/items/dad8d84807918f3a43cb)

らしいです。

---

アドオンでテストとかも出来て...

> `Storyshots`は`Storybook`のアドオンで、Storybookに登録されているコンポーネントのスナップショットテストをしてくれます。できることはjestのスナップショットテストとほぼ同じです。
> 
> Storyshotsを使うと、コンポーネントごとにテストファイルを用意しなくて良いので手軽にスナップショットテストを導入することができます。
> 
> すでにStorybookを導入していれば、下記ファイルを追加するだけでOKです。
> [Storyshotsが最高すぎる件](https://qiita.com/takanorip/items/786d8391e2bd99b67561)

らしいです。

---

Angularは...

> Storybook v3.3.0で[Angular対応](https://github.com/storybooks/storybook/issues/269)がリリースされたので、さっそく試してみました
> [Angular + Storybook でコンポーネントガイドを作ろう](https://qiita.com/Quramy/items/463ed80f0d6fcd9e3939)

とのことです。

---

### React

javascriptでUIコンポーネントを作る為のライブラリです。何を今さらw

https://reactjs.org/

---

## 環境構築

### create-react-appコマンドでReactプロジェクトを作ります

```bash
$ pwd
# => /Users/shinse/dev
$ node -v
# => v8.11.1
$ yarn -v
# => 1.6.0
$ npm install -g create-react-app
$ npm run create-react-app -v
# => 6.0.0
$ npm run create-react-app ui-challenge
# => npx: 67個のパッケージを4.105秒でインストールしました。
# => Creating a new React app in /Users/shinse/tmp/ui-challenge.
# => ...
# => Success! Created ui-challenge at /Users/shinse/tmp/ui-challenge
```

---

### getstorybookでStorybookの設定を追加します。
 
```bash
$ cd ui-challenge/
$ pwd
# => /Users/shinse/dev/ui-challenge
$ npm i -g @storybook/cli
# => ✨  Done in 13.95s.
$ getstorybook -V
# => 3.4.3
$ getstorybook 
# =>  getstorybook - the simplest way to add a storybook to your project. 
# => ✨  Done in 22.33s.
```

---

### Stroybookの起動

```bash
$ yarn run storybook 
# => info Storybook started on => http://localhost:9009/
```

---

![スクリーンショット 2018-05-11 12.50.55.png](https://qiita-image-store.s3.amazonaws.com/0/52461/fed98a4e-e21a-2293-55b5-0c8022bd74a0.png)

---

Storybookが起動しているのが確認できました :tada: 

---

## コンポーネントの再発明

環境は出来ました。が、何を書いていけば？ :thinking: 

React未経験であれば、Hello, Worldなど書いてみるのもよいでしょう。

https://reactjs.org/docs/hello-world.html

ここでは僕が現在やっている、「有名サイトのコンポーネントを作り直す」チャレンジを紹介します:yum:

---

![スクリーンショット 2018-05-11 13.18.47.png](https://qiita-image-store.s3.amazonaws.com/0/52461/9e4d8968-f8c5-8c5b-933e-c10d61a37a68.png)

---

どこかで見たことのある募集記事のパネルですw

---

手順としては、

1. 練習の題材にする要素を決める
2. まずは開発者ツールなどを使わずに自力で実装してみる
3. 適当な所で開発者ツールを使って、本物通りの実装に変えていく
4. 本物通りにするのは結構ツラいので、どこかで妥協して学んだことをまとめていく

というステップです。

---

途中で中断すると思い出す所から始めないといけない(**この時間にはあまり学びが無い**)ので、自分が使える時間に合わせて3.から始める、などの調整を入れるのがコツです。

4.でしっかりを振り返って、実務などで活用するのもたぶんコツ。

自分の実装と実際に動いている実装を比べる事で、知ってるテク・知らなかったテクの比較が出来て非常に調子がよいので、オススメでした。

---

https://mrdshinse.github.io/ui-challenge/index.html

↑のリポジトリで随時更新していくので、応援してください :relaxed:

---

## まとめ

もともと、Storybookは業務でデザイナーの方と協業することになりそうだったので、コンポーネントカタログを作りたくて調べてました。

Storybookの良い所は

- iframeで作られたsandbox内でピュアなコンポーネントを管理できること
- アドオンなどでDOM構造テストなどできること

などなど既に色々と語られていると思いますが、

冒頭に書いたような

> 仕事を始めて5年目になりますが、HTML/CSSに今ひとつ自信が持てません:thinking: 

といった境遇の方にもオススメできるツールだな、と思って記事にしました。

他にも、こんな使い方いいよ！などあれば教えてくださいませ :bow: では！