■目次
Node.js機能の検証Express
■Node.js
■導入 Node.js https://nodejs.org/ja/ Node.js をインストール 手順中の「Tools for Native Modules」の画面では、「Automatically install the necessary tools.」にチェックを入れずに進める(デフォルトのまま) >node -v v12.16.2 >node Welcome to Node.js v12.16.2. Type ".help" for more information. > console.log('Hello!'); Hello! undefined > .exit ■Webサーバを起動 C:\Users\refirio\Node\hello\app.js
const http = require('http'); var server = http.createServer( (request, response) => { response.end('Hello Node.js!'); } ); server.listen(3000);
>cd C:\Users\refirio\Node\hello >node app.js ブラウザで以下にアクセスすると「Hello Node.js!」と表示される。Ctrl+C で終了できる http://localhost:3000/
■機能の検証
■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; }
■Express
>mkdir express-app >cd express-app >npm init >npm install --save express ※「express」というフォルダ名にすると、expressインストール時に 「Refusing to install package with name "express" under a package npm ERR! also called "express".」 というエラーになる C:\Users\refirio\Node\express-app\index.js
var express = require('express'); var app = express(); app.get('/', (req, res) => { res.send('Welcome to Express!'); }); app.listen(3000, () => { console.log('Started server port: 3000'); });
>node index.js ブラウザで以下にアクセスすると「Welcome to Express!」と表示される。Ctrl+C で終了できる http://localhost:3000/ ■EJSを使う >npm install --save ejs C:\Users\refirio\Node\express-app\index.js
var express = require('express'); var ejs = require('ejs'); var app = express(); app.engine('ejs', ejs.renderFile); app.use(express.static('public')); app.get('/', (req, res) => { res.render('index.ejs', { title: 'トップページ', content: 'これはExpressによるトップページです。' }); }); app.get('/other', (req, res) => { res.render('other.ejs', { title: 'サブページ', content: 'これはExpressによるサブページです。' }); }); app.listen(3000, () => { console.log('Started server port: 3000'); });
C:\Users\refirio\Node\express-app\views\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\express-app\views\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\express-app\public\style.css
h1 { color: #FF4500; }
■Express Generator を使う >npm install -g express-generator >cd C:\Users\refirio\Node >express -e ex-gen-app >cd ex-gen-app >npm install >npm start ブラウザで以下にアクセスすると「Welcome to Express!」と表示される。Ctrl+C で終了できる なお「npm start」の代わりに「node bin\www」としても起動できる http://localhost:3000/