EJSを使ってサイトをコーディングする

2020年08月27日

フロントエンド

今回は、ポートフォリオのコーディングで使ったEJSについてまとめていきます。EJSを使っていくための環境構築やEJSのメリットなどまとめていこうと思います。

EJSとは?

そもそもEJSって何?という人もいると思うので簡単にEJSについて説明していきます。EJSとはテンプレートエンジンと呼ばれるNode.jsのパッケージの1つです。HTMLのテンプレートエンジンだと他にはPugなどがありますね。サイトでヘッダーやフッターなどの全ページ共通のパーツを1つのファイルで管理することができます。通常のHTMLだと10ページあるとすれば、ヘッダーのちょっとした変更だけで10ページ分のHTMLを修正しないといけませんが、EJSを使えばその共通のファイルだけ変更すれば全てのページの修正ができちゃいます。

EJSを使うための環境を整える

EJSを動かしていくにはGulpが使えるようになっている必要があります。前々回あたりの記事でGulpの環境を整える記事を書いているのでまだGulpが使えない状況だという人はそちらの記事を参考にしてみてください。ググったら記事はたくさん出てきますし、割と簡単にできるのでやってみてください。

それではEJSを使っていくための説明をしていきます。

まず下記の3つのパッケージが必要になってきますのでnpmコマンドでインストールしましょう。

  • gulp
  • gulp-ejs
  • gulp-rename

インストールするにはプロジェクトフォルダのある階層まで移動してから以下のコマンドを入力してください。

npm install -D gulp gulp-ejs gulp-rename

インストールしたらgulpfile.jsに以下のものを追加します。簡単にいうとejsフォルダの中にあるejsファイルをHTMLファイルとして出力するといったことが書いてあります。ただ共通のパーツは無視して欲しいのでアンダーバーから始まるファイルは無視するということも書いてあります。なので共通のパーツのejsファイルはファイル名の文頭に_をつけましょう。

const rename = require("gulp-rename");
const ejs = require("gulp-ejs");

gulp.task("ejs",function(){     
return gulp.src(["ejs/**/*.ejs", '!' + "ejs/**/_*.ejs"])     .pipe(ejs({}, {}, { ext: '.html' }))     
.pipe(rename({ extname: ".html" }))     
.pipe( gulp.dest( "./" ) ); })

これで一応動くようにはなったのですが、HTMLとして自動で出力して欲しいので以下のものを追加しましょう。

gulp.task('default', function(){
    gulp.watch( "ejs/**/ejs", gulp.series( "ejs" ) );
});

これで作業を始める時にnpx gulpとターミナルに入力するだけで自動でejsファイルからHTMLファイルとして出力してくれます。

これでEJSを使う準備はできました!

EJSの使い方

実際の使い方についてまとめていきます。

ファイルの構成としては以下のようにしています。

ejsというフォルダ内に実際にHTMLとして出力されるのはindex.ejsファイルです。headとfooterの共通パーツを記述しているファイルをcommonフォルダに入れてあり、この2つのファイルはHTMLとして出力されません。

EJSは基本的に拡張子がejsになっているだけでHTMLと同じように書けます。このHTMLと一緒というのが個人的にかなり使いやすいなと感じました。馴染みのある書き方でできるのはメリットなのかとと思います。

ただ共通パーツの部分は書き方が違うので注意です。その共通パーツを入れたい部分に<%- include(‘ファイルのパス’) %>と書きます。今回のファイル構成でいうとindex.ejsのheadとfooter部分にそれぞれ<%- include(‘common/_head’) %>、<%- include(‘common/_footer’) %>と書きます。拡張子は書かなくていいみたいです。

これがEJSの基本的な使い方となります。これで、headの記述にミスがあったり、footerに変更があったりした時にcommonフォルダ内の各ファイルを修正すると全部のページで修正されるようになりますのでかなり効率よく作業ができますね。

まとめ

今回はEJSについてまとめていきました。共通のパーツを1つのファイルで管理できるのはかなり便利でした!私はそこまで大規模なサイトをまだ制作したことはないのですが、そのような時に真価を発揮するのではないでしょうか。また、テンプレートエンジンは他にもあるのでまた調べてみようかなと思います。

Pocket

related

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

GitHub PagesとNetlifyでポートフォリオを公開してみた

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです

フロントエンド

2020.09.09

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き