hygen のテンプレートで変数を使ってみる

始めに

hygen では変数を利用することで、柔軟にファイルの作成を行うことが可能です。
今回はそれを実際に使ってみようと思います。

以前の hygen 導入までの記事はこちら

変数の埋め込み方

hygen を導入した時に自動で生成されるhello.ejs.t に実はすでに変数が使用されています。

_templates/new_template/hello/hello.ejs.t

---
to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
---
---
to: app/hello.js
---
const hello = ```
Hello!
This is your first hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
```

console.log(hello)

二行目に記載されている、<%= name >、<%= action || 'new' %> がそれに該当します。
name、action を変数として受け取って、展開する書き方になります。
また、<%= hoge || 'fuga' のように記述することで、デフォルト値を設定することも可能なようですね！

ファイルをどこに生成するかを、変数によって柔軟に設定できるようになっています。

コマンドラインで変数に値を渡す

hygen は変数の渡す方法が2種類あります。

1. コマンドラインで渡す
2. 対話形式で入力して渡す

今回は、コマンドラインから渡してみましょう
基本はこんな形になります。

yarn run hygen Generator名 Action名 --変数名 値

どのGenerator、Action からファイルを作成するかを選択肢、オプションで変数名を渡すといった感じです。

yarn run hygen generator new --name new_template --action hello

$ yarn run hygen generator new --name new_template --action hello
yarn run v1.22.17
$ /workspaces/hygen-sample/node_modules/.bin/hygen generator new --name new_template --action hello

Loaded templates: _templates
       added: _templates/new_template/hello/hello.ejs.t
Done in 2.87s.

_templates/nameで渡した値/actionで渡した値/hello.ejs.t が無事に作成されましたね。

変数の使い方Tips

ファイル名などを埋め込む

<%= hoge %> みたいな形で、テンプレートのファイル上で変数を展開できます。

条件分岐

テンプレート自体はejs なので、if文といった構文も利用することができます。

• 初期値(変数が渡されてない時に代わりに使われる値)を設定することができる

<%= fuga || 'piyo' %>

• if文を使った条件分岐

<% if (name) { %>
  <h2><%= name %></h2>
<% } %>

ある値が渡されたら、この文を追加する、場合わけするみたいな感じで色々活用ができそうですね。

終わりに

今回はhygen でのテンプレートでの変数の使い方を簡単に紹介しました。
ファイルを作る際に変数を使うことができるので、より柔軟なテンプレートを作れる感じがして良いですね。

次は対話形式でファイルを作るというのを調べてまとめようと思います