フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

ジェネレーター(自動生成)好きにぴったりのパッケージ hygen

● hygen

https://www.hygen.io/

対抗馬としてはplopscaffdog というジェネレーターもあります

● hygen の特徴

テンプレートが ejs 形式です。ejsが苦手な場合はおすすめ致しません。

● hygen のインストール

npm install --save-dev hygen
npx hygen init self

● 自作の hygen 自動生成コマンドを作成する

hygen <好きな名前> new

と言うコマンドを作成することができます。

● hygen helloworld new 「A. 自動生成コマンド」を作成する

npx hygen generator new helloworld

_templates/helloworld/new/hello.ejs.t が生成されます。

● hygen helloworld new 「A. 自動生成コマンド」を実行する

npx hygen helloworld new

app/hello.js が自動生成されます。

● hygen helloworld new 「B. 対話型コマンド」を作成する

・1. ファイルを生成

npx hygen generator with-prompt helloworld

_templates/helloworld/with-prompt/hello.ejs.t
_templates/helloworld/with-prompt/prompt.js

が生成されます。

・2. ディレクトリ名「with-prompt」を変更

with-prompt を 短い名前に変更しておくと、実行時に入力が楽になります。

・3. テンプレートを変更

_templates/helloworld/prompt/hello.ejs.t

---
to: app/hello.js
---
const hello = "こんにちは <%= userName %>."

console.log(hello)

_templates/helloworld/prompt/prompt.js

// see types of prompts:
// https://github.com/enquirer/enquirer/tree/master/examples
//
module.exports = [
  {
    type: 'input',
    name: 'userName',
    message: "What's your name?"
  }
]

・4. 自動生成の実行

npx hygen helloworld prompt

app/hello.js が以下の内容で出力されます

const hello = "こんにちは あいうえお."

console.log(hello)

● テンプレートの中で配列を定義する

<%
  myParams = ['param001', 'param002'];
%>
<% ary.forEach(function (v, k) { %>
<p><%= k %>: <%= v %></p>
<% }); %>

● 上書きしますか?プロンプトを表示させずに、強制的に上書きする

コマンドの先頭に HYGEN_OVERWRITE=1 を追加します。

HYGEN_OVERWRITE=1 npx hygen generator new --name foobar

● 大文字、小文字、ケバブケース、キャメルケースなどケースをを変換する

変数 name を変換します

・小文字

<%= name.toLowerCase() %>

・パスカルケース

<%= h.inflection.camelize(name) %>

・キャメルケース

<%= h.inflection.camelize(name, true) %>

・スネークケース

h.changeCase.snakeCase(name)

https://www.hygen.io/docs/templates/

● ある条件の時だけ生成するようにする

to: が null の場合は出力されないのでこれを利用します。

---
to: "<%= redirect ? `/router/routes/${folder.toLowerCase().replace(/ +/g, '')}/routes.redirect.js` : null %>"
unless_exists: true
---

● 変数だけを格納するテンプレートファイルを使う

次のように 他のファイルより、先に読み込ませるためアンダースコア始まりのファイル名を つけたファイルに変数を指定ます。
また to: null としてファイルとしては出力しないようにしておくと、変数だけを格納するテンプレートファイルができます。

_const.ejs.t

---
to: null
---
<%
 // 出力するディレクトリ名入れてください
 outputDir = '05sendFileMessage'
%>
No.2384
11/15 15:23

edit