Memo

機能の検証
■HTMLを表示

C:\Users\refirio\Node\hello\app.js
const http = require('http');

var server = http.createServer(
    (request, response) => {
        response.setHeader('Content-Type', 'text/html');
        response.write('<!DOCTYPE html>');
        response.write('<html>');
        response.write('<head>');
        response.write('<meta charset="utf-8">');
        response.write('<title>Node.js</title>');
        response.write('</head>');
        response.write('<body>');
        response.write('<h1>Node.js</h1>');
        response.write('<p>Node.js の世界へようこそ！</p>');
        response.write('</body>');
        response.write('</html>');
        response.end();
    }
);
server.listen(3000);

console.log('Server started.');
■HTMLファイルを読み込んで表示

C:\Users\refirio\Node\hello\index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Node.js</title>
</head>
<body>
<h1>Node.js</h1>
<p>Node.js の世界へようこそ！</p>
</body>
</html>


C:\Users\refirio\Node\hello\app.js
const http = require('http');
const fs = require('fs');

var server = http.createServer(
    (request, response) => {
        fs.readFile('./index.html', 'UTF-8', (error, data) => {
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.write(data);
            response.end();
        });
    }
);
server.listen(3000);

console.log('Server started.');
■テンプレートエンジンEJS（Embedded JavaScript Templates）を使う>npm install -g ejs


実行時に「Error: Cannot find module 'ejs'」と表示される場合、以下も実行する。

>npm init
>npm install --save ejs


C:\Users\refirio\Node\hello\app.js
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');

var server = http.createServer(
    (request, response) => {
        const data = fs.readFileSync('./index.ejs', 'UTF-8');

        var content = ejs.render(data, {
            title: 'Node.js',
            content: 'これはEJSを使ったページです。',
        });

        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(content);
        response.end();
    }
);
server.listen(3000);

console.log('Server started.');


C:\Users\refirio\Node\hello\index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
</body>
</html>
■複数のページを作る

C:\Users\refirio\Node\hello\app.js
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
const url = require('url');

var server = http.createServer(
    (request, response) => {
        var parameters = url.parse(request.url);
        switch (parameters.pathname) {
            case '/':
                var data = fs.readFileSync('./index.ejs', 'UTF-8');

                var content = ejs.render(data, {
                    title: 'Node.js',
                    content: 'これはEJSを使ったページです。',
                });

                response.writeHead(200, {'Content-Type': 'text/html'});
                response.write(content);
                response.end();

                break;
            case '/other':
                var data = fs.readFileSync('./other.ejs', 'UTF-8');

                var content = ejs.render(data, {
                    title: 'サブページ',
                    content: 'これはサブページです。',
                });

                response.writeHead(200, {'Content-Type': 'text/html'});
                response.write(content);
                response.end();

                break;
            case '/style.css':
                var data = fs.readFileSync('./style.css', 'UTF-8');

                response.writeHead(200, {'Content-Type': 'text/css'});
                response.write(data);
                response.end();

                break;
        }
    }
);
server.listen(3000);

console.log('Server started.');


C:\Users\refirio\Node\hello\index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
<ul>
  <li><a href="/other">/other</a></li>
</ul>
</body>
</html>


C:\Users\refirio\Node\hello\other.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
<a href="/">戻る</a>
</body>
</html>


C:\Users\refirio\Node\hello\style.css
h1 {
  color: #FF4500;
}
■アプリケーション変数を使う

※すべての人が共通して参照できるデータ。
※グローバル変数がそのような値となる。

C:\Users\refirio\Node\hello\app.js
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
const url = require('url');

var number = 0;

var server = http.createServer(
    (request, response) => {
        var parameters = url.parse(request.url);
        switch (parameters.pathname) {
            case '/':
                var data = fs.readFileSync('./index.ejs', 'UTF-8');

                number++;

                var content = ejs.render(data, {
                    title: 'Node.js',
                    content: 'これはEJSを使ったページです。',
                    count: number,
                });

                response.writeHead(200, {'Content-Type': 'text/html'});
                response.write(content);
                response.end();

                break;
            case '/style.css':
                var data = fs.readFileSync('./style.css', 'UTF-8');

                response.writeHead(200, {'Content-Type': 'text/css'});
                response.write(data);
                response.end();

                break;
        }
    }
);
server.listen(3000);

console.log('Server started.');


C:\Users\refirio\Node\hello\index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><%=title %></h1>
<p><%=content %></p>
<p>count=<%=count %></p>
</body>
</html>


C:\Users\refirio\Node\hello\style.css
h1 {
  color: #FF4500;
}
Memo

Advertisement
