驚異のコンポーネント生成 - フロントエンド開発におけるプロダクティビティ向上手法

序論

現代のフロントエンド開発において、コンポーネントの生成と管理は非常に重要な課題である。開発者は、効率的かつ迅速に新しいコンポーネントを作成し、プロジェクトの構造を維持する必要がある。本稿では、革命的????なコードジェネレーターであるplopを利用して、劇的な生産性向上を達成する方法を提案する。

手法

本稿で提案する手法では、plopを用いて、簡単な設定とテンプレートの準備を行い、コンポーネント生成を自動化する。開発者は、わずかなコマンド入力で、所望のコンポーネントを生成することができる。

手順

• プロジェクトのルートディレクトリで、plopをインストールする。
• plopfile.jsを作成し、ジェネレーター設定を記述する。
• plop-templatesディレクトリを作成し、コンポーネントの雛形を定義する。
• package.jsonにgenerateスクリプトを追加し、簡単なコマンドでジェネレーターを実行できるようにする。

プロジェクトのルートディレクトリで、plopをインストールする。

npm install -D plop

plopfile.jsを作成し、ジェネレーター設定を記述する。

touch plopfile.js

plopfile.jsの内容を以下に示す．
const componentPath　= の部分で適宜作成したいpathを変更すること

// const { kebabCase } = require("lodash");
// kebabCaseを使用したい場合は{{ kebabCase name}}のように使用する

module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "Create a new component",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Component name",
      },
      {
        type: "list",
        name: "componentType",
        message: "Component type",
        choices: ["atoms", "molecules", "organisms", "templates"],
      },
    ],
    actions: function (data) {
      const componentName = data.name;

      //pathの設定は適宜変更すること
      const componentPath = `src/components/${data.componentType}/${componentName}/`;
      return [
        {
          type: "add",
          path: componentPath + "{{name}}.tsx",
          templateFile: "plop-templates/component.tsx.hbs",
        },
        {
          type: "add",
          path: componentPath + "{{name}}.module.scss",
          templateFile: "plop-templates/component.scss.hbs",
        },
        {
          type: "add",
          path: componentPath + "{{name}}.stories.tsx",
          templateFile: "plop-templates/component.stories.tsx.hbs",
        },
      ];
    },
  });
};

plop-templatesディレクトリを作成し、コンポーネントの雛形を定義する。

mkdir plop-templates 

component.tsx.hbsとcomponent.scss.hbsとcomponent.stories.tsx.hbsをこの例では作成する

component.tsx.hbs

import { memo } from "react";
import styles from "./{{name}}.scss";
export interface {{pascalCase name}}Props {}

const getClassName = () => {
return [].join(" ");
};

const {{pascalCase name}} = memo(({}: {{pascalCase name}}Props) => {
return (
    <>
    </>
);
});

export default {{pascalCase name}};
{{pascalCase name}}.displayName = "{{pascalCase name}}";

component.scss.hbs

//scssを書こう

component.stories.tsx.hbs

import type {Meta, StoryObj} from '@storybook/react';
import {{pascalCase name}}, { {{pascalCase name}}Props } from "./{{name}}";
export default {
    title: "{{componentType}}/{{pascalCase name}}",
    component: {{pascalCase name}},
    argTypes: {
    },
} as Meta;

type  {{pascalCase name}} = StoryObj< typeof {{pascalCase name}}>;

export const Primary : {{pascalCase name}} = {
    args : {
    },
};

package.jsonにgenerateスクリプトを追加し、簡単なコマンドでジェネレーターを実行できるようにする。

  "scripts": {
    "generate": "plop"
  },

実行

$ npm run generate

> front_dev@0.1.0 generate
> plop

? Component name Test
? Component type atoms
✔  ++ src/components/atoms/AdminOkText/Test.tsx
✔  ++ src/components/atoms/AdminOkText/Test.scss
✔  ++ src/components/atoms/AdminOkText/Test.stories.tsx

結果

提案手法を実装することにより、開発者は効率的に新しいコンポーネントを生成できるようになる。これによって、プロジェクト全体の品質とメンテナンス性が向上し、開発者のプロダクティビティが大幅に増加することが期待できる。

結論

本稿では、plopを用いたコンポーネント生成の自動化の実装手順を示した。この手法により、フロントエンド開発の効率と生産性が劇的に向上し、開発者が迅速に高品質なプロダクトを提供できるようになるだろう。

storybookの設定

storybookの設定は以下のページで