見出し画像

[AIDD Lv.2]PlopでAI生成を型化！ 大量コードも一貫品質で量産する秘策

koふみ

AIコーディングエージェントにコードを生成させて、毎回異なるファイル構造でウンザリした経験はありませんか？
Plop を使えば、チームのベストプラクティスを一瞬で再現できます。
マイクロジェネレーターがAI駆動開発を別次元へ引き上げるしくみを見ていきましょう。

Plop とは？

Plop は “マイクロジェネレーターフレームワーク”――対話式プロンプト（inquirer）とテンプレートエンジン（handlebars）を橋渡しし、小さなコマンド一発で一貫性あるコードやファイル構造を自動生成します。

  • 作業時間の短縮: 雛形探し・コピペがゼロ

  • コンテキストスイッチ削減: “正しいやり方” が “最も簡単なやり方” へ

  • ナレッジの共有: チームのベストプラクティスをコードとして固定

AI駆動開発（AIDD）でも、エージェントが生成を始める“初期コンテキスト”として Plop テンプレートを活用することで、コード品質のムラを防ぎつつ素早く量産できます。

インストール

  1. プロジェクトローカル （開発依存）

   npm install --save-dev plop

  1. グローバル（推奨） —CLI で直に呼び出しやすく

   npm install -g plop

基本の plopfile.js を作る

// plopfile.js
export default function (plop) {
  plop.setGenerator('basics', {
    description: 'シンプルなスケルトン',
    prompts: [],  // ユーザーへの質問
    actions: []   // ファイル生成 / 変更手順
  });
}

CommonJS 環境なら module.exports = function(plop){ ... } でもOK。
package.json の "type": "module" 設定と合わせて書き方を選びましょう。

React コンポーネントを自動生成するサンプル

実務でも即使える例を見てみます。

plopfile.js

export default function (plop) {
  // 例: 文字列を大文字にするカスタムヘルパー
  plop.setHelper('shout', (txt) => txt.toUpperCase());

  plop.setGenerator('react-component', {
    description: 'React コンポーネント一式を生成し index.ts へ自動追記',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'コンポーネント名は？'
      }
    ],
    actions: [
      // 新規ファイルを3つ作成
      {
        type: 'add',
        path: 'src/components/{{properCase name}}/{{properCase name}}.tsx',
        templateFile: 'plop-templates/react-component.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{properCase name}}/{{properCase name}}.module.css',
        templateFile: 'plop-templates/react-css.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{properCase name}}/{{properCase name}}.test.tsx',
        templateFile: 'plop-templates/react-test.hbs'
      },
      // 既存 index.ts へエクスポートを追記
      {
        type: 'modify',
        path: 'src/components/index.ts',
        pattern: /(\/\/ COMPONENT_EXPORTS)/,
        template: "export { default as {{properCase name}} } from './{{properCase name}}/{{properCase name}}';\n$1"
      }
    ]
  });
};

properCase は組み込みヘルパーで sampleButton → SampleButton に整形。
ファイルパスとコード中で同じ変換が使えるのがポイントです。

テンプレート例

plop-templates/react-component.hbs

import React from 'react';
import styles from './{{properCase name}}.module.css';

type {{properCase name}}Props = {
  children?: React.ReactNode;
};

// {{properCase name}} コンポーネント
const {{properCase name}}: React.FC<{{properCase name}}Props> = ({ children }) => {
  return (
    <div className={styles.container}>
      {children}
    </div>
  );
};

export default {{properCase name}};

plop-templates/react-css.hbs

.container {
  /* ボーダーと余白だけを持つシンプルなスタイル */
  padding: 1rem;
  border: 1px solid #ccc;
}

plop-templates/react-test.hbs

import { render } from '@testing-library/react';
import {{properCase name}} from './{{properCase name}}';

test('{{properCase name}} renders children', () => {
  const { getByText } = render(<{{properCase name}}>hello</{{properCase name}}>);  // 子要素を描画
  expect(getByText('hello')).toBeInTheDocument();  // DOM へ描画されたことを確認
});

index.ts

// COMPONENT_EXPORTS

実行してみよう

npx plop

実行すると、まず plopfile.js にある prompts に従って 「コンポーネント名は？」 と尋ねられます。そこで名前を入力すると、同じく plopfile.js の actions に沿って必要なファイルが一気に生成されます。

? コンポーネント名は？ Sample
✔  ++ \src\components\Sample\Sample.tsx
✔  ++ \src\components\Sample\Sample.module.css
✔  ++ \src\components\Sample\Sample.test.tsx
✔  +- \src\components\index.ts

全ファイルが一気に生成 & 既存ファイルも自動追記。人手でのミスやフォーマットゆらぎが一切ありません。

よく使うアクションのバリエーション

  • addMany ― まとめて複数ファイル生成。デザインシステムなど大量の雛形配布に便利。

  • append ― 既存ファイルの末尾へ追記。Redux のリデューサーやルーティング設定を自動更新するケースで活躍。

  • modify ― 正規表現で差し替え。先のサンプルのように“フラグコメント”をキーに安全に書き換え。

  • move ― 生成後にパスを変更。ファイル名や構造を後処理で調整したい場合に。

AIDD × Plop の活用シナリオ

AI エージェントが “ゼロからコーディング” するとき、正規テンプレートで初手を切るかどうか が品質を大きく左右します。

  1. テンプレート → コード生成

    • Plop が雛形を用意

    • AI がビジネスロジックや詳細実装を埋める

  2. 一貫したディレクトリ構造

    • エージェント間で“ファイル位置のズレ”が起きず、レビューも簡単

  3. 修正タスクの自動化

    • 既存ファイルへ追記・更新が確実に行われるため、Pull Request の差分がクリーン

AIDD レベル2以降（文脈追加による精度向上）では、「Plop + AI」 が最短ルートです。

まとめ

Plop は “習慣化したベストプラクティスをボタンひとつで再現する装置”。
テンプレートの整地と対話プロンプトで、誰が実行しても同じ構造・同じ品質 のコードを素早く生み出せます。
AIDD 時代の開発では、「AIに投げる前の型作り」として組み込むことで、コーディングエージェントの出力をブレさせない土台 になります。

知識は武器とかけまして、レゴブロックと解く、その心は？
知識のひとつひとつは小さなレゴブロックでも、組み合わせれば世界を変えるアイディアをカタチにする武器になる！

またKnowledge Oasisでお会いしましょう
案内人はkoふみでした

いいなと思ったら応援しよう！