【テンプレートエンジン】Node.jsとExpressとejsで簡単にできるWebサイト作り- 実装編

2021-07-21 2023-08-15

Node.js, Express, ejsを用いてのWebサイトを作る方法を探している方向け。
今回の記事では実際のコードを元にWebサイトの作り方を説明していきます。

前置き：デモ用Webサイト

こちらが今回の記事で作成するデモ用のWebサイトです。
ランディングページやコーポレートサイト等のテンプレートとしても使える汎用的なWebサイトを想定しています。
こちらのWebサイトを今回はNode.js+Express+ejsを用いて作っていきたいと思います。

今回の記事は前回の記事【簡単フレームワーク】人気のNode.js/Express/ejsを使ったWebサイト作り- 環境構築編の続編となります。

もしも環境構築がまだの方は上記記事を先にご覧いただければと思います。

app.jsファイルの作成

App.jsとはサーバサイド処理を行う際のメインファイルです。

App.jsを作成することで、ローカル環境で動くWebサーバを構築することができます。

まずはターミナルを開き下記コマンドを実行し、プロジェクトのルートディレクトリ上にapp.jsというファイルを作成しましょう。(package.jsonファイルと同じ階層です)

# touch app.js

上記コマンドにより、app.jsファイルが生成されます。

続いてapp.jsに下記コードを追加します。

//Express フレームワークを読み込む
var express = require('express');
var app = express();

// ビューエンジンをejsにセットする
app.set('view engine', 'ejs');

// indexのテンプレートを呼び出す
app.get('/', function(req, res) {
  res.render('pages/index');
});

// aboutページのテンプレートを呼び出す
app.get('/about', function(req, res) {
  res.render('pages/about');
});

// servicesページのテンプレートを呼び出す
app.get('/services', function(req, res) {
  res.render('pages/services');
});

// portfolioページのテンプレートを呼び出す
app.get('/portfolio', function(req, res) {
  res.render('pages/portfolio');
});

// contactページのテンプレートを呼び出す
app.get('/contact', function(req, res) {
  res.render('pages/contact');
});

// ポート8082をオープンにする
app.listen(8082);

各行の処理については上記コードブロック内に記述しています。

要約すると各ページへアクセスが来た際にどのページを表示するかのルーティングを行っています。

各Viewファイルの作成

続いてView用のフォルダを生成しましょう。

Viewとは各ページの表示するためのテンプレートファイルのことで、このテンプレートファイルから各HTMLのページにレンダリングされます。

レンダリングとはHTMLやCSS, Javascript等ソースコードをブラウザ上で見れるように変換する処理のことです。

プロジェクトのルートディレクトリにいる状態で、下記コマンドを実行します。

mkdir -p views/pages & mkdir -p views/partials

上記コマンドによりviewsフォルダと、その配下にそれぞれpagesフォルダとpartialsフォルダが生成されます。

pages…各ページのレイアウト用ejsファイルを格納するためのフォルダ
partials…各ページのパーツを共通化し管理するためのフォルダ

各種パーツの生成

続いてWebページの各パーツをejsテンプレートを用いて作成しましょう。

今回作成するデモページをパーツ化し色分けしました。

今回作るWebページには大きく分けて4つのパーツが必要です。

Head
Header
Body
Footer

これらのファイルを先ほど作成したpartialsフォルダ内に作成していきます。
各パーツの役割についても順番に解説します。

head.ejsの作成

Headではページタイトル、及び使用するライブラリのインポート等を行います。上記色分けした画像内のオレンジ色の部分に該当します。
Partialsフォルダ内部にhead.ejsというファイルを作成し下記コードを作成します。

<meta charset="UTF-8">
<title>Web App with EJS + Express</title>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
   body { padding-top:50px; }
</style>

head.ejs内でWebページのタイトルとbootstrapの読み込みを行なっています。

bootstrapとは簡単にレスポンシブかつモバイルファーストなデザインのWebサイトが作れるCSS用のフレームワークです。

