Node.jsでサーバーを起動する【Hello World!!!】

本記事では、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」に貼り付けたら、保存しましょう。

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');

 

ソースコードを少し説明

  • requirehttpオブジェクトを作成します。requireは良く使用されるので覚えておきましょう。
  • httpオブジェクトのcreateServerメソッドを使用してサーバーを作成します。createServerの引数にはコールバック関数を指定します。
  • コールバック関数(※1)の中に書いてある処理が、サーバーが呼ばれたときに動作する内容になります。httpレスポンスのヘッダー(※2)、レスポンス内容を指定します。
  • serverオブジェクトのlistenメソッドでサーバーを待ち受け状態にします。

 

※1. コールバック関数については下記を参照してください。

参考記事JavaScriptコールバックを整理してみた【再入門】

※2. httpレスポンスについては下記を参照してください。

参考記事MDN web docs / 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つのファイルを作成しましょう。

 

hello-world2.js

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');
index.html

copy

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello World!!!</title>
  </head>
  <body>
    <h2>Hello World!!!</h2>
  </body>
</html>

 

ソースコードを少し説明

  • requirefsオブジェクトを作成します。
  • 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時間以上の動画講義を見ることができます。

UdemyでNode.jsを学ぶ

 

Expressを使いたい方は下記記事を参照ください!

関連記事Node.jsでExpressを使ってサーバーを起動する