🐶

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

2022/11/23に公開

問題になっていたこと

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

解決策

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

https://github.com/scaffdog/scaffdog

導入手順

  1. プロジェクトにインストール

    yarn add -D scaffdog
    
  2. プロジェクトルートに.scaffdog/config.jsを作成する

    mkdir .scaffdog
    cd .scaffdog
    touch config.js
    
  3. どのテンプレートファイルを読み込むかをconfig.jsで指定する

    export default {
      files: ['*'],
    }
    
  4. コマンド実行時にどういうファイルを作成するか、マークダウンファイルで定義する

    • 今回はパスカルケースで、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 = {}
    ``
    
  5. package.jsonにscaffdog コマンドを追加する

    "scripts": {
    		.
    		.
        "scaffold": "scaffdog generate"
    },
    
  6. yarn scaffold 実行

実際のコマンド実行後

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

参考サイト

https://blog.wadackel.me/2019/scaffdog/
https://zenn.dev/katsumanarisawa/articles/2aeced911e5a0c
https://shimotsu.hatenablog.com/entry/2022/01/21/192613

Discussion