また、Webページの見た目を調整するためにpadding-top : 50pxも定義しています。

header.ejsの作成

header.ejsでは他の内部ページへアクセスするためのナビゲーションバーを作成します。

上記色分けした画像内のオレンジ色の部分に該当します。

先ほどのhead.ejs同様、partialsフォルダ配下にheader.ejsファイルを作成し下記コードを作成します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="/">Home</a>
   <ul class="navbar-nav mr-auto">
     <li class="nav-item">
       <a class="nav-link" href="/about">About</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="/services">Services</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="/portfolio">Portfolio</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="/contact">Contact</a>
     </li>
   </ul>
 </nav>

こちらのコードにより、5つの内部リンクを持つWebサイトが作成できます。（今回は都合上Homeページのみ作成します。）

body.ejsの作成

Body.ejsではサイトの中心コンテンツとなる部分の作成を行います。

今回は背景画像の上に白文字で「Web Application EJS + Express」と表示する仕様で作成します。

<div class="jumbotron">
 <div class="bg-image" style="background-image: url('https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0');
 height: 50vh">
 
 <div class="container" style="display: flex; justify-content: center; align-items: center; height: 50vh">
   <h1 style="color:white">Web Application EJS + Express</h1>   
</div>

Jumbotronとはbootstrapのクラスの一つで各種コンポーネントを画面最大まで表示できるクラスです。

こちらのクラスの中に背景画像と白文字のコンポーネントを定義することで画面横幅いっぱいに広がるページの作成ができます。

footer.ejsの作成

footer.ejsではコピーライトやボトムナビゲーションバー等を表示するパーツになります。

こちらはシンプルに1行コードを書くだけで終わりです。

<p class="text-center text-muted">© Copyright 2021 Mr.bear</p>

これでejsテンプレートでWebページを作るための準備が整いました。

Webページ作成

各種Webページ用のパーツの作成が完了しました。

続いて作成したパーツを元にWebページの作成をしましょう。

上記参考画像の通り、今まではページを構成するための各種パーツを作りました。

あとはページの枠組みとなるファイルを作成し、各パーツを組み込む作業になります。

pagesフォルダ配下にindex.ejsファイルを作成し、下記コードを書いてください。

<!DOCTYPE html>
<html lang="en">
   <head>
       <%- include('../partials/head'); %>
   </head>
   <body class="container">
 
   <header>
       <%- include('../partials/header'); %>
   </header>
 
   <main>
       <%- include('../partials/body'); %>
   </main>
 
   <footer>
       <%- include('../partials/footer'); %>
   </footer>
 
   </body>
</html>

コードを見ると<%-という見慣れない記号がありますが、こちらがejsの記法です。

<%- include(読み込むパーツの相対パス); %>と書くことで、別ファイルの組み込みができます。

上記コードを書き終わったら、ターミナル上で下記コマンドを実行してください。

#  node app.js

エラー等でていないことを確認できましたら、ブラウザを開きアドレスバーに下記を入力してください。

http://localhost:8082/

デモ用Webページと同様のページが表示されれば成功です。

さいごに

お疲れ様でした。
これでejsテンプレートを使った簡易的なWebサイトの構築ができました。

このテンプレートを使ってブログサイトやコーポレートサイト等色々なものを作ることができると思います。

ぜひ自分だけのWebサイトを作り、クリエイティブへの第一歩を踏み出しましょう。

Enlytについて

株式会社Enlytはベトナムに開発拠点SupremeTechを持ち、Enlytではこれまで50以上の開発プロジェクトを行ってきました。（株式会社Enlytの実績は開発実績ページから）ベトナムと日本のグローバルなチームで、数多くのプロジェクトを成功に導いてきました。

アジャイル開発をご検討の際は、株式会社Enlytまでご気軽にお問合せください！お客様の納得のいくまで、共に開発させていただき、アイデアを最高のかたちにサービス化いたします。

下記ボタンより気軽にお問合せください！

システム開発

Webサイトアイデアエンジニアおすすめサービス