EJSのincludeで別ファイルを読み込むときの画像パスを指定する方法

EJSを使うと、ヘッダーやフッターなどの共通パーツを別ファイルで管理しておいて、最終的にHTMLとしてコンパイルできるので、あとからヘッダーを修正しないといけないときなどに便利です。

似たようなテンプレートエンジンにPugもありますが、Pugは記法が独特なのに対してEJSはあくまでもHTMLにプラスアルファの機能が付いたイメージなので学習コストが低く、チームメンバー内でとりあえずHTMLが書ければ問題なく作業してもらえるのが大きなメリットです。

そんなEJSの、ファイル分割をするときのパス管理方法についてまとめておきます。

EJSの基本

EJSの基本的なところに関しては、過去に記事にしているのでそちらをご覧ください。

Webrandum

HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方

https://webrandum.net/ejs

HTMLを効率的に書くためのテンプレートエンジンといえば「Pug(パグ)（旧：Jade）」が有名ですが、書き方がインデント必須で独特な書き方になってしまいます。コードの質を担保するという意味では、書き方がある程度制限されていた方が良い場面もあるのですが、あまりにもHTMLの書き方と差があるため、複数人のチームでコーディングするときにPugが書けない人がいると使えなくなる可能性があります。今回紹介するEJS(イージェイエス)は、書き方はHTMLと全く同じで、それに追加して便利な機能が使えるようになったテンプレートエンジンな...

includeのパスを管理

include()を使えば別ファイルを読み込んでコンパイルができます。
ヘッダーやフッターなどの共通部品はもちろん、使い回しのパーツを1つのファイルで管理ができるので修正時にかなりラクになります。

しかし、ヘッダーに画像を使っている場合はパスを「../images/logo.png」のように指定してしまっていると、最終的に生成されたHTMLの階層によってはリンク切れを起こしてしまいます。
絶対パスであれば問題ありませんが、相対パスを使いたい場合は、include()にパス用の変数を渡してあげます。

index.ejs<%
data.path = '../'; //このページの階層を指定
-%>
<%- include('./_common/header', {data:'data'}) %>

data.pathをページの最初に定義して、ここにページの階層を指定する「../」を入力します。
階層が深くなると「../../」のように長くなっていきます。

そして、定義したdataをinclude()で別ファイルを読み込むときに{data:'data'}で中に入れてあげます。

パスを指定

次にinclude()するファイル（今回の場合は_header.ejs）を開いて、中のパスを書き換えます。

aタグのリンクや、imgで画像パスを指定している場所を、下記のように変数を組み合わせて記述してばOKです。

_header.ejs
<a href="<%= data.path %>about/">アバウトページへ</a>

_header.ejs
<img src="<%= data.path %>images/logo.png/">

こうすると、data.pathの値が変わってそれぞれのページがコンパイルされていくので、リンク切れがおきません。

実際にコンパイルされたパスを見ると下記のようになっているはずです。

当たり前ですが、data.pathの値が間違っているとリンク切れを起こしてしまうので、間違えないように注意しましょう。
特にファイルをコピーして別ページを作成するときなどは忘れてしまいがちで、前のページのパスの設定が残っていることがあります。

include以外でも使用可能

このパスの指定方法はinclude()外でも使えます。

この指定方法だと階層の移動があったり、コピペで同じ箇所を作るときにもパスを変えてチェックする必要がなかったり、変更し忘れもなくなります。
EJSを使う場合は、最初から全てのパスをこの方法で統一するのが良さそうです。