Zenn
🤖

Hygenでコンポーネントの雛形を生成する

2021/08/08に公開
hygen
tech

はじめに

※この記事は下記記事の延長です。下記記事を読まなくても問題ないように書いていますが、ご興味ありましたらご一読ください。
https://zenn.dev/a_da_chi/articles/181ea4ccc39580#スナップショットテスト導入

今回はhygenでコンポーネントの雛形を生成する手順を書いていきたい思います。
例としてReactコンポーネントの雛形を生成する場合のテンプレートを記載していますが、Vueなどのコンポーネントの雛形を生成することも可能ですので、参考になれば幸いです。

導入手順

  1. 必要なパッケージをインストール
  2. npm scriptsをpackage.jsonに追加
  3. テンプレートを追加

必要なパッケージをインストール

yarn add -D hygen

npm scriptsをpackage.jsonに追加

package.json
"scripts": {
  "hygen": "hygen"
}

これでyarn hygen <generator名> <action名>で任意のコンポーネントの雛形の生成が可能になります。
次の手順でテンプレートを追加しますが、_templates/<generator名>/<action名>のようなディレクトリ構成にすることで上記のスクリプトの引数と対応します。

テンプレートを追加

_templates/component/new/prompt.js
const inputValidator = (input) => {
  if (input !== '') {
    return true
  }
}

module.exports = [
  {
    type: 'input',
    name: 'name',
    message: 'コンポーネントの名前を指定してください。ex) Header',
    validate: inputValidator,
  },
  {
    type: 'input',
    name: 'path',
    message: 'src/components以下のパスを指定してください。ex) common',
    validate: inputValidator,
  },
  {
    type: 'toggle',
    name: 'withStory',
    message: '.stories.tsxも一緒に作成しますか？',
    disabled: 'いいえ',
    enabled: 'はい',
    initial: true,
  },
]
_templates/component/new/component.tsx.ejs.t
---
to: src/components/<%= path %>/<%= name %>.tsx
---
import { chakra } from "@chakra-ui/react"
import React from "react"

export type <%= name %>Props = {}

export const <%= name %> = ({ ...props }: <%= name %>Props) => {
  return <chakra.h2><%= name %></chakra.h2>
}
_templates/component/new/stories.tsx.ejs.t
---
to: "<%= withStory ? `src/components/${path}/${name}.stories.tsx` : null %>"
---
import { Meta, Story } from "@storybook/react"
import React from "react"
import { <%= name %>, <%= name %>Props } from "./<%= name %>"

export default {
  title: '<%= h.changeCase.pascal(path) %>/<%= name %>',
  component: <%= name %>,
} as Meta<<%= name %>Props>

type Template = Story<<%= name %>Props>

const Template: Template = (args) => <<%= name %> {...args} />

export const Default: Template = Template.bind({})

_templates/component/new/prompt.jsを追加することでテンプレートで使いたい情報をプロンプトで対話形式で入力することができます。

_templates/component/new/component.tsx.ejs.tと_templates/component/new/stories.tsx.ejs.tは生成されるファイルの雛形です。
プロンプトで入力した情報を使用することで柔軟に内容を変更できます。

おわりに

いかがでしたか。
これでhygenでコンポーネントの雛形を生成することができました。
CSS Moduluesを使用していたり、TDDをしていたりする場合はひとつのコンポーネントを作成する際に必要なファイルがさらに増えると思うので、ぜひ導入してみてください。

Discussion