1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

edgeテンプレートエンジンをつかってみた #GWアドベントカレンダー4日目

#GWアドベントカレンダー「使いたかったもの使ってみたカレンダー(1人アドベントカレンダー)」の4日目、30日記事です。

edgeテンプレートエンジンをつかってみた

adonis.jsを使っているときに、edgeテンプレートエンジンを使ってみました。
HPのドメイン的に、adonisの子分というか、adonis内プロジェクトの1つのようです。でも独立して使えるようです

Edgeテンプレートって何?

node.jsでテンプレートエンジンといえばejsとかJade/Pugとかがあります。
ejsはよく使ってるのですが、include header.ejsとかinclude footer.ejsとかを書くのが普通になってしまいます。

edgeの場合、レイアウトという概念があってheaderとfooterを分けなくてよいのが最大の特徴になりそうです。

layout.edge
<html>
 <head>
  <title>title</title>
 </head>
 <body>
  @!section('content')
 </body>
</html>

sample.edge
@layout('layout.app')

@section('content')

hello world

@endsection

ただの文字連結するためにファイルを作る ではなくて、意味を持ったまとまりのファイルをつくるという考えに変わります。

同じように、コンポーネントも作ることができて、例えばinputフォームコンポーネントを作ってそれを再利用するとか、意味を持ったパーツとしてのファイルがたくさんできる、という概念でした。

C言語で#includeを使って頑張るんじゃなくて、意味をちゃんと持たせてクラス化しようよ!と言われたときのことを思い出しました。
また、どことなくVue.jsと似てそうです。

良さそうなところ/面白かったところ

  • レイアウトやコンポーネントの概念がいい
  • 自然と再利用が進んで見通しが良くなる
  • ejsだと<% var %>のところ、{{var}}と書くので書きやすい。(%が意外と打ちにくい)

あんまりイケてないところ

  • ドキュメントが見にくい/動画でしか説明してない内容がある
  • マイナーすぎて(?)エディタ側がファイルに対応していない。補間が聞かない。ハイライトしてくれない
  • テンプレート内で変数の定義や代入ができない(?)

総合評価

概念がすごくいいし、書きやすいテンプレートエンジンでした。
でも正直、似たようなことできるvue.jsのほうがドキュメントも作例もたくさんあっていいかな。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?