使用したパッケージ
1.express
インストールコマンド
npm
npm install express
yarn
yarn add express
2.ejs
インストールコマンド
npm
npm install ejs
yarn
yarn add ejs
サイトのファイル構成
- publicフォルダー
cssやimgなどを置くフォルダー - views
app.jsでアクセスがあったページのejsを置く場所 - app.js
サイトへアクセスがあったページへ移動処理など
sample/
┣━ public/
┃ ┣━ css/
┃ ┗━ img/
┣━ views/
┃ ┣━ top.ejs
┃ ┗━ index.ejs
┣━ app.js
etc
ページ表示の処理
app.js ファイルで行う
expressを使用するためapp.jsの先頭で宣言
//expressを使うためのコード
const express = require('express');
const app = express();
cssやimgお置いてあるpublicフォルダーへアクセスするための処理
ejsファイル内でcssやimgフォルダーへアクセスするのに必要
app.use(express.static('public');
サイトへアクセスがあった時の処理
// '/'にアクセスしたときの処理
app.get('/', (req, res) => {
//top画面のejsファイルを開く
res.render('top.ejs');
});
ejsの記述
1.HTMLは特別変わらない
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>topページ</title>
<!-- publicを起点としたパスを記述 -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div>
<!-- publicを起点としたパスを記述 -->
<img src="/img/">
<!-- /indexへ移動できる -->
<a href="/index" >もどる</a>
</div>
</body>
</html>
2.javascriptが記述できる
-
<% %>
javascriptの処理を表示したくない場合に書く -
<%= %>
javascriptの処理を表示したい場合に書く
<body>
<div>
//表示されない
<% const name = "名前"; %>
//「名前」と表示される
<p><%= namae %></p>
</div>
</body>