React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする

こんにちは。カヤックのReactおじさんこと島津です。

最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。

Reactのコンポーネントが増えてきて管理が大変

Reactを使うとコンポーネントの部品化が捗りますが、開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。

スタイルガイドを導入

スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。これがあるとパーツの再利用性が高まります。例：Codepenのスタイルガイド

人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。

今回はCSSだけではなく、Reactのコンポーネント単位でドキュメントを自動生成してくれる、 react-styleguidist というツールを利用してみます。

DEMO

https://jshimazu.github.io/styleguidist-example/styleguide/

react-styleguidist下準備

設定はリポジトリのREADMEを参照ください。

styleguidist/react-styleguidist

スタイルガイド用のサーバーを起動します。

npm run styleguide

デフォルトだと http://localhost:6060 でスタイルガイドのページが見れます。

今回は以下の構成で、ジェネレータに対応させるにはReact.Componentクラス1つに対して1つのディレクトリを作成する必要があります。

├── README.md
├── npm-debug.log
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── App.js
    ├── components
    │   ├── Button
    │   │   ├── Readme.md
    │   │   ├── index.js
    │   │   └── style.scss
    │   ├── Counter
    │   │   ├── Readme.md
    │   │   ├── index.js
    │   │   └── style.scss
    │   └── Navigation
    │       ├── Readme.md
    │       ├── index.js
    │       ├── logo.svg
    │       ├── menuButton.svg
    │       └── style.scss
    ├── index.css
    └── index.js

Componentの追加

デフォルトでは、ルート配下の全てのReact.Componentモジュールが自動的に読み込まれるようになっています。styleguide.config.jsを追加すれば、ディレクトリの変更は可能です。

ドキュメント内にアンカーリンクができるので「ここはこのコンポーネント使ってね」みたいな連携が捗りそうです。

アンカーリンクの例： https://jshimazu.github.io/styleguidist-example/styleguide/#navigation

PropTypes

PropsTypesを定義していれば、それがそのまま表示されます。

class Counter extends Component {
  static propTypes = {
    /**
     * カウンターの初期値
     */
    defaultCount: PropTypes.number,
  };

オプションとして、上記の様な形でコメントを書くとdescriptionとして表示されます。

Exampleを追記する

Readme.mdにはコードのサンプルを書くと、Exampleとして表示されます。

普通のボタン


 ```

 <Button>Click Me</Button>

 ```


大事なボタン

 ```

 <Button type="primary"\>Click Me\</Button\>

 ```

 危険なボタン

 ```
 <Button type="danger">Click Me</Button>
 ```

運用方法

ローカルでは http://localhost:6060 で起動しながら開発（ちゃんとリアルタイムで反映されます）
チーム全員が閲覧できるテスト環境などへのデプロイと同時に、npm run styleguide を実行し、静的ファイルにビルドします（デフォルトだとルート直下のstyleguideディレクトリにビルドされます）
もしくは、docs/以下にビルドしてコミットする（https://jshimazu.github.io/styleguidist-example/styleguide/）