GMOメイクショップ コアグループでエンジニアをしている池田です。 こちらの記事にもある通り、当プロジェクトではStorybookを導入しました。 Storyファイルを増やしたいということで雛形を自動生成することになりました。 そこでPlopというJavaScriptライブラリを使用して、Storyファイルを自動生成しました。 今回はPlopの使い方について説明したいと思います。

• 対象
• Plopとは？
• セットアップ
• Storyファイルを自動生成
• • hbsファイル
  • plopfile.mjs
  • prompts
  • actions
  • 実行
• まとめ
• 参考

対象

• ファイルの自動生成を行いたい
• 対話形式でファイルの自動生成を行いたい

Plopとは？

CLIを用いてプロジェクト内で一貫したファイルやコードを生成するためのJavaScriptのジェネレーターライブラリであり、以下のような特徴を持っています。

• テンプレート化：Handlebarsなどのテンプレートエンジンを使用して、カスタマイズ可能なファイルテンプレートを作成できます。
• 対話型プロンプト：ユーザーから入力を受け取り、動的にファイルを生成します。
• 柔軟性：JavaScript/Node.jsで設定可能で、既存のプロジェクトに簡単に統合できます。
• 拡張性：プラグインシステムにより機能を拡張できます。

類似のライブラリとして、hygen, scaffdog があります。 hygen は Plop と同じようにHandlebarsを用いるのですが、scaffdog はMarkdownなのでやや柔軟性がない印象でした。hygen と比較してダウンロード数が多く、JavaScriptで柔軟にジェネレーターを作成できる点を評価して Plop を採用しました。

セットアップ

Storyファイルを自動生成

Storyファイルの雛形自動生成にあたり、必要なのはこちらのファイルです。

• hbsファイル
• plopfile.mjs

hbsファイル

hbsファイル（.hbs拡張子）は、Handlebarsテンプレートエンジンで使用されるテンプレートファイルです。Handlebarsは、JavaScriptベースのテンプレートエンジンで、HTMLやその他のテキストベースのドキュメントを動的に生成するために使用されます。Mustache記法(ダブルカーリーブレース {{ }}）を使用して、データをテンプレートにバインディングすることができます。

今回用意したのは以下のファイルです。 この雛形を元にして、"{{ }}"で囲われている変数に動的な値を渡して自動生成するファイルを完成させます。 {{pascalCase name}} のように {{pascalCase 変数名}} とすると、渡された値をパスカルケースに変換することが可能です。 ファイルの生成や変数を渡すのが、後述するplopfile.mjsです。

plopfile.mjs

こちらには自動生成に必要な内容を記述します。基本的には setGenerator という関数を使用します。 第一引数にはアクション名を、第二引数には設定を渡します。設定には3つの内容があります。

• description：実行内容の簡潔な説明
• prompts：対話式で実行する場合に使用します。例えば、メッセージを表示して必要な内容を入力してもらうということができます。
• actions：実行する内容

今回作成したジェネレーターは以下の3つです。3つを使い分けてこれまで作成してきたコンポーネントのStorybook化をスピーディーに行ったり、今後新しいコンポーネントが作成されたら、コミットしたタイミングで自動的にStoryファイルを作成するなど想定して作りました。

• story
• • 単一のコンポーネントのStoryファイルを作成する
• stories
• • 入力したディレクトリ配下にあるvueファイルを検索して、存在したvueファイルの分だけStoryファイルの作成をする
• all-stories
• • プロジェクトのsrc配下にある全てのvueファイル分のStoryファイルを作成する

prompts

入力内容を対話形式で取得するためのプロンプトを設定できます。
設定内容はオブジェクトで設定します。

actions

actions には実行内容が設定されたオブジェクトを配列で定義します。prompts から渡されるデータに基づいて内容を分岐させたい場合は関数で定義し、最終的に実行内容のオブジェクトを返すことも可能です。実行内容のオブジェクトに設定できるプロパティは type によって異なります。今回使用してるものを説明すると以下の通りになります。

実行

package.jsonに以下を追記します。

下記を実行します。

実行するジェネレーターを選択します。今回は指定した配下のvueファイルのStoryファイルを作成する stories を選択します。

対象のコンポーネントのあるディレクトリを入力すると、指定したディレクトリ配下にある複数のコンポーネントのStoryファイルが作成されています！

まとめ

今回Plopを使ってみて、誰でも簡単に扱えるシンプルさがありつつ、実行内容も柔軟にカスタマイズできる便利なライブラリだと感じました。
少ないコードでジェネレーターが作成できますし、シンプルな作りなのでドキュメントを読めばすぐに使い方が分かります。prompts, actions の内容に関数を利用できるので、入力された値に基づいて処理・操作を行うことも簡単でした。 今回の事例ではStoryファイルの作成でしたが、コンポーネントの雛形、テストコードの雛形作成など様々な用途で利用できそうです。また、JavaScriptのライブラリではありますが、他の言語で使用するファイルを自動生成することもできるので、ぜひ試してみてください！

参考

plopjs.com

zenn.dev

◆　他のBlogはこちらから⇒ https://tech.makeshop.co.jp/◆

最後までお読みいただきましてありがとうございました。ご応募お待ちしています！