Doczを使ってみた

Doczを使ってみた:

背景

• 
  この勉強会でこの話を聞いたのがきっかけでDoczを知った
• 実際に触ってみたので簡単な使い方を記事にする

Doczとは

• 公式サイト
  
  
  • https://www.docz.site/
• コンポーネントガイドを作ることができるライブラリ
• 
  Storybookのようなもの

Doczの特徴

• mdxで書くことができる
  
  
  • markdown + jsx
  • 基本はmarkdownで書くことができる
  • markdownの中にjsxタグを埋め込むことができる
• 設定ファイルなしで作ることができる

使い方

HelloWorldまで

• ライブラリのインストール

yarn add -D docz 
# or 
npm i -D docz 

• mdxファイルを作る
  
  
  • プロジェクト内ならどこでもOK

hello.mdx

--- 
name: Hello 
--- 
 
# Hello world 
 
Hello! 

• 起動

yarn docz dev 
# or 
npx docz dev 

• ページにアクセス
  
  
  • 
    http://localhost:3000/ で起動するのでアクセスするとHello Worldを確認できる

Reactコンポーネントを埋め込む

• 単純なボタンコンポーネントのサンプル

--- 
name: Button 
--- 
 
import { Playground, PropsTable } from 'docz' 
import Button from './Button' 
 
# Button 
 
- ボタンコンポーネント 
 
## Usage 
 
<Playground> 
  <Button onClick={() => alert('hello!')}>ボタン</Button> 
</Playground> 
 
<Playground> 
  <Button wide onClick={() => alert('hello!')}>ボタン</Button> 
</Playground> 
 
## Props 
 
<PropsTable of={Button} /> 

• 上記のmdxを作ると以下のような画面になる

特徴1

• 表示したいコンポーネントを<Playground>で囲うと、描画内容とjsxタグが自動で表示される
• 図中で赤枠で囲っているようにjsxだけでなく描画後のhtmlも確認できる

特徴2

• 
  <PropsTable of={Button} />とすることでPropsの情報を自動的にテーブルにしてくれる
• FlowでもPropTypesでもちゃんと拾ってくれる
• サンプルの例だと以下のような感じで定義している

Button.js

// ...省略 
 
// flowの場合 
type Props = { 
  /** 横幅いっぱいにするかどうかにするかどうか */ 
  wide?: boolean, 
}; 
 
// PropTypesの場合 
Button.propTypes = { 
   /** 横幅いっぱいにするかどうかにするかどうか */ 
   wide: PropTypes.bool, 
 }; 
 
// DefaultPropsはFlowでもPropTypesでも共通 
Button.defaultProps = { 
  wide: false, 
}; 

(参考)Storybookと比較

• 上の例で示したボタンコンポーネントのガイドと同じものをStorybookで作ってみる
• セットアップは割愛
• Docz版と同じものを再現するには@storybook/addon-infoが必須
  
  
  • それ以外はなくても再現できる

stories.js

import React from 'react'; 
import { storiesOf } from '@storybook/react'; 
import { text } from '@storybook/addon-knobs'; 
import { action } from '@storybook/addon-actions'; 
import { withInfo } from '@storybook/addon-info'; 
 
import Button from './Button'; 
 
storiesOf('Button', module) 
  .addDecorator(withInfo) 
  .addParameters({ 
    info: { 
      text: 'ボタンコンポーネント', 
      inline: true, 
    }, 
  }) 
  .add('通常パターン', () => ( 
    <Button onClick={action('click!!')}> 
      {text('label', 'ボタン')} 
    </Button> 
  )) 
  .add('幅広パターン', () => ( 
    <Button onClick={action('click')} wide> 
      {text('label', 'ボタン')} 
    </Button> 
  )); 
 

まとめ

• できることはStorybookと同じか少ないけど、これだけの内容を設定ファイルなしでできるのはお手軽だと思う！