ejsのすすめ

Transcript

1. ejsのすすめ フロントエンドエンジニア 土谷 隆秀
2. 自己紹介 名前:土谷 隆秀 所属:(株)ロジカルスタジオ 職業:フロントエンドエンジニア / ブログライター / 勉強会スタッフ エンジニア歴：2年 弊社ブログにて記事を書いています(T.K) http://logical-studio.com/develop
3. 概要 ▪Ejsの紹介 - Ejsとは？ - Ejsのメリット - Ejsの使い方 参考記事： https://www.to-r.net/media/ejs-01/
4. 突然ですが コーディング中に、 このような経験はありませんか？
5. 複数ページのコーディング時(1/3) 静的ページコーディングか… やっと1ページできたな！ 2ページ目以降はヘッダとフッタ共通か… コピペして作ろう しかしこれ結構ページ数あるなぁ…
6. 複数ページのコーディング時(2/3) あ、ここ間違えてた… まず1ページ目を修正して… 2ページ目以降はトップページをコピペして修正しよう
7. 複数ページのコーディング時(3/3) 先方からチェックバックもらった！ まずは1ページ目作って、またコピペして… チェックバック2回目！ コピペ疲れた… 提出前に確認せな… あ、このページ、ヘッダ治すの忘れてた！ あああああああああああああああああああああああああああああああああああああああああああああああ あああああああああああああああああああああ！！！！！！
8. コーディング時に起こりがちなこと ▪同様の内容を何回も記入しなければならない - ヘッダ・フッタ - Metaタグ - ページ本文の繰り返し部分 →修正時… - 1箇所修正するとき、他も修正しなければならないので時間がかかる - 手動で修正すると、必ずコピペミスが起こる
9. Ejsはそういった悩みを解決してくれます
10. Ejsとは ▪HTMLのメタ言語 Cssに対するsassみたいなもの HTMLを便利に書ける
11. Ejsのメリット ▪パーツを共通化できる ▪学習コストが低い ▪比較的容易に導入できる
12. Ejsの使い方 - 導入方法 Gulp環境が必要。Gulp-ejsをインストールするだけ。 以下のような構造になる。 Srcフォルダ distフォルダ Index.ejs _header.ejs _footer.ejs Gulp-ejs Index.html
13. 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化
14. 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に変数を持たせて内容を変えることも可能。 今回は解説しません
15. 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
16. 注意点 • Ejsに頼りすぎに注意 人間がejsの記述をミスるとえらいことになる •コンパイル後のソースもちゃんと見よう - 謎の空白が入る - Alt内に<br>が入る
17. ありがとうございました 以上となります