💡
Plopで簡単にコンポーネントを自動生成する方法

2024/12/14に公開
この記事は SmartHR Advent Calendar 2024 シリーズ2の14日目の記事です。

昨日はshunさんのハックアワーのすすめ ── チームに「遊び」を取り入れ、中長期的な成長につなげよう！でした！

 はじめに開発の中で、React コンポーネントを毎回手動で作成することが面倒に感じたことはありませんか？

特に新規プロジェクトを始めたばかりのときなど、毎回同じ作業を繰り返すのは非効率に感じることもありますよね。

そこで、今回は React コンポーネントを簡単に自動生成できるツール「Plop」を紹介します。

 Plop とはPlop は、コードジェネレーターフレームワークです。

Plop を使うことで、対話形式で簡単にコンポーネントやファイルを自動生成することができます。

Plop は、テンプレートエンジンの Handlebars を使用しており、テンプレートファイルを作成することで、自動生成するコードの形式をカスタマイズすることができます。

 Plop のインストールインストール方法は、以下のコマンドを実行します。
# pnpmの場合
pnpm add -D plop

# npmの場合
npm install --save-dev plop

# yarnの場合
yarn add --dev plop

 Plop の設定Plop を使ってコンポーネントを自動生成するために、Plop の設定ファイルを作成します。

プロジェクトのルートディレクトリにplopfile.jsという名前のファイルを作成し、以下のように記述します。
plopfile.js
export default function (plop) {
  plop.setGenerator('component', {
    description: '新規コンポーネントを作成する',
    prompts: [
      {
        type: 'input',
        name: 'path',
        message: 'どのディレクトリにコンポーネントを作成しますか？（例 pages/hoge）'
      },
      {
        type: 'input',
        name: 'name',
        message: 'コンポーネント名は何にしますか？（例 FugaButton）'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{path}}/{{pascalCase name}}/index.ts',
        templateFile: 'plop-templates/index.ts.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{path}}/{{pascalCase name}}/{{pascalCase name}}.tsx',
        templateFile: 'plop-templates/Component.tsx.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{path}}/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
        templateFile: 'plop-templates/Component.stories.tsx.hbs',
      },
      {
        type: 'add',
        path: 'src/components/{{path}}/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
        templateFile: 'plop-templates/Component.test.tsx.hbs',
      }
    ]
  })
}
設定ファイルでは、plop.setGeneratorメソッドを使ってジェネレーターを定義します。

ジェネレーターには、description、prompts、actionsのプロパティを指定することができます。

 descriptiondescriptionプロパティは、このジェネレーターが何をするかについての簡単な説明を指定します。

 promptspromptsプロパティは、対話形式でユーザーに質問をするためのプロンプトを指定します。

promptsには、type、name、message、defaultなどのプロパティを指定することができます。
type: プロンプトの種類を指定します。input、number、confirm、list、rawlist、expand、checkbox、password、editorのいずれかを指定します。
name: プロンプトの名前を指定します。
message: プロンプトで表示させたいメッセージを指定します。
default: デフォルト値を指定します。

 actionsactionsプロパティは、コンポーネントを自動生成するためのアクションを指定します。

actionsには、type、path、templateFileなどのプロパティを指定することができます。
type: アクションの種類を指定します。add、modify、addManyなどを指定することができます。
path: 生成するファイルのパスを指定します。

{{path}}や{{pascalCase name}}などの変数を使って、動的にファイルパスやファイル名を生成することができます。

templateFile: テンプレートファイルのパスを指定します。
細かくカスタマイズすることもできますが、今回はnameプロンプトを使って、パスとコンポーネント名を入力するだけでコンポーネントを自動生成する設定を行います。

カスタマイズしたい場合は、公式ドキュメントを参照してみてください。

 テンプレートファイルの作成次に、コンポーネントのテンプレートファイルを作成します。

plopfile.js で指定したplop-templatesディレクトリにComponent.tsx.hbsという名前のファイルを作成し、以下のように記述します。
Component.tsx.hbs
import { FC } from 'react';

export const {{pascalCase name}}: FC = () => {
  return (
    <div>{{pascalCase name}}</div>
  );
};
{{pascalCase name}} は、例えば「sampleDialog」という入力に対して「SampleDialog」というように、パスカルケースに変換されます。このように、name プロンプトで指定したコンポーネント名が、自動的にフォーマットされて生成されます。

他にも、{{camelCase name}}、{{snakeCase name}}、{{kebabCase name}}などの変数を使って、様々な形式でコンポーネント名を生成することができます。

ここでは、tsxファイルをテンプレートとして紹介していますが、必要に応じて storybook や test ファイルなどもテンプレートとして用意することができます。

 コンポーネントの自動生成Plop を使ってコンポーネントを自動生成するための、npm スクリプトを追加します。

package.jsonファイルに以下のスクリプトを追加します。
package.json
{
  "scripts": {
    "generate-component": "plop"
  }
}
コンポーネントを自動生成するために、以下のコマンドを実行します。
# pnpmの場合
$ pnpm generate-component

# npmの場合
$ npm run generate-component

# yarnの場合
$ yarn generate-component
パスとコンポーネント名を入力するプロンプトが表示されるので、入力します。

入力後、指定したディレクトリにコンポーネントファイルが自動生成されます。

実行例は以下のようになります。
$ pnpm generate-component

> sample@1.0.0 generate-component /path/to/project/sample
> plop

? どのディレクトリにコンポーネントを作成しますか？（例 pages/hoge） parts
? コンポーネント名は何にしますか？（例 FugaButton） SampleDialog
✔  ++ /src/components/parts/SampleDialog/index.ts
✔  ++ /src/components/parts/SampleDialog/SampleDialog.tsx
✔  ++ /src/components/parts/SampleDialog/SampleDialog.stories.tsx
✔  ++ /src/components/parts/SampleDialog/SampleDialog.test.tsx

 まとめ今回は、Plop を使用して React コンポーネントを自動生成する方法を紹介しました。

Plop を使うことで、コンポーネントの自動生成を簡単に行うことができ、時間の節約ができました。

手動で繰り返し作業をすることなく、必要なコンポーネントを素早く作成できるため、開発における生産性が向上することが期待できますね。

今後も、開発効率を向上させるためのツールやテクニックを積極的に取り入れていきたいと思います！
おわり
はじめに

Plop とは

Plop のインストール

Plop の設定

description

prompts

actions

テンプレートファイルの作成

コンポーネントの自動生成

まとめ

Discussion
