こんにちは。カヤックの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>
```
運用方法
使ってみた所感
Pros
Cons
- 内部的にはwebpack-dev-serverで動いているので、アプリ本体がwebpack以外のタスクランナーを使用しているときはstyleguide.config.jsに書く設定が冗長になってしまうところ。
まとめ
規模の大きいアプリケーション開発はこういったコンポーネント指向に向かっていく潮流があると思います。(AngularやVue、Web ComponentやPolymer、手法は違えど思想はコンポーネント指向です)
全てが水物のようなフロントエンド界隈ですが、カヤックでは未来のWebフロントエンドを見据えて日々最新技術にチャレンジしていく所存です。