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

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

StorybookとReactという2つの技術を使う事で、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

らしいです。

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

StoryshotsStorybookのアドオンで、Storybookに登録されているコンポーネントのスナップショットテストをしてくれます。できることはjestのスナップショットテストとほぼ同じです。

Storyshotsを使うと、コンポーネントごとにテストファイルを用意しなくて良いので手軽にスナップショットテストを導入することができます。

すでにStorybookを導入していれば、下記ファイルを追加するだけでOKです。
Storyshotsが最高すぎる件

らしいです。

Angularは...

Storybook v3.3.0でAngular対応がリリースされたので、さっそく試してみました
Angular + Storybook でコンポーネントガイドを作ろう

とのことです。

React

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

https://reactjs.org/

環境構築

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

$ 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の設定を追加します。

$ 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の起動

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

スクリーンショット 2018-05-11 12.50.55.png

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

コンポーネントの再発明

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

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

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

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

スクリーンショット 2018-05-11 13.18.47.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: では!

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.