PlopでReactコンポーネントのひな形を生成する

はじめに

Reactでコンポーネントを作成する際、index.ts、○○.tsx、○○.test.tsx、○○.stories.tsxの4つを作成しなければなりません。
大変ですので、テンプレートからこの4つのお決まりのファイルを生成できるようにます。

今回はPlopというツールを使って生成できるようにしていきます。

インストール

npm i -D plop

コマンドの追加

package.jsonのscriptsに以下のコマンドを追加します。

"plop": "plop"

設定の追加

こちらのファイルを作成することで、ひな型のファイルの生成の設定を作成できます。

plopfile.js

export default function (
  /** @type {import('plop').NodePlopAPI} */
  plop
) {
  plop.setGenerator("component", {
    description: "Reactコンポーネントを作成します",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "コンポーネント名を入力してください（例 Button）",
      },
      {
        type: "input",
        name: "path",
        message:
          "コンポーネントを生成するパスを入力してください（例 src/components/parts/Button）",
      },
    ],
    actions: [
      {
        type: "add",
        path: "{{path}}/{{name}}.tsx",
        templateFile: "plop-templates/component/Component.tsx.hbs",
      },
      {
        type: "add",
        path: "{{path}}/index.ts",
        templateFile: "plop-templates/component/index.ts.hbs",
      },
      {
        type: "add",
        path: "{{path}}/{{name}}.test.tsx",
        templateFile: "plop-templates/component/test.tsx.hbs",
      },
      {
        type: "add",
        path: "{{path}}/{{name}}.stories.tsx",
        templateFile: "plop-templates/component/stories.tsx.hbs",
      },
    ],
  });
}

各ファイルのテンプレートファイルを作成する

作成したい4つのテンプレートファイルを作成します。

コンポーネントのテンプレート

plop-templates/component/Component.tsx.hbs

export default function {{pascalCase name}}({ children }: { children?: React.ReactNode }) {
  return <>{children}</>;
}

index.tsのテンプレート

plop-templates/component/index.ts.hbs

export { default } from "./{{pascalCase name}}";

テストのテンプレート

plop-templates/component/test.tsx.hbs

import { render, screen } from "@testing-library/react";
import { expect, test } from "vitest";

import {{pascalCase name}} from ".";

test("{{pascalCase name}}に文字が表示されること", async () => {
  render(<{{pascalCase name}}>{{pascalCase name}}</{{pascalCase name}}>);

  expect(screen.getByText("{{pascalCase name}}")).toBeTruthy();
});

storiesのテンプレート

plop-templates/component/stories.tsx.hbs

import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react";

import {{pascalCase name}} from ".";

const meta: Meta<typeof {{pascalCase name}}> = {
  title: "{{pascalCase name}}",
  component: {{pascalCase name}},
};

export default meta;

export const Default: StoryObj<typeof {{pascalCase name}}> = {
  args: {
    children: "{{pascalCase name}}",
  },
};

生成してみる

以下のコマンドを実行します。

npm run plop

すると、対話形式でコンポーネント名とコンポーネントを生成するパスを入力出来ます。
入力すると、ファイルが生成されます🙌

おわりに

ひな型のファイルを楽に生成できるようになりました🙌
テストファイルとstoriesファイルが生成されるようになるので、
それを意識した開発をしようという気させてくれます✨