Node.jsのスクリプトの基本を覚えよう (4/5)
作成:2013-04-13 10:42
更新:2013-04-13 10:42
更新:2013-04-13 10:42
■HTMLファイルを読み込んで表示する
では、実際にHTMLファイルを読み込んで表示させてみることにしましょう。
まず、読み込むHTMLファイルを作成する必要があります。ここでは「hello.html」というファイル名で作っておくことにしましょう。下にサンプルコードを上げておきますが、内容はどんなものでもまったく構いません。作成したファイルは、Node.jsのスクリプトファイル（前回作ったserverapp.js）と同じ場所に配置しておいてください。
続いて、スクリプトを作成しましょう。これも下にリストを掲載しておきます。スクリプトを記述したら、コマンドラインで「node sampleapp.js」を実行し、ブラウザからアクセスしてみてください。hello.htmlに用意したページが表示されますよ。
ここでは、リクエスト時に実行されるdoRequest関数で、hello.htmlを読み込んで表示する処理を行なっています。このdoRequestの読み込み処理は、整理すると以下のようになっていることがわかります。
第２引数dataに、読み込まれたテキストが保管されています。これをresponseのwriteで書き出せばいいわけですね。readFileのコールバック関数の処理を見ると、
このように、非同期で実行する処理が含まれている時には、「非同期処理が完了した後でレスポンスの処理をする」という点に注意する必要があります。
まず、読み込むHTMLファイルを作成する必要があります。ここでは「hello.html」というファイル名で作っておくことにしましょう。下にサンプルコードを上げておきますが、内容はどんなものでもまったく構いません。作成したファイルは、Node.jsのスクリプトファイル（前回作ったserverapp.js）と同じ場所に配置しておいてください。
続いて、スクリプトを作成しましょう。これも下にリストを掲載しておきます。スクリプトを記述したら、コマンドラインで「node sampleapp.js」を実行し、ブラウザからアクセスしてみてください。hello.htmlに用意したページが表示されますよ。
ここでは、リクエスト時に実行されるdoRequest関数で、hello.htmlを読み込んで表示する処理を行なっています。このdoRequestの読み込み処理は、整理すると以下のようになっていることがわかります。
fs.readFile('./hello.html', 'UTF-8',
function(err, data) {…後処理…});第１引数に'./hello.html'とファイルパスを指定し、第２引数には'UTF-8'を指定します。そして第３引数に、読み込み完了後の処理を行うコールバック関数が用意されています。このコールバック関数では、２つの引数が用意されています。第１引数は、エラーが発生した場合のエラーメッセージです。読み込みに失敗した場合の処理を用意するならば、関数内で、「if (err){……}」といった形で書いておけばよいでしょう。第２引数dataに、読み込まれたテキストが保管されています。これをresponseのwriteで書き出せばいいわけですね。readFileのコールバック関数の処理を見ると、
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();このように、writeHead、write、endをこの中で実行しています。このことは重要です。例えば、このdoRequestの処理は、ついこう書きたくなるかもしれません。function doRequest(req, res) {
fs.readFile('./hello.html', 'UTF-8',
res.writeHead(200, {'Content-Type': 'text/html'});
function(err, data) {
res.write(data);
});
res.end();
}読み込んだデータを出力するwriteだけreadFileのコールバック関数に用意すればいいや、と考えればこうなります。が、これでは動かないのです。「readFileは非同期である」という点を忘れてはいけません。readFileのコールバック関数が呼び出されるよりも前に、その後にあるres.endは実行されてしまいます。コールバック関数のres.writeを実行するときには既にリクエスト処理は完了しているのです。このように、非同期で実行する処理が含まれている時には、「非同期処理が完了した後でレスポンスの処理をする」という点に注意する必要があります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※hello.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>sample</title>
<style>
body { font-size:12pt; color:#006666; }
h1 { font-size:18pt; background-color:#AAFFFF; }
pre { background-color:#EEEEEE; }
</style>
</head>
<body>
<header>
<h1 id="h1">Sample Page</h1>
</header>
<div role="main">
<p>これはNode.jsのサンプルページです。</p>
</div>
</body>
</html>
※sampleapp.jsのスクリプト
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
// リクエストの処理
function doRequest(req, res) {
fs.readFile('./hello.html', 'UTF-8',
function(err, data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
}
※関連コンテンツ