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の読み込み処理は、整理すると以下のようになっていることがわかります。
第2引数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',第1引数に'./hello.html'とファイルパスを指定し、第2引数には'UTF-8'を指定します。そして第3引数に、読み込み完了後の処理を行うコールバック関数が用意されています。このコールバック関数では、2つの引数が用意されています。第1引数は、エラーが発生した場合のエラーメッセージです。読み込みに失敗した場合の処理を用意するならば、関数内で、「if (err){……}」といった形で書いておけばよいでしょう。
function(err, data) {…後処理…});
第2引数dataに、読み込まれたテキストが保管されています。これをresponseのwriteで書き出せばいいわけですね。readFileのコールバック関数の処理を見ると、
res.writeHead(200, {'Content-Type': 'text/html'});このように、writeHead、write、endをこの中で実行しています。このことは重要です。例えば、このdoRequestの処理は、ついこう書きたくなるかもしれません。
res.write(data);
res.end();
function doRequest(req, res) {読み込んだデータを出力するwriteだけreadFileのコールバック関数に用意すればいいや、と考えればこうなります。が、これでは動かないのです。「readFileは非同期である」という点を忘れてはいけません。readFileのコールバック関数が呼び出されるよりも前に、その後にあるres.endは実行されてしまいます。コールバック関数のres.writeを実行するときには既にリクエスト処理は完了しているのです。
fs.readFile('./hello.html', 'UTF-8',
res.writeHead(200, {'Content-Type': 'text/html'});
function(err, data) {
res.write(data);
});
res.end();
}
このように、非同期で実行する処理が含まれている時には、「非同期処理が完了した後でレスポンスの処理をする」という点に注意する必要があります。
(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(); }); }
※関連コンテンツ