ejsのすすめ フロントエンドエンジニア 土谷 隆秀 

自己紹介 名前:土谷 隆秀 所属:(株)ロジカルスタジオ 職業:フロントエンドエンジニア / ブログライター / 勉強会スタッフ エンジニア歴：2年 弊社ブログにて記事を書いています(T.K) http://logical-studio.com/develop 

概要 ■Ejsの紹介 - Ejsとは？ - Ejsのメリット - Ejsの使い方 参考記事： https://www.to-r.net/media/ejs-01/ 

突然ですが コーディング中に、 このような経験はありませんか？ 

複数ページのコーディング時(1/3) 静的ページコーディングか… やっと1ページできたな！ 2ページ目以降はヘッダとフッタ共通か… コピペして作ろう しかしこれ結構ページ数あるなぁ… 

複数ページのコーディング時(2/3) あ、ここ間違えてた… まず1ページ目を修正して… 2ページ目以降はトップページをコピペして修正しよう 

複数ページのコーディング時(3/3) 先方からチェックバックもらった！ まずは1ページ目作って、またコピペして… チェックバック2回目！ コピペ疲れた… 提出前に確認せな… あ、このページ、ヘッダ治すの忘れてた！ あああああああああああああああああああああああああああああああああああああああああああああああ あああああああああああああああああああああ！！！！！！ 

コーディング時に起こりがちなこと ■同様の内容を何回も記入しなければならない - ヘッダ・フッタ - Metaタグ - ページ本文の繰り返し部分 →修正時… - 1箇所修正するとき、他も修正しなければならないので時間がかかる - 手動で修正すると、必ずコピペミスが起こる 

Ejsはそういった悩みを解決してくれます 

Ejsとは ■HTMLのメタ言語 Cssに対するsassみたいなもの HTMLを便利に書ける 

Ejsのメリット ■パーツを共通化できる ■学習コストが低い ■比較的容易に導入できる 

Ejsの使い方 - 導入方法 Gulp環境が必要。Gulp-ejsをインストールするだけ。 以下のような構造になる。 Srcフォルダ distフォルダ Index.ejs _header.ejs _footer.ejs Gulp-ejs Index.html 

Ejsの使い方 – 導入方法&導入例 • マークアップの拡張子は.ejs • 共通パーツのマークアップを.ejsファイルにまとめる 例：headerとfooterをejsファイル化する場合 index.html Include _header.ejs Include _footer.ejs _header.ejs _footer.ejs index.ejs 従来 Ejs化 

Ejsの使い方 – 導入例 例：繰り返し要素

Ejsの使い方 – 文法 例：headerとfooterをejsファイル化する場合 Ejsファイルの読み込み方：<% include hoge.ejs %> <% include _header.ejs %> 本文 <% include _footer.ejs %> ヘッダ ヘッダ index.ejs _header.ejs _footer.ejs 

注意点 ● Ejsに頼りすぎに注意 人間がejsの記述をミスるとえらいことになる ●コンパイル後のソースもちゃんと見よう - 謎の空白が入る - Alt内に
が入る 

ありがとうございました 以上となります