🐶

scaffdogでコンポーネント雛形を作成する

2022/11/23に公開

React

Storybook

tech

問題になっていたこと

Reactでコンポーネントを作る際に、毎回決まったファイルを手動で作成していることが手間に感じた。

解決策

Scaffdog というものを使えば、簡単にコンポーネントの雛形を作成できるみたい。

https://github.com/scaffdog/scaffdog

導入手順

プロジェクトにインストール
```
yarn add -D scaffdog
```
プロジェクトルートに.scaffdog/config.jsを作成する
```
mkdir .scaffdog
cd .scaffdog
touch config.js
```
どのテンプレートファイルを読み込むかをconfig.jsで指定する
```
export default {
  files: ['*'],
}
```

コマンド実行時にどういうファイルを作成するか、マークダウンファイルで定義する

今回はパスカルケースで、2つのコンポーネントを作成する
また、atomic designを採用しているので、それに沿って定義している

component.md

---
name: 'component'
description: 'Generate standard React component.'
root: 'src'
output: '**/*'
ignore: []
questions:
  parts: 'enter parts name（Ex: atoms, organisms ..）'
  module: 'enter directory name（Ex: Button, Drawer ..）'
  name: 'enter component name'
---

# `{{ inputs.parts | lower }}/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}.tsx`

```tsx
import { VFC } from "react";

type Props = {};

export const {{ inputs.name | pascal }}: VFC<Props> = ({}) => {
  return <></>
}
``

# `{{ inputs.parts | lower }}/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}.stories.tsx`

```tsx
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { {{ inputs.name | pascal }} } from './{{ inputs.name | pascal }}'

export default {
  title: 'Example/{{ inputs.name | pascal }}',
  component: {{ inputs.name | pascal }},
} as ComponentMeta<typeof {{ inputs.name | pascal }}>

const Template: ComponentStory<typeof {{ inputs.name | pascal }}> = (args) => <{{ inputs.name | pascal }} {...args} />

export const Primary = Template.bind({})
Primary.args = {}
``

package.jsonにscaffdog コマンドを追加する

"scripts": {
		.
		.
    "scaffold": "scaffdog generate"
},

yarn scaffold 実行

実際のコマンド実行後

コンポーネント名などの質問があり、答えていくとマークダウンで定義したファイルが作成されるようになった🎉！

参考サイト

https://blog.wadackel.me/2019/scaffdog/

問題になっていたこと

解決策

導入手順

実際のコマンド実行後

参考サイト

Discussion