Node.jsを触ってみた話3

Node.jsを触ってみた話3

Node.jsを触ってみた話2の続き。

前回やったこと
・Expressとは
・Expressを使わないルーティングの書き方
・Expressを使ったルーティングの書き方

今回もまたルーティングに関する話なんだけど、ミドルウェアについても一緒に書きます。
あと調べているとExpressのルーティングに関して基本の書き方と一般的な書き方の2種類があったのでソースも例であげときます。

Expressはルーティングとミドルウェアが大事！！

ルーティングの役割

外部からくるHTTPリクエストに対して内部ロジックをマッピングすること。
ロジックっていうのはプログラムの処理内容や手順のこと。

ミドルウェアの役割

ルーティングの過程で何らかの処理を差し込むこと。
例えば認証やエラーハンドリングなど。

これらをわかりやすくいうと、クライアントからリクエストがきたときにURIとHTTPメソッドの組み合わせによって処理を振り分けるのがルーティングで、行う処理がミドルウェアのこと。
例えばDB検索を行って結果を返したり、テンプレートを出力する、とか。色んな処理書ける。

そして処理１つ１つがミドルウェアってことになる。
ちなみにミドルウェアはサードパーティのやつも使える！！

※公式ドキュメントではリクエストURIを「マウントポイント」、そのリクエストにミドルウェアを適用することを「マウントする」といっている。

ミドルウェアについてもう少し書きたいけど長くなりそうなのでそれは次回書きます。
具体的にはミドルウェアを連結させることができるのでそのやり方。（このパスからのリクエストの場合はこの処理→次の処理→最後の処理、みたいな。）

Expressを使った基本的なルーティング方法

以下のように書きます。
getの例

var express = require('express'); //Express－generatorで勝手に書かれてる
var app = express();//Express－generatorで勝手に書かれてる

app.get('/', (req, res) => {
    //ここに処理を書きます
})

上の例では、HTTPリクエストとマウントポイントとルート・ハンドラ（ミドルウェアのように動作するコールバック関数！）をマッピングしているよ。

Expressを使った一般的なルーティング方法

一般的にはルーティング用のミドルウェアモジュールを作って、それをマウントポイントにマウントする。

routingをモジュール化（router.js）。要はこれがミドルウェアってことになる。

var express = require('express'); //Express－generatorで勝手に書かれてる
var router = express.Router(); //Express－generatorで勝手に書かれてる

router.get('/', (req, res) => {
    //ここに処理を書きます
});

module.exports = router;

次に上で作ったモジュールを利用する。（app.js）

var router = require('./router');
・
・
・
app.use('/', router); 

これで作成したモジュールをapp.jsでマウントポイントにマウントできた！
前回と一部内容が被った感があるけどExpressを使ったルーティング方法の比較でした。

こちらを参考にさせていただきました！
Express + Node.jsで基本を理解した次の一歩 - ディレクトリ構成をルーティング・ミドルウェアを理解して考えてみる
express実践入門

Node.jsの基本構文2

Node.jsの基本構文2

前回の基本構文続き。

この部分のコードを解説していく。

server.on('request',function(req,res){
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('Hello world');
    res.end();
});

手っ取り早くコードを書くならチェーンメソッドでつなげて書けるけどひとつひとつ処理を分けて書きたいのでサーバオブジェクトがもっているonメソッドを使う。
onメソッドは第一引数にイベント名、第二引数に処理を書いてイベント名と処理を関連付けるメソッド。

処理の流れとしてはまずhttp.createServerがrequestされたらHttpレスポンスヘッダを出力する。
writeHeadメソッドの第一引数にはステータスコード、第二引数にはヘッダーのキーと値を渡す。
つぎにWriteメソッドでHttpレスポンスボディを出力する。レスポンスボディにはファイルの中身が入っている。

補足情報としてHttpレスポンスは3つの部品から成り立っていて、
一番上がステータスライン
二番目がHttpレスポンスヘッダ 最後がHttpレスポンスボディ
となっている。

処理が終了するときはendメソッドで閉じる。

ちなみに上に書いてあるコードをonメソッドを使わずにチェーンで書くとこうなる。
あとはここではやってないけどポート番号とIPアドレスは別ファイルに変数で持たせたほうが良いです。

var http = require('http');
http.createServer(function(req,res){
    res.writeHead(200,{'Content-Type': 'text/plain'});
    res.write("Hello world!!!");
    res.end();
}).listen(3000,'127.0.0.1');

console.log("server listening...");

次回はExpressの説明に戻りたいと思います！

Node.jsの基本構文１

Node.jsの基本構文１

前回に引き続き、こちらの記事で書いた「Expressでごにょごにょしてブラウザに表示させる処理」の詳しい解説を書こうと思ったんだけど、いったんNode.jsの基本構文についても触れたほう良いと思ったので少し脱線しますが書いておこうと思う。

Web制作会社でフロントエンドとして仕事していると開発や本番化するときにファイルをWebサーバにあげることが一般的だけどNode.jsだとサーバの考え方が少し違う。
要はWebサーバをNode.jsを使って一から作っていくということになる。実際そんなに難しくないので以下にコード載せときます。

var http = require('http');
var server = http.createServer();

server.on('request',function(req,res){
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('Hello world');
    res.end();
});

server.listen(3000, '127.0.0.1');
console.log("server listening...");

まずhttpオブジェクトをロードする。このオブジェクトはhttpの機能を提供してくれる。
httpの機能とは簡単にいうとWebサーバの機能である。（httpリクエストに応じてhtmlなどの情報を提供するシステムのこと）
だからすごく重要！

