サーバーサイド(node.js)を学び始める-2

Tatsuya Asami

5 min readNov 22, 2018

【所要時間】

1時間56分(2018年11月22日)

【概要】

node.jsを理解する。

【要約・学んだこと】

前回に続きドットインストールでnode.jsを学んだ内容の解釈をまとめる。

ejsを使いページを表示する。

まずnpmでejsをインストールする。そして下記のファイルを作る。

//public/hello.ejs<html>
  <h1><%= title %></h1>
  <p><%- content  %></p>
  <p><%= n %>views</p>
</html>

%で囲み、 %-とするとエスケープ(この場合別ファイルのcontentのtagを読み込む)する。

const http = require('http'),
  fs = require('fs'),
  ejs = require('ejs');
const settings = require('./settings');
const server = http.createServer();
const template = fs.readFileSync(__dirname + '/public/hello.ejs', 'utf-8');
let n = 0;
server.on('request', (req, res) => {
  n++;
  let data = ejs.render(template, {
    title: "hello",
    content: "<strong>World!</strong>",
    n: n
  })...

fs.readFileSyncはブロッキングな命令になるが、この場合他のリクエストが来る前の処理なので問題ない。

クリックをするたびにviewの数字は増えている。

BBSを作る。

//public/bbs.ejs...
    <form method="post">
      <input type="text" name="name">
      <input type="submit" value="Post!">
      <ul>
        <% for (let i = 0; i < posts.length; i++ ) { %>
        <li><%= posts[i] %></li>
        <% } %>
      </ul>
    </form>...

input nameで受け取った内容を、server.jsが処理し、posts[i]として再び受け取るイメージ。

// server.js...const template = fs.readFileSync(__dirname + '/public/bbs.ejs', 'utf-8');...
const posts = [];
function renderForm(posts, res) {
  const data = ejs.render(template, {
    posts: posts
  });
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(data);
  res.end();
}server.on('request', (req, res) => {
  if (req.method === 'POST') {
    req.data = "";
    req.on("data", (chunk) => {
      req.data += chunk;
    });
    req.on("end", () => {
      let query = qs.parse(req.data);
      posts.push(query.name);
      renderForm(posts, res);
    });
  } else {
    renderForm(posts, res);
  }
});...

const postsで配列を保持する。req.methodがPOSTした場合の処理と、それ以外の処理に分けて、受け取った情報を処理している。

inputの内容が表示される。

Mongodbと接続してデータの受け渡しをやろうとしたが、バージョンの違いなどでうまくできず、時間がかかりそうだったのでここで終了。

【わからなかったこと】

Mongodbとの接続(Mongodbの設定)。

【感想】

とりあえずnode.jsがサーバーサイドでどのように使われるかは理解できたと思うので、最近のバージョンに合わせた記述方法などに合わせて覚えていこうと思った。

サーバーサイド(node.js)を学び始める-2

Written by Tatsuya Asami

No responses yet