テンプレートエンジン】

皆さん、こんにちは。

先日、竹下通りを歩いてたところ、修学旅行で原宿を観光している中学生達に「もしかして、youtuberの人ですか？！」

と言われ、思わず「…はい（照）」と答え、いたいけな中学生達と満面の笑みで写真を撮った愛原です。

残念ながら僕はyoutuberではなく、ただの子供部屋おじさん（いい年して実家に寄生するモンスター）なのですが、僕がyoutuberだったらどんな動画を作るか考えてみました。

旅が好きなので旅系youtuberですかね…？こちらになります。

【ベトナムの床屋で完全にお任せにしたらまさかの結果になったwwww】

実際にありそうですね、youtuberになると決めて会社辞めたはいいけどチャンネル登録者数が68人くらいしかいなそうですね。

そのうえチャンネル名は「愛channel」とかクソ寒い名前をつけて、渋谷の駅前でフラッシュモブとか寒いことしてそうですね。

ちなみにこの後、どんな髪型になったかというと、、、

いや完全にイジリー岡田。

かつて90年代、伝説のテレビ番組「ギルガメッシュないと」で一世を風靡した人！！！（by wikipedia）

本当は下ネタ嫌いなのに高速舌ベロベロでその変態キャラ確立した人！！！（by wikipedia）

更に別の角度よりもう一枚、、、

いや、、、この角度エッッグううぅぅぅうう！！

ワシなんちゅう頭してんの？？！！存在が公然わいせつ！！おしゃれの街ここ原宿でも気持ち悪すぎて浮くわ！！！

そんな人生がネタでしかない三代目 soul brothers こと二代目 Isily aiharaですが、今回は共通部分を一括管理する手段を紹介していきます。

共通部分は一括管理しないと詰む

さてようやく本題ですが、共通部分（ヘッダー、フッター、ナビなど）一括化する方法をご紹介します。

というのも、これらの共通部分は一括管理できるようにしないと詰みます。

以前、20ページ規模のサイトを運用していた際に、共通部分が一括化されておらず、修正があるたびに1ページずつすべて修正していました。

ソースの管理をされてる方ならわかると思いますが、これは地獄です。

小学生の時、二人一組でペアになってくださいと先生に言われ、当然の如くペアを組む友達がいないので結局先生とペアを組まされるあの感覚です、つまりは地獄。

こうなると当然ミスが生まれますし、どのページが修正できて、どのページが修正できていないのかがわからなくなり、余裕で詰みました。

イジリー岡田みたいな髪型にされたときも地獄でしたがこれも地獄でした。

皆さんには同じ過ちを繰り返してほしくないので、僕が普段どのように共通化しているかを紹介します。

① SSI

おすすめ度：★★★

インクルードといえば真っ先に出てくるのがこちらかと思います。

Server Side Includeの頭文字をとってSSIです。

個人的に、一番手軽でオススメです。

ただしサーバーが必要なので環境の構築に若干の手間はかかりますが、xamppを使えば解決します。

やり方はgoogle先生に聞けばいくらでも教えてくれるので省略します。

② Java Script

おすすめ度：★★

SSIを使うほどでもない2～3ページの小規模案件にはこちらがオススメです。

やり方は下記のようにします。

--------------------------
//jsの記述
function header(){
var head = "";
head += '<header class="head"><div class="head__inner"><p class="head__btn"><a href="#">btn</a></p></div></header>';
document.write(head);
}
//htmlの記述
<!-- 上記ソースを呼び出したい箇所に書きを記述 -->
<script>header();</script>
--------------------------

--------------------------

//jsの記述

function header(){

var head = "";

head += '<header class="head"><div class="head__inner"><p class="head__btn"><a href="#">btn</a></p></div></header>';

document.write(head);

}

//htmlの記述

--------------------------

メリットはSSIのようにサーバーを用意する必要が無いので、どこでも手軽に使えることです。

デメリットは変数の中に共通部分を代入するので、視認性が悪くソースが編集しづらいです。

③ テンプレートエンジン（ejsやpug等）

おすすめ度：★★

今どきのナウいヤングな感じでやりたい人にオススメなのがこちらです。

テンプレートエンジンを使えばSSIと同じような感覚で共通化できます。

テンプレートエンジンも種類がいくつかありますが、王道は「pug / ejs」の2強なのでは無いでしょうか。

ただしこちらはgulp、npmscript、webpackなど開発環境を用意してやらないといけないので、難易度は高めですが、ナウさやエモさを求めている方にはぜひ使ってほしいです。

私も勉強のために使ってみましたが、テンプレートエンジンは記述の省略や変数ループなど、共通化以外のこともできるので、マスターできればかなり幸せになれます。

まとめ

いかがでしたでしょうか？

今回は共通部分の一括管理方法についてまとめました。

2ページ以上あるサイトは絶対に共通化したほうがいいと思っています。

使えるものはどんどん使って、効率化して楽をしましょう。

僕は効率化して余った時間で、二代目イジリー愛原として高速ベロベロの練習に励み、忘年会で披露したいと思います。

それではっ(；´Д｀)ﾍﾞﾛﾍﾞﾛ

Post Views: 6,390