jsでサーバサイドを実装できるNode.jsで基本的なプログラムを書いてみた！

Node.jsをご存知ですか？

Node.jsとはざっくりいうと、javascriptでサーバサイドも開発できる技術です。最近の技術なので、PHPやRuby,Pythonのように、一般的に使われているわけではありませんが、フロント側の実装もバックエンドの実装もjsでかけるという利便性から様々な企業で採用されつつあります。
ネット決算最大手のPayPalが、サーバサイドをNode.jsに変更した事例が、有名かと思います。

そして、web制作という仕事柄、わたしはjsが大好きなので、Node.jsにも挑戦してみました！

本日は、自分の知識のoutputも含めて、簡単なnode.jsのプログラムを紹介したいと思います。

一般的なwebサーバーとの違い

一般的なwebサーバーは、htmlファイルやcssファイルをサーバーにアップするだけで、リクエストに応じて適切なファイルをレスポンスしてくれますよね！？

一方、Node.jsでは「このリクエストが来たら、こうやってレスポンスする」といった具合に、サーバープログラムを起動するというところからプログラムをスタートしなければなりません。

ここで、一番シンプルに

httpリクエストをする
htmlファイルを取得する
取得した内容を、レスポンスする

というプログラムを紹介します。

#簡単なリクエスト、レスポンス
var http = require('http');   // httpオブジェクト(通信等に利用する)を使えるように
var fs = require("fs");         //  fsオブジェクト(ファイルの取得に使用する)を使えるように

var server = http.createServer();    
server.on("request", doRequest).listen(8080, '127.0.0.1');
console.log("server runnnig");
//  上記3文はサーバー起動のための決まり文句、ポート番号とホストは自分で指定できます。


//  以下の関数はサーバーにリクエストがあったときに実行されます。
function doRequest(req, res){
  fs.readFile('./index.html', 'UTF-8', function(err, data){
    res.setHeader('Content-Type', 'text/html');
    res.write(data);
    res.end();
  });
}

#簡単なリクエスト、レスポンス

var http = require('http'); // httpオブジェクト(通信等に利用する)を使えるように

var fs = require("fs"); // fsオブジェクト(ファイルの取得に使用する)を使えるように

var server = http.createServer();

server.on("request", doRequest).listen(8080, '127.0.0.1');

console.log("server runnnig");

// 上記3文はサーバー起動のための決まり文句、ポート番号とホストは自分で指定できます。

// 以下の関数はサーバーにリクエストがあったときに実行されます。

function doRequest(req, res){

fs.readFile('./index.html', 'UTF-8', function(err, data){

res.setHeader('Content-Type', 'text/html');

res.write(data);

res.end();

});

}

htmlファイルを表示するだけでも、Node.jsだとこれぐらいのソースを記述する必要があります。このjsファイルをターミナルから「node jsファイル名」で実行すると、サーバーが動き出し、ホストとポート番号(ここでは、6行目で指定した’127.0.0.1:8080′)にアクセスすれば、htmlファイルが表示されます。

通常のwebサーバなら、htmlファイルをポンと置くだけで自動でApache等が処理してくれる作業を、Node.jsの場合は手動で記述しなければなりません。

また、「res.setHeader(‘Content-Type’, ‘text/html’)」といった形で、header情報も自分で設定しないといけません。通常のwebサーバーなら拡張子で判断して、htmlファイルの場合はhtmlとして処理してくれるので、header情報を気にする必要はありませんでした。しかし、Node.jsの場合は、ちゃんとheader情報も宣言する必要があります。

※server.on(“request”, function(req, res){})では、reqにリクエスト情報が、resにレスポンス情報が自動で入ります。

URLの処理

webサービスを作成するのですから、URLの処理はできなくてはいけませんよね？

通常のwebサーバならば、HTMLファイルにファイルパスを指定すれば、あとはwebサーバがよしなに処理をしてくれます。しかし、先程から言っているとおり、Node.jsはサーバの動きも記述しなければならないため、URLの処理も自分で行わなければなりません。

#URLハンドリング
var http = require('http'); 
var fs = require("fs");

//urlオブジェクトを使えるようにする。
var url = require("url");

var server = http.createServer();
server.on("request", doRequest).listen(8080, '127.0.0.1');
console.log("server runnnig");

function doRequest(req, res){
  // pathにreq.urlで取得したデータを代入
  var path = url.parse(req.url);

  //URLごとに異なる処理
  if(path.pathname === "/"){
    fs.readFile('./index.html', 'UTF-8', function(err, data){
      res.setHeader('Content-Type', 'text/html');
      res.write(data);
      res.end();
    });
  } else if(path.pathname === "/hello") {
    res.setHeader('Content-Type', 'text/text');
    res.write("Hello World!");
    res.end();
  } else {
    res.setHeader('Content-Type', 'text/text');
    res.write("No!");
    res.end();
  }
}

#URLハンドリング

var http = require('http');

var fs = require("fs");

//urlオブジェクトを使えるようにする。

var url = require("url");

var server = http.createServer();

server.on("request", doRequest).listen(8080, '127.0.0.1');

console.log("server runnnig");

