本記事では、Node.jsでサーバーを起動する方法をまとめました。
サーバーを起動するときに便利なので、本記事ではVisual Studio Codeを使用しています。
Node.jsとVisual Studio Codeをまだインストールしていない場合は下記を参照してください。
Node.jsでサーバーを起動するための準備をする
- hello-world.js
1. 作業するフォルダを作成します。本記事では、「C:\Users\Public\Documents」の下に「Node」フォルダを作成します。
2. Visual Studio Codeを起動して「ファイル / フォルダーを開く」をクリックします。
3. 1で作成した「Node」フォルダをを選択して、「フォルダーの選択」をクリックします。
4. 左上の「エクスプローラー」をクリック、「NODE / 新規ファイル」をクリックしたら、「hello-world.js」とファイル名を入力しましょう。
copy
hello-world.js
6. 下記ソースをコピーして、5で作成した「hello-world.js」に貼り付けたら、保存しましょう。
copy
var http = require('http');
var server = http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/plan'});
res.write('Hello World!!!');
res.end();
})
server.listen(3000);
console.log('launch server');
- requireでhttpオブジェクトを作成します。requireは良く使用されるので覚えておきましょう。
- httpオブジェクトのcreateServerメソッドを使用してサーバーを作成します。createServerの引数にはコールバック関数を指定します。
- コールバック関数(※1)の中に書いてある処理が、サーバーが呼ばれたときに動作する内容になります。httpレスポンスのヘッダー(※2)、レスポンス内容を指定します。
- serverオブジェクトのlistenメソッドでサーバーを待ち受け状態にします。
※1. コールバック関数については下記を参照してください。
参考記事：JavaScriptコールバックを整理してみた【再入門】
※2. httpレスポンスについては下記を参照してください。
参考記事：MDN web docs / HTTP レスポンスステータスコード
Node.jsでサーバーを起動する【Hello World!!!】
1. Visual Studio Codeからサーバーを起動するために、ターミナルを表示ます。「表示 / ターミナル」（またはショートカット：「Ctrl + @」）をクリックしましょう。
画面下部にターミナルが表示されます。ここからはコマンドプロンプトと同じコマンドを打つことができます。
また、上記で「Node」フォルダを開いたことで、カレントディレクトリがNodeの状態で開かれます。
2. ターミナルに”node hello-world.js“と入力し、Enterキーを押しましょう。
copy
node hello-world.js
ターミナルに”launch server“と表示されたらサーバーが正常に起動しています。
インターネットブラウザ（Google Chromeなど）を開いて、”localhost:3000“と入力しましょう。
copy
http://localhost:3000/
これで”Hello World!!!“と表示されることが確認できるはずです。
Serverを止める場合は、ターミナル上で”Ctrl + C“を押しましょう。
Node.jsでHTMLファイルを読み込む
- hello-world2.js
- index.html
1. 次は、HTMLファイルを開けるようにします。「Node」フォルダの下に、「hello-world2.js」「index.html」の2つのファイルを作成しましょう。
copy
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req, res){
fs.readFile('./index.html', 'utf-8', function(err, data){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
});
server.listen(3000);
console.log('launch server');
copy
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello World!!!</title>
</head>
<body>
<h2>Hello World!!!</h2>
</body>
</html>
- requireでfsオブジェクトを作成します。
- fsオブジェクトのreadFileメソッドでhtmlファイルを読み込みます。1つ目の引数にhtmlファイルを指定します。同じフォルダにあるファイルを指定するので”./index.html“にします。
- htmlファイルをを開くので、Content-Typeを”text/html“にします。Content-Typeの説明はこちら。
2. ターミナルに”node hello-world2.js“と入力し、Enterキーを押しましょう。launch serverと表示されればOKです。
3. インターネットブラウザ（Google Chromeなど）を開いて、”localhost:3000“と入力すれば下記が開かれます。
さらにNodeを学びたい方はUdemyの「The Complete Node.js Developer Course」がおすすめです。セールの時に買えば1,200円ほどで30時間以上の動画講義を見ることができます。
Expressを使いたい方は下記記事を参照ください！
