夢見がちWeb屋の浮かれ雑記帳

フロントエンド周りの技術ネタやらなんやらね

自動生成用のテンプレートを自動生成してみることにした

四六時中プログラムを書いていると自然にお約束パターンが出てきてソースコードの雛形的なのを作りたくなることがままある。 俺様Scaffold的なやつが欲しくなる。

テンプレートエンジン的なやつはいくらでも転がっているので、Scffold的なのは割と簡単と作れる。

そして気づく。

テンプレート管理めんどくせぇ。。。

最初に

一回動くものを作る -> ソースコードをテンプレート化する -> 値を渡してレンダリングする -> 挙動を試す

とやるのは良いのだけど、その後何か変更が生じると、

ちょっと直す -> テンプレートをいじる -> 値を渡してレンダリングする -> 挙動を試す

的になるのだけどこれが地味にめんどくさい。

テンプレート状態だとSyntaxチェックとかもできない場合が多いので、つまらん記述ミスもレンダリングして挙動を試して発覚したりする。

どうしたものか。

そうだ、テンプレート自体を自動生成すれば良いじゃないか。

と気がついて作ったのがこれ ↓↓

github.com

まずベタ書きで動くものを作り、ルールに沿ってそれをテンプレート化するというものだ。

my_awesome_func.js

function myAwesomeFunc () {
  /* ... */
}

   ↓↓            ↑↑

Tmplify    Render

   ↓↓            ↑↑

name@snakecase.js.tmpl

function ____name@camelcase____ () {
  /* ... */
}

"myAwesomeFunc"というベタの値を抽象的な"name"とテンプレート化し、"name"に他の値を埋め込むことで他のファイルを自動生成できるようにする、というものだ。

個人的には宗教上の理由でJavascriptのファイル名で大文字使うのやめてほしいという信念があるので、Snake Case / Camel Case変換的なやつもきちんとするように作り込んだ。

実際の使い方としては、

の三つを以下の要領で呼び出すことでテンプレート化ができる。

'use strict'

const tmplconv = require('tmplconv')

// Generate template from existing directory
tmplconv.tmplify('demo/demo-app', 'asset/app-tmpl', {
  // Patterns of files to tmplify
  pattern: [
    'lib/*.js',
    'test/*_test.js'
  ],
  // Rule to tmplify
  data: {
    'name': 'my-awesome-app',
    'description': "This is an example for the app templates."
  }
}).then((result) => {
  /* ... */
})

逆に、作ったテンプレートから生成を行うときは

'use strict'

const tmplconv = require('tmplconv')

// Render files from existing template
tmplconv.render('asset/app-tmpl', 'demo/demo-app', {
  // Data to render
  data: {
    'name': 'my-awesome-app',
    'description': "This is an example for the app templates."
  }
}).then((result) => {
  /* ... */
})

的な。