Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ejsのすすめ
Search
ls_pr
March 11, 2021
0
150
ejsのすすめ
ls_pr
March 11, 2021
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
200
自作PCのすすめ
ls_pr
0
130
ツボを押さえたWFの作り方
ls_pr
0
120
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
230
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
110
JSにおける正規表現
ls_pr
0
120
Vue.jsの機能を使って色々作ってみた
ls_pr
0
410
NuxtではじめるVue.js
ls_pr
0
270
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Code Review Best Practice
trishagee
69
19k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
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>が入る
ありがとうございました 以上となります