3. 第3回「Node.js入門」htmlファイルを表示　node.js

第3回「Node.js入門」htmlファイルを表示　node.js

こんにちは。今回は Node.js でHTMLファイルの表示についてやって行きたいと思ます。

 

始めに

今回、ブログを執筆させて頂くうえで、とても参考になるサイトがありました。

Node.jsのスクリプトの基本を覚えよう　（libro様）

おかげさまで、より深く理解でき、何も問題なくプログラムを動かせることができました。
感謝いたします。

※すごく丁寧で分かりやすいサイトですので、良かったら見てみてください。
※本サイトは、著者の自分が解りやすくまとめ、オリジナルをアレンジしたものであり、パクリにならないように気を付けます。

 

目次

・「html」ファイルを使うメリット

・基本のスクリプトとhttpオブジェクト

・ファイルの読み込みと「fs」オブジェクト

・HTMLファイルを読み込んで表示する

・HTML内の一部をスクリプトで変更する

・まとめ

・今回の記事を書くにあたって参考にしたサイト

 

・「html」ファイルを使うメリット

　Node.jsには、HTMLファイルを使わなくても、Web画面上に書き出す機能があります。（responseのwrite 等）

しかし、実際問題、HTMLファイルを使わずして、Webアプリを作るのは気の遠くなる作業です。

JSファイル  HTMLファイル  CSSファイル　等は区別して保管しておけば、更に作りやすくなるでしょう。

 

プログラマーや、デザイナーが関わる仕事なら、より効率的になるんじゃないでしょうか。

 

 

・基本のスクリプトとhttpオブジェクト

 

●具体的なソース

app.js と名前を付けて保存してください。

var http = require('http');
 
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
 
// リクエストの処理
function doRequest(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write('Hello World\n');
    res.end();
}

コマンドプロンプトで、保存したフォルダへ移動し、下記のコマンドを実行します。

node app.js

ブラウザで「 http://localhost:1234/ 」を確認すると

と、表示されます。

 

 

●具体的なソースの説明

1行目

var http = require('http'); 

引用元

httpオブジェクトのロード

　まず最初に行うのは、必要なライブラリ類のロードです。これは「require」という関数を使って行います。引数に、読み込むオブジェクト名を指定することで、そのオブジェクトが読み込まれて返されます。これを変数に代入して利用することになります。

　ここでは「http」というオブジェクトを用意していますね。これは文字通りHTTPの各種機能をまとめたものです。ここからサーバーのオブジェクトを作成します。

　どういったアプリケーションを作ろうとしても、やっぱり最初にライブライリのロードが必要です！

「require」で読み込み、それをオブジェクトで使うために、変数に代入します。

 

3行目

var server = http.createServer();

引用元

Serverオブジェクトの作成

　httpオブジェクトの「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成します。これが、いわばNode.jsの「サーバー」となる部分です。このオブジェクトを用意し、必要な設定をしてからサーバーとして実行します。ここでは引数なしで呼び出していますが、以下のように書くこともできます。

http.createServer(function(○○){
    ……処理が書いてある……
}).listen(○○);

　おそらく、Node.jsのサイトやその他の解説サイトを見ると、たいていはこの書き方をしているはずです。createServerの引数に、サーバーでリクエストを受け取った時の処理を関数として用意しておく書き方です。また、その後にlistenという待受のためのメソッド（後述）も続けて書いてあります。

　この書き方でも全く問題ないのですが、全部ひとまとめに書いてあるため、慣れないとちょっとわかりにくい気がするので、ここではあえて「createServer時には引数はなし。後で必要な処理を用意する」という書き方をしてあります。

　説明がとても解りやすいです。

httpライプラリの、「createServer()」を実行することで、サーバーと立ち上がり、みんながアクセスできるという事ですね。

 

4行目

server.on('request', doRequest);

引用元

リクエストの処理を設定

　http.Serverオブジェクトには、さまざまなイベントが用意されており、その処理を組み込むためのメソッドも用意されています。「on」というメソッドは、指定のイベント処理を組み込むためのもので、第一引数にイベント名を、第２引数に組み込む処理（関数）をそれぞれ指定します。

　ここでは、「request」というイベントに、「doRequest」という関数を割り当てています。requestというのは、http.Serverオブジェクトがクライアントからのリクエストを受け取ったときに発生するイベントで、要するにこれで「ブラウザからサーバーにアクセスした時のサーバー皮の処理」を組み込むわけです。

　jQueryのイベント処理に似ています。（Node.js は JS なので当然なのですが・・・)

//jQueryのイベント処理　の例
$(div).on("click",function(){
    //ここにクリックされた時の処理を書きます。
});

　Node.jsの場合は、第二引数に、ファイル下部に記述している関数を指定しています。

その為、http.Serverオブジェクトがクライアントが、このページをアクセスした時に行われる処理は、その「doRequest」という関数になります。

 

5行目

server.listen(1234);

引用元

待ち受けスタート

　http.Serverオブジェクトの準備が整ったら、「listen」メソッドを実行します。これにより、サーバーは待ち受け状態となり、クライアントからリクエストがあればそれを受け取り処理するようになります。引数にはポート番号を指定してあります。第２引数としてホスト名を指定したり、第３引数にバックログを指定したり、第４引数にコールバック関数を用意したりすることもできるんですが、とりあえず「第１引数にポート番号」だけ覚えておけば十分です。

　自分の環境だと、「  http://localhot:1234  」と、ここで指定したポート番号を付記する事でアクセスできるようになります。

URL + : + ポート番号

 

6行目

console.log('Server running!');

引用元

コンソールに出力

　listenで待ち受けスタートした所で、メッセージをコンソールに出力しています。consoleはコンソールを扱うためのオブジェクトで、「log」でログ出力を行うことができます。ちょっとしたデバッグ用にログの出力は覚えておくと重宝するでしょう。

　Windowsで、サーバーを立ち上げた場合ですと、コマンドプロンプトに、ログが出力されます。

「Server running!」　

サーバーを停止したい場合は、「 Ctr + c 」ボタンを2回押しで止まります。

 

 

 

1 2 3 4 5

,,,

« Previous Post Next Post »

Comments

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です