Node.js初心者が使いやすいejsの便利なスニペット

Node.js初心者が使いやすいejsの便利なスニペット
2017年2月26日

LIG.incのWebでデザイナー平尾誠です。フロントエンドの開発環境が近年複雑すぎてついていけていない僕です。HTMLでコーディングすると、特にwordpressを想定しているブログなんかのコーディングをするととってもHTMLが長くなってしましいますよね。
繰り返し使う部分は使いまわせるととても便利です。自分の備忘録ですが残しておきます。
便利なスニペットを見つけるたびにこの記事は更新していく予定です。

外部ファイル読み込み

<% include metadata/_const %>

基本ループ

<ul>
 <% for(var i=0; i=>5; i++){ %>
   <li>おしりが大好き</li>
 <% } %>
</ul>

外部ファイル_const.ejsから変数を取り出してindex.ejsに出力

<% include view/meta/_const %>
    <% for (var topicks = 0; topicks < lesson.length; topicks++) { %>
  • <% include ./view/module/_main-item %>
  • <% } %>
<% 
lesson = [
  {
    category: '音楽',
    date: '2015/1/2',
    name: '本田圭佑',
    description: '【スペシャルテクニック動画】本田圭佑が教える始めての無回転シュート',
    img: '../assets/images/ph_honda.jpg',
    icon:'../assets/images/icon-honda.png',
    categoryClass:'music'
  },
  {
    category: 'ライフ',
    date: '2015/1/2',
    name: 'イチロー',
    description: '【スペシャルテクニック動画】イチローが教えるホームランキャッチ',
    img: '../assets/images/ph_ichiro.jpg',
    icon:'../assets/images/icon-ichiro.png',
    categoryClass:'life'
  },
  {
    category: 'カメラ',
    date: '2015/1/2',
    name: '錦織圭',
    description: '【スペシャルテクニック動画】錦織圭が教えるエアーK',
    img: '../assets/images/ph_nishikori.jpg',
    icon:'../assets/images/icon-nishikori.png',
    categoryClass:'camera'
  },
  {
    category: 'スポーツ',
    date: '2015/1/2',
    name: 'ネイマール',
    description: '【スペシャルテクニック動画】本田圭佑が教える始めての無回転シュート',
    img: '../assets/images/ph_naymal.jpg',
    icon:'../assets/images/icon-neymal.png',
    categoryClass:'sports'
  },
];

%>


Node 基本概要(en)