Scaffdog で React コンポーネントに必要なファイルを自動生成する

React でコンポーネントを作る際（css modules を使う想定）、基本的には以下の2つのファイルを毎回作っています。

▼ Component/index.tsx

import React from 'react'

import styles from './index.module.scss'

const Component: React.FC = () => {
  return (
    <div className={styles.someStyle}>
      
    </div>
  )
}

export default Component

▼ Component/index.module.scss

.someStyle {
    display: block; // 例
}

この雛形をざっくり作ったり、他のコンポーネントからコピペしてきたりしてから実装を始めているのですが、毎回この作業をやるのが億劫になっており、「なんとかならないかな...」と思っていました。

Scaffdog を使う

そんなとき、このような悩みをズバリ解決するツール「Scafdog」を発見しました。

名前の通りいわゆるスキャフォールディングのためのツールです。Ruby on Rails を勉強したときに、 "scaffold" という機能について知ったのですが、まさにそのイメージでしょうか。

github.com

早速使ってみます。

まず、プロジェクトにインストールします。

yarn add -D scaffdog

次に、プロジェクトのルートに .scaffdog フォルダを作成し、config.js を作成します。

config.js は必須で、これから指定するどのテンプレートファイルを読み込むかを指定します。今回はフォルダのルートにテンプレートファイルを投げ込んでいく想定なので、以下のようにしています。

詳しくはこちら。

▼ config.js

module.exports = {
  files: ['./*'],
}

次に、コマンドによってどのようなファイルを生成するかを決めるテンプレート（マークダウンファイル）を定義します。

ここでは、冒頭に記載した雛形に似たテンプレートを定義しました。（※注: マークダウンファイル内にエスケープ文字 \ を入れています。）

▼ component.md

---
name: 'component'
message: 'Enter Title of your component (no space)'
root: '.'
output: './src/components'
ignore: []
questions:
  name: "Please enter component name.(Convert to Pascal case.)"
---

# {{ inputs.name | pascal }}/index.tsx

\```markdown
import React from 'react'

import styles from './index.module.scss'

type props = {}

const {{ inputs.name }}: React.FC<props> = ({}) => {
  return (
    <div className={styles.wrapper}>

    </div>
  )
}

export default {{ inputs.name }}
\```

<!-- markdownlint-disable -->
# {{ inputs.name | pascal }}/index.module.scss

\```markdown
.wrapper {

}

\```

ここまで完了すれば、設定はOKです。

あとは、ターミナルで scaffdog generate component を実行すれば、出力先フォルダとコンポーネント名（テンプレート内で inputs.name で参照できる）を聞かれるので、それに答えると、無事ファイルが出力されます。

よく使う場合は、npmスクリプトを定義してもいいかもしれません。

▼ ./src/components/CustomButton を生成する例

これで毎回手書きでコンポーネントの雛形を作らなくてよくなった！