なんだかGoodVibes

日々の勉強メモです。

【Express入門】複数のページを作ってみる

Node.js

今日も引き続きExpressです。
今回は２つのページを遷移するサンプルです。

作成するのは以下のファイルです。
- index.js
- index.ejs
- style.css

Expressを使用する際は
表示用のファイル(ejs等)は「views」フォルダの下に格納。
外部に公開されるファイル(css等)は「public」フォルダの下に格納します。
では、ソースを見ていきます。
サンプルソースはindex.js、index.ejsを記載します。
style.cssは好きに作ってください。

[index.js]

var express = require('express');
var ejs = require('ejs');

var app = express();

// エンジンの設定
// 第一引数：レンダリングするファイルの拡張子
// 第二引数：レンダリングに用いる関数もしくはメソッド
app.engine('ejs', ejs.renderFile);

app.use(express.static('public'));

// ----- トップページ -----
// GETアクセス処理
// 第一引数：アクセスするパス
// 第二引数：実行される関数
app.get('/', (req, res) => {
    var msg = 'トップページです!';
    res.render('index.ejs',
        {
            title:'Index',
            content:msg,
            link:{href:'/other', text:'別のページに移動'}
        });
});

// ----- otherページ -----
// GETアクセス処理
// 第一引数：アクセスするパス
// 第二引数：実行される関数
app.get('/other', (req, res) => {
    var msg = 'otherページです!';
    res.render('index.ejs',
        {
            title:'other',
            content:msg,
            link:{href:'/', text:'トップに戻る'}
        })
})

var server = app.listen(ポート番号, () => {
    console.log('Server start!');
});

[index.ejs]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF=8">
    <title><%= title %></title>
    <link type="text/css" href="./style.css" rel="stylesheet">
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
        <p><a href="<%= link.href %>"><%= link.text %></a></p>
    </div>
</body>
</html>

これで２つのページを遷移することができます。
パスの分岐をExpressではapp.get... と書くことができるので
とても簡単に書くことができます。