その次にcreateServerメソッドでサーバオブジェクトを作る。
それからonメソッドでrequestに対してコールバック関数で振る舞いを定義する。このrequestメソッドは誰かがサーバにアクセスしたときに発生するもので、コールバックを設定することでアクセスしたときの処理を設定できる。このときコールバック関数の引数にはreqオブジェクトとresオブジェクトをとる。
※処理の終了を意味するend()メソッドを最後に忘れずに定義する。

ここまで終わったらlisten()メソッドで、クライアントからのアクセスを待つ待機モードにする。
このコードの場合はクライアントがlocalhost:3000でブラウザにアクセスするとHello worldを返す。

Node.jsを触ってみた話2

Node.jsを触ってみた話2

前回は説明なしでとりあえずNode.jsでWebサーバーを作ってブラウザに表示させるやり方を書いたのでそれの細かい説明を書いていく。
素人が調べながら書いてるので違うところあったら指摘大歓迎です！！！

Expressとは

Node.js上で動作するWebアプリのフレームワーク（Webアプリを作るうえで必要な機能が最初から揃ってるよってこと）
例えばルーティング、ビューヘルパー、セッション管理の機能など。（ルーティング以外は全くピンとこない。。あとで調べます）
Node.jsでは一番メジャーなフレームワーク！

以下にExpressを使った場合と使わない場合のルーティングについて書いたNode.jsのコードを例としてあげておきます。

まずはExpressを使わない場合

適当にJSファイルを作成して以下を記述する。

var http = require('http')
var server = http.createServer();
server.on('request',function(req, res) {
    res.writeHead(200,{'Content-Type': 'text/plain'});
    res.write('Hello world');
    res.end();
});
server.listen(3000, '127.0.0.1');
console.log("server listening ...");

書き終わったら指定したIPとポートにアクセスすればHello worldの表示確認できるよ！

次にExpressを使った場合

ルーターをモジュールとして作成してからメインアプリケーションのパスにマウントする。（Expressが自動で作ってるからもともと書いてあるよ）

//routesディレクトリに入っているindex.js（これはExpressを入れたら一緒に落ちてくるファイルのひとつ）
var express = require('express');
var router = express.Router();

/* /に対するルートを定義しているよ。  
sendメソッド使ってるけど実際はEJSとかをテンプレートで使うと思うからその場合はrenderメソッド使う。*/
router.get('/', function(req, res, next) {
    res.send('Hello world');

    //res.render('index', { title: 'Hello world'});

});

module.exports = router;

これでルーターをモジュール化完了！ つぎにメインアプリケーションにマウントするよ！ これはapp.jsに記述する。（Expressが自動で作ってるからもともと書いてある）

//app.js
var express = require('express');

var indexRouter = require('./routes/index');

var app = express();
app.use('/', indexRouter);

こんな感じ！モジュール化したルーターを変数indexRouterに入れて、
app.use関数でミドルウェア関数をロードする。 これでマウント完了なので/にアクセスするとHello worldが送信される。

ルーターをモジュール化してマウントする方法だとルートに固有のミドルウェア関数を呼び出すことができるようになるってことだけど、全然ピンと来てない。。これって複数のルーターのモジュールを作ってルーティングしたいパスにそれぞれを結びつけるってことだと思うんだけど、これをすることでほかにもこんな便利なことあるんだよ！ってものがあるのかな？正直わからん、だれか教えてほしい。。
ミドルウェア関数ってのは、ルーティングの過程（パスと内部ロジックを結びつける間）で挿入する処理のことだから、複数の処理（=複数のミドルウェア関数）をルーティングの過程に挟むことができるってことがわかった！ ルーターレベルのミドルウェアが第三引数にnext持つのは次のミドルウェアに処理を渡すため。つまりマウントするルートに固有のミドルウェア関数を呼び出して処理を実行するし、複数の処理をしたければその分ミドルウェアを連結させていくって話ってことで理解した。連結方法はこんな感じ！分かりやすいように1秒後にconsole.log("done!")する。

router.get('/', function(req, res, next){
  res.send('Hello Express!!');
  next();
}, function(){
  setTimeout(function() {
    console.log("done!");
  },1000)
});

Expressの例を１つ挙げるだけで少し長くなったので続きはまた次回！ 調べながら少しづつ理解していこうと思います。

Node.jsを触ってみた話

Node.jsを触ってみた話

職場はWebサイト制作会社で自分は基本マークアップと簡単なJSしか書いたことないんだけど（自分はフロントエンド）、個人的にそろそろアプリ開発やっていきたい！ってことでNode.jsを触り始めた。

環境構築

とりあえず動いているものをみたいので細かい説明やらすっ飛ばして最速で環境構築してみた。
だから用語とか意味とか正直まだ全然わかってない。

Node.jsはPCにインストールされていてることが前提。
以下のコマンドを実行していく。

npm install -g express

npm install -g express-generator

次に作業ディレクトリを作りつつ最低限必要なファイルを勝手に落としてくれる以下のコマンドをたたく（この場合はhogeDirが作業ディレクトリ名）

express hogeDir -e

作業ディレクトリに移動してnpm install

npm install

ここまでで環境構築完了。

あとは以下のコマンドで実行ファイルを実行する。

node bin/www

そうすると待機状態なるのでブラウザでlocalhost:3000とたたけば初期画面が表示される。
ポート番号の3000はexpressでデフォルトで決まってるらしい。（変更も可能だと思う）
詳しい話は次回書こうと思う。

実際全然わかってないので間違ってたり非効率なところがあるかもです。
もしそういう箇所があれば指摘してほしいです。（切実）

以上環境構築からブラウザに表示させるまでを超簡単にざっくりまとめました。