ES6記法でejsのincludeを少し見やすくしてみた。

こんにちわ、ななきです。

今日はejsの繰り返しとか、インクルード時のデータの渡し方とかちょっとだけカンタンに書いてみようというお話です。

ejsやgulpはむずかしい、でもやってみたいという方は下記を読んでみるといいかもしれません。

gulp
https://www.to-r.net/media/npm-gulp/
ejs
https://www.to-r.net/media/ejs-01/

mapを使った繰り返し

ダミーの要素を繰り返すだけであればfor文でいいのですが、ブログの記事一覧のような要素の繰り返しの場合はmapを使うとキレイにかけます。

 

コンパイルすると下記の様になります。

はい、便利ですね。

これは配列に入っているデータの数だけfor文のように繰り返し処理してくれているイメージです。
mapの引数のobjは現在処理中の配列データが格納されます。

次はinclude先へデータを渡すときに楽する方法です。

スプレッド演算子を使ったデータの渡し方

スプレッド演算子を使うと配列などを展開することが出来ます。

 

mapと合わせて使うこともできるので、複数データを渡すときでも短い記述でかけますね。

まとめとか

それっぽい感じで書いてきましたが、僕も最近ReactとかES6とかを勉強していて、これejsでも同じ記述出来るよねって気づいたのでまとめました。

また、意外と繰り返し処理しつつ複数情報渡したい場面があるのに調べてもうまく出てこないみたいなことがjs全くわかりません時代にあったので、同じような状況の方の助けになれば嬉しいです。

Archives

MasatoChiba
Frontend Developer