Node.jsでexpressとejsを使用しウェブページを作成（参考程度

Posted at 2024-05-01

使用したパッケージ

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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up