とあるWeb屋の備忘録

とあるWeb屋の備忘録。たまに雑記。

Node.jsでファイルを読む

Node.jsでファイルを読む

今回はNode.jsで自分が指定したファイルを読み込む方法について書くよ!

手順としてはファイルを読み込むために必要なfs関数を使います。
fsはファイルを操作するために用意されているモジュールです。

var http = require('http');
var fs = require('fs');

var server = http.createServer();

server.on('request', function(req, res) {

    fs.readFile(__dirname + '/test/index.html', 'utf-8', function(err, data) {
        if(err) {
            res.writeHead(404, {'Content-Type': 'text/plain'});
            res.write("not found!!!");
            return res.end();
        }
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
    });
});
server.listen(3000, '127.0.0.1');
console.log("server listening...");

fs.readFileでファイルを読み込んだ後の処理をコールバックで定義しているので、エラー処理のハンドリングとそうでない場合を条件式で出しわけします。
コールバック関数は第一引数にエラーオブジェクト、第二引数に読み込んだファイルデータが渡されます。

次回は今回使用したreadFile()と、次回以降登場するreadFileSync()の違いについて説明しようと思います。

ご指摘や訂正あれば大歓迎です!!!!!

Node.js+Expressでpostを使う!

Node.js+Expressでpostを使う!

Node.js+Expressでgetを使う!の続き。

前回やったこと
・Node.jsでgetを扱う。(クエリによってページ内の文言出しわけ)

今回はExpressでのpostについて書いていきたいと思います。

POST送信について

postはHTTPメソッドのうちの一つで、HTTPメソッドにはほかにもget,put,deleteとかあります。
HTTPメソッドっていうのは、ブラウザからサーバーに送るリクエストの種類のことです。
postだとHTTPリクエストボディに値を入れてサーバに送る。

以下の例はresultページにformからアクセスしたときに、formの値を取ってresultページに表示しています。

result.js

router.post('/', function(req, res, next) {

  var name = req.body.name;
  var age = req.body.age;

  res.render('result', {
    title: "結果!",
    name: name,
    age: age
  });

});

req.bodyでHttpレスポンスボディから値を取得しています。.nameや.ageは値を取り出すためのキーです。

app.js

var resultRouter = require('./routes/result');
app.use('/result',resultRouter);

index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

<form action="./result" method="post">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="age" placeholder="age">
    <input type="submit" value="送信!">
</form>

result.ejs

<body>
    <h1このページのタイトルは><%= title %>です!</h1>
    <ul>
        <li>名前:<%= name %></li>
        <li>年齢:<%= age %></li>
    </ul>
</body>

これでlocalhost:3000/にアクセスしてform入力から送信ボタンを押すとresultページにpost通信されます!
あとはresult.jsのミドルウェア関数で処理してあげる感じです。 resultページに入力した名前と年齢が表示されるかと思います。

以上がpostの基本的な使い方でした!

Node.js+Expressでgetを使う!

Node.js+Expressでgetを使う!

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

前回やったこと
・複数のミドルウェアの処理をnext();でつなげる

今回はExpressでのgetについて書いていきたいと思います。

GET送信について

getはHTTPメソッドのうちの一つで、HTTPメソッドにはほかにもpost,put,deleteとかあります。
HTTPメソッドっていうのは、ブラウザからサーバーに送るリクエストの種類のことです。
getだとページをリクエストしていることになるんだけど、それと一緒にURLにパラメータをくっつけてサーバーに送ることができるよ。

以下の例はresultページにクエリを指定してアクセスしたときに、クエリの値によって画面の表示を出しわけるってことやってます。

result.js

router.get('/', function(req, res, next) {

  var data = {
    p01 : {
      pageNum: 01,
      author: "aaa"
    },
    p02 : {
      pageNum: 02,
      author: "bbb"
    }
  };

  var query = req.query.p;

  res.render('result', {
    title: "結果",
    pageNum: data[query].pageNum,
    author: data[query].author
  });

});

app.js

var resultRouter = require('./routes/result');
app.use('/result',resultRouter);

result.ejs

  <body>
    <h1このページのタイトルは><%= title %>です!</h1>

    <ul>
      <li>ページ数:<%= pageNum %></li>
      <li>著者:<%= author %></li>
    </ul>
  </body>

これでlocalhost:3000/result/?p=p01でアクセスするとPageNumは01、authorはaaaが出力されます。

次回はpost通信について書きます!

Node.jsを触ってみた話4

Node.jsを触ってみた話4

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

前回やったこと
・ルーティングとミドルウェアについて
ルーターモジュールを使ったルーティングの方法と使わない方法の比較

今回は前回やったことにプラスして、ミドルウェアの処理を複数実行する方法を書くよ!
前回のおさらいとして2つのソースを以下に挙げときます。

ルーターモジュール使わない方法

var express = require('express');
var app = express();

app.get('/', (req, res) => {
    res.send('Hello world!!!');
});

ルーターモジュールを使う方法

まずはモジュール化

//hoge.js
var express = require('express');
var router = express.Router();

router.get('/', (req, res) => {
    res.send("Hello world!!!");
})

module.exports = router; //ルーティングを設定したrouterオブジェクトを返す

アプリケーションにマウント

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

var hogeRouter = require('./hoge');

app.use('/', hogeRouter);


ミドルウェアに処理を渡す方法

ミドルウェアに複数の処理を実行させるにはnext();を使う!
next()関数は次のミドルウェア関数に対するアクセス権限を持つ関数!
nextの名前は変更できるが慣習的に使われているので変えない!

以下ソース例
モジュール利用時のミドルウェア関数に第三引数としてnext()を与えます。
そして処理を一つ増やして、next()で処理を渡してあげます。

//hoge.js
var express = require('express');
var router = express.Router();

router.get('/', (req, res, next) => {
    res.send("Hello world!!!");
    next();
}, function(req, res) {
    console.log("test message!");
});

module.exports = router;

これでページに"Hello world"が出力されてからコンソール画面に"test message"が出力されます! ただ疑問点があって、イベントループ的にこれは"Hello world"が先なのか"test message"が先なのか  ちょっと混乱してきた。。。

実際next()はミドルウェア関数のコールバックとして渡されるはずだけど、ノンブロッキングってことになるからもしかしてページに"Hello world"が表示されるよりも先に"test message"が出るのかな。。。?
わかる人いたら教えてください!!!!!!

次回はgetとpostの処理を書いていきたいと思います。
Node初心者が書いているため間違いや指摘などあれば大歓迎です!よろしくお願いします!!!

Node.jsを触ってみた話3

Node.jsを触ってみた話3

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

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

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

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

ルーティングの役割

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

ミドルウェアの役割

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

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

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

※公式ドキュメントではリクエス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の基本構文1

Node.jsの基本構文1

前回に引き続き、こちらの記事で書いた「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を返す。