function doRequest(req, res){

// pathにreq.urlで取得したデータを代入

var path = url.parse(req.url);

//URLごとに異なる処理

if(path.pathname === "/"){

fs.readFile('./index.html', 'UTF-8', function(err, data){

res.setHeader('Content-Type', 'text/html');

res.write(data);

res.end();

});

} else if(path.pathname === "/hello") {

res.setHeader('Content-Type', 'text/text');

res.write("Hello World!");

res.end();

} else {

res.setHeader('Content-Type', 'text/text');

res.write("No!");

res.end();

}

このプログラムは、

ルートにアクセスしたら、先程の処理と同じくindex.htmlを取得して表示
/helloにアクセスしたら、Hello World!と表示
それ以外の場合は、No!と表示

するプログラムです。

追加した処理は、ほんの数行で、

urlオブジェクトを使うためのrequire(‘url’)
path に req.urlで取得したURLをparseしたものを代入
条件分岐で処理

だけです。

このように、URLによって、取得するファイルを変更したり、処理を変更したりする命令を自分で設定できます。

テンプレートファイル「ejs」

簡単にNode.jsを紹介してきました。ここまで説明した内容で、Node.jsの基本的な動きは理解できたかと思います。最後に、ejsというテンプレートファイルを紹介します。

ejsは、ほぼhtmlだと思って構いません。違いは、jsの処理をhtmlの中に組み込んで、html内で展開できるということです。

#ejsの展開
var http = require('http'); 
var fs = require("fs");
var server = http.createServer();
var url = require("url");

//以下を追加
var ejs = require("ejs");
var index = fs.readFileSync('./index.ejs', 'UTF-8');
var humans = [
  {name: "田中", age: 30},
  {name: "木村", age: 45},
  {name: "山田", age: 60}
];


server.on("request", doRequest).listen(8080, '127.0.0.1');
console.log("server runnnig");

function doRequest(req, res){

  //ここで、ejsをレンダリング
  var data = ejs.render(index, {
    title: "年齢一覧",
    humans: humans
  })
  res.setHeader('Content-Type', 'text/html');
  res.write(data);
  res.end();
}

#ejsの展開

var http = require('http');

var fs = require("fs");

var server = http.createServer();

var url = require("url");

//以下を追加

var ejs = require("ejs");

var index = fs.readFileSync('./index.ejs', 'UTF-8');

var humans = [

{name: "田中", age: 30},

{name: "木村", age: 45},

{name: "山田", age: 60}

];

server.on("request", doRequest).listen(8080, '127.0.0.1');

console.log("server runnnig");

function doRequest(req, res){

//ここで、ejsをレンダリング

var data = ejs.render(index, {

title: "年齢一覧",

humans: humans

})

res.setHeader('Content-Type', 'text/html');

res.write(data);

res.end();

}

このソースは、ejsを読み込んで、処理をして、ブラウザに表示するためのソースです。

今までのソースとの違いは、

ejsオブジェクトを使えるようにする(require(“ejs”))
indexという変数にindex.ejsを取得して代入する(fs.readFileSyncというのは同期的にファイルを取得する命令で、ejsで処理する場合はこうしておくんだと覚えておけば大丈夫です。)
humansに配列>オブジェクトで、ejs側に渡したいデータを持たせる
最後に、それらをdoRequestの内部でレンダリング

している点です。

ファイルを読み込んで、データを渡して、レンダリングして表示するだけの処理ですので、慣れればそこまで難しくありません。

ejs側のソースは

#ejs側
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <ul>
    <% for(var i = 0; i < humans.length; i++){ %>
      <li><%= humans[i]["name"] %>は<%= humans[i]["age"] %>歳</li>
    <% } %>
  </ul>
</body>
</html>

#ejs側

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<% for(var i = 0; i < humans.length; i++){ %>

<% } %>

</ul>

</body>

</html>

となっています。htmlとjsをある程度知っている方なら、直感的に理解できると思います。

<%%>内にjsの処理
<%=%>内の場合は返り値を表示

という処理内容です。

Node.jsをマスターしていく過程を紹介していきます！

わたしもまだ、これぐらいの知識しかなく、Node.jsの真価を発揮できていません。これから、たくさんNode.jsを勉強し、様々なアプリを作って、みなさんにご紹介いたしますので、よかったら、遊びに来てください！

カテゴリー

jsでサーバサイドを実装できるNode.jsで基本的なプログラムを書いてみた！

一般的なwebサーバーとの違い

URLの処理

テンプレートファイル「ejs」

Node.jsをマスターしていく過程を紹介していきます！

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー

カテゴリー

一般的なwebサーバーとの違い

URLの処理

テンプレートファイル「ejs」

Node.jsをマスターしていく過程を紹介していきます！

RECOMMENDこちらの記事も人気です。

【momentjs】Sequelizeのtimezoneを設定する方法【…

ABOUTこの記事をかいた人

NEW POSTこのライターの最新記事

vuetifyをvue.jsに導入する際に、【no such file or…

【Typescript】呼び出しシグネチャと省略記法の書き方

React.jsのprops.childrenとはなにか？javascrip…

firebase認証のonAuthStateChangedはどこでログイン状…

プロフィール

最近の投稿

アーカイブ

カテゴリー