ejsのすすめ

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ファイル化する場合 <header />
<main /> <footer /> index.html Include _header.ejs <main /> Include _footer.ejs <header /> <footer /> _header.ejs _footer.ejs index.ejs 従来 Ejs化

Ejsの使い方 – 導入例例：繰り返し要素 <div class=“block” /> index.html Include _block.ejs
<div class=“block” /> _block.ejs index.ejs 従来 Ejs化 <div class=“block” /> <div class=“block” /> <div class=“block” /> <div class=“block” /> <div class=“block” /> For(i=0;i<6;i++){ } _block.ejsに変数を持たせて内容を変えることも可能。今回は解説しません

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

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

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

ejsのすすめ

ejsのすすめ

ls_pr

More Decks by ls_pr

Featured

Transcript