この記事では、『Node.js』を用いて、入門用に簡単なサンプルとしてブラウザからのアクセスに特定の画面を返すようローカルサーバを作成します。
また、本記事で紹介しているコードはダウンロード可能ですので、実際に動作を試すことができます。
ぜひ活用してください。
Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. ... 外部サイトへアクセス
nodejs.org目次
- 1.Node.jsのインストール
- 2.サンプルのダウンロード
- 3.Node.jsでHello World作成1 - フォルダを作成する
- 4.Node.jsでHello World作成2 - パッケージ情報を作成する
- 4.1.コマンドプロンプトを起動する
- 4.2.カレントディレクトリを特定のフォルダへ移動する
- 4.3.Node.jsのパッケージ情報を作成する
- 5.Node.jsでHello World作成3 - ソースコードを記述する
- 5.1.ソースコードの解説
- 5.1.1.require()
- 5.1.2.res.writeHead()
- 5.1.3.res.end()、および、res.write()
- 5.1.4.捕捉：JavaScriptでの簡易的なヒアドキュメントの実現
- 5.1.5..listen
- 6.Node.jsでHello World作成4 - 実際に起動して動作を確かめる
- 6.1.HelloWorld.jsの実行
- 6.2.Node.jsのWindows Defender Firewallの設定
- 6.3.ブラウザで実際にアクセスして表示する
- 6.4.HelloWorld.jsの終了
- 7.まとめ：Hello Worldを作成する手順
- 8.リファレンス
- 9.合わせて読みたい
Node.jsのインストール
Node.jsをまだインストールしていない方は、以下の記事へアクセスしてインストールしてください。
Node.jsは導入に5分とかかりません。
Node.js3ステップ12クリックだけでインストールする方法!Node.jsの環境構築は簡単です。インストールはなんと、3ステップ、12クリックだけで完了します!たったそれだけで、最高に便利な開発環境が無料で用意できます! ... 続きを読むサンプルのダウンロード
本記事では、解説しているコードを全てダウンロードできます。
ダウンロードの際は、以下の条件に同意してください。
- このサンプルやファイルをWEBサイト等に公開することを禁止します
- このサンプルをベースに改造・開発を行った場合、ソースコードを不特定多数に公開することを禁止します
- このサンプルをベースに改造・開発を行い、ビルドした結果については一切の制限事項はありません
なお、この制限の意図は「最近横行している、他人のWEBコンテンツを不正に流用して金儲けをおこなおうとするスプログやまとめサイトへの転載を排除するため」です。
良識的な利用においては、一切の制限を課す予定はありません。
ご理解の上、ダウンロードをお願いします。
Node.jsでHello World作成1 - フォルダを作成する
まず、Hello Worldのコードやリソース類を格納するためのフォルダを作成します。
私は以下の通りに作成しました。
C:\dev\js\samples\nodejs\
Node.jsでHello World作成2 - パッケージ情報を作成する
コマンドプロンプトを起動する
Windowsキーとrキーを同時に押して、「cmd」と入力し、Enterキーを押して、コマンドプロンプトを起動します。
カレントディレクトリを特定のフォルダへ移動する
Node.jsのパッケージ情報を作成する
キーボードから、以下のコマンドを入力し、最後にEnterキーを押します。
npm init -y
すると、以下のような内容が出力されます。
C:\dev\js\samples\nodejs>npm init -y
Wrote to C:\dev\js\samples\nodejs\package.json:{
"name": "nodejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Enterキーを押す。
Node.jsでHello World作成3 - ソースコードを記述する
続けて「HelloWorld.js」を以下に示す内容で作成し、保存します。保存する際のエンコーディングは「UTF-8」にしてください。
require('http').createServer((req, res)=>{
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(function(){/*<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="description" content="This is a Hello World of Node.js" />
<title>Hello Node.js World!</title>
</head>
<body>
<h1>Welcome to Node.js World!</h1>
<p>日本語もかけるよ!</p>
</body>
</html>*/}.toString().slice(13, -3), 'utf-8');
}).listen(8080);ソースコードの解説
require()
require(～)は、Node.jsに搭載されているパッケージを使用するための宣言です。require('http')と指定することで、HTTPアクセスのための機能を使えます。
こうして取得したオブジェクトに対してcreateServer()メソッドを呼び出し、Hello World用のコードを匿名メソッドで定義しています。
この匿名メソッドはreq（リクエスト用）と、res（レスポンス用）という2つのオブジェクトを引数で受け取り、これらを使用して処理を記述します。
res.writeHead()
res.writeHead(～)は、レスポンスヘッダーへの書き出しに使用します。
指定するのは書き出したいレスポンスヘッダーの要素をキーとし、書き出す値を指定したハッシュ構造のオブジェクトです。
ここではHTMLを書き出すためキーにContent-Typeを指定し、'text/html'という文字列を指定しています。
res.end()、および、res.write()
res.end(～)は、レスポンスの書き出し終了を指定するために使います。また、res.end(～)は文字列を受け取ると、レスポンスを終了する前にその文字列を出力できます。なお、res.write(～)というメソッドももちろん用意されています。
また、res.writeもres.endも、第二引数に文字コードを指定できます。この例では「UTF-8」を指定しています。このおかげで日本語を書き出しても文字化けが起こりません。
捕捉：JavaScriptでの簡易的なヒアドキュメントの実現
JavaScript初心者の方には、以下の記述に面食らってしまうかもしれません。
function(){/*<!DOCTYPE html>
～
</html>*/}.toString().slice(13, -3)これはJavaScriptで簡易的な‘ヒアドキュメント’を実現するためのテクニックです。変数値の展開などはできませんが、「+」（加算演算子）を用いて冗長な記述をする必要がありません。
JavaScriptは関数を定義すると、その定義に含まれる「コメントを含めたすべてのコード」を記憶します。そしてその関数に対してtoString()を呼び出した場合（前提としてtoString()がオーバーライドされていない場合）、記憶されている関数の内容が全て展開されるという性質を持っています。
したがって、展開された文字において、前後の無用な「function(){/*」（半角13文字）と、「*/}」（半角3文字）を除いた内容を取り出すことで、簡易的なヒアドキュメントの代わりに使えるのです。
ヒアドキュメントを用いないと、以下のように記述せねばならず面倒です。
res.end('<!DOCTYPE html>\n' +
'<html lang="ja">\n' +
' <head>\n' +
' <meta charset="utf-8" />\n' +
' <meta name="description" content="This is a Hello World of Node.js" />\n' +
' <title>Hello Node.js World!</title>\n' +
' </head>\n' +
' <body>\n' +
' <h1>Welcome to Node.js World!</h1>\n' +
' <p>日本語もかけるよ!</p>\n' +
' </body>\n' +
'</html>\n'}, 'utf-8');なお、Node.jsはヒアドキュメント用のパッケージが存在するため、規模によっては導入しても良いでしょう。今回はサンプル用途ですので、この簡易的なヒアドキュメントで十分です。
実際にこの仕組みを用いて返却されてきたコードを見てみると、問題なく動作していることが分かるでしょう。
.listen
最後の行の.listen(～)によって、指定したポート番号でHTTPアクセスを待っています。
Node.jsでHello World作成4 - 実際に起動して動作を確かめる
作成したHello Worldを実際にブラウザで表示してみましょう。
HelloWorld.jsの実行
コマンドプロンプトへ以下のコマンドを入力し、Enterキーを押します。
node HelloWorld.js
Node.jsのWindows Defender Firewallの設定
サンプルコードにエラーがなければ、「Windowsセキュリティの重要な警告」というダイアログが初回に表示されることがあります。
これは作成するサンプルをどこまで公開するのかという設定です。基本的には同じネットワーク内（ルーターを超えない範囲≒プライベートネットワーク）だけに公開することをお勧めします。
ブラウザで実際にアクセスして表示する
ブラウザのアドレスバーに以下のURLを入力してEnterキーを押すと、作成したHello Worldを表示できます。
HelloWorld.jsの終了
コマンドプロンプトを「✖」ボタンを押して閉じるか、CTRLキーとCキーを押して終了できます。
まとめ：Hello Worldを作成する手順
以下に手順をまとめておきますので、分からない点がないか最終確認をしてみると良いでしょう。
【Node.jsでのHello Worldの作成手順】
- ソースコードやリソースを格納するフォルダを作成する
- 「npm init -y」コマンドを用いてパッケージ情報を作成する
- ソースコードを作成する
- 「node ファイル名」コマンドを用いて起動する
- 「https://localhost:8080」へアクセスして実際に表示する
- コマンドプロンプトを閉じるか、CTRLキーとCキーを押して終了する
リファレンス
合わせて読みたい
JavaScriptのPromise/async/awaitサンプル!実際に操作し理解しよう!両コードを比較し違いを学ぼう!ダウンロード可能JavaScriptのPromise/async/awaitの動作を理解できる、実際に動作させて挙動を理解できるサンプルコードです。全く同じ動作をするサンプルコード2つを比較し、あなたの理解を助けます。サンプルコードはコメント付きでダウンロード可能。 ... 続きを読む Node.js3ステップ12クリックだけでインストールする方法!Node.jsの環境構築は簡単です。インストールはなんと、3ステップ、12クリックだけで完了します!たったそれだけで、最高に便利な開発環境が無料で用意できます! ... 続きを読む 
Node.js2ステップ5クリックだけでアンインストールする方法Node.jsの環境構築は簡単です。そして、Node.jsを使わなくなったても、簡単にアンインストールできます。なんと、2ステップ、5クリックだけで済むのです。 ... 続きを読む 
