【Express入門】Pugを使った動的ファイルの表示

はじめに　

Pugとは？

Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。

動的ファイルとは？

・フロントエンドとバックエンドで呼び出されたファイル（見る人やタイミングによって表示内容が異なる）
・html/css/JavaScpipt/imgなど

ついでに静的ファイルとは？

・フロントエンドのみで表示されたファイル（誰がいつサイトを訪れても同じ内容が表示がされる）
・html/css/JavaScpipt/imgなど

目的

・動的ファイルを表示する

実践

前提
・expressのインストール

npm install express

1　Pugのインストール

npm install pug --save

2　ディレクトリ内にviewsフォルダを作成
3　動的ファイルを作成（index.pugの作成）

index.pug

html
  head
    title= title
  body
    h1= message

4　server.jsにてルーティングの処理

server.js

const express = require("express");
const app = express();

// 動的ファイルの読み込み
app.set('view engine', 'pug')

//　ルーティング
app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' })
})

おわりに

動的ファイルを表示するには、ルーティングも書かなきゃいけないのか！
まだ深くまで理解できてない説
けど、公式ドキュメントやQiitaなどで調べられる力がついてきた！

参考記事(公式ドキュメント)

参考動画