本当の初心者のためのNode.js超入門 ~Webサーバー構築編~

はじめに

　タイトルにある通り、「本当にNode.js初心者です。」という方向けに書いているこのシリーズですが、前回の記事ではNode.jsの環境構築を行いました。
　今回は、Node.jsの醍醐味である（かなり個人的主観）Webサーバーの構築を行っていきたいと思います（ローカルサーバーです）。

前回インストールが完了したので、改めてここで私の実行環境について記載しておきます。
また、今回の記事をそのまま動かすのであれば、デスクトップ上など任意の位置にhttp_test（フォルダ名は何でもOK）というフォルダを作成し、ここで作業を行うことをおすすめします。

項目	スペック
プロセッサ	Intel(R)Xeon
メモリ	16GB
OS	Windows 10Pro
node.js	v12.13.0
npm	6.12.0
yarn	1.19.1

npmとyarnについては後ほど説明します。

モジュールのインストール

　Node.jsでは（ほかの言語もそうですが）、やりたいことに応じて様々なモジュールが用意されています。ここではWebサーバー構築に必要なhttpというモジュールのインストールを行っていきます。

モジュールって？

　かなりざっくり説明させて頂きますと、「部品」です。
　似たような言葉にライブラリやプラグインといった言葉がありますが、使用側の目線が違う程度でどれもやれることは「機能の拡張」ということで同じです。
　余力のある方はこの辺りの違いについても調べてみて下さい。いろいろな意見があります。

npmとyarn

　それでは実際にモジュールをインストールしようと思ったとき、Node.jsではどのようにするかについて説明していきます。Node.jsにはパッケージマネージャー（モジュールのインストールを行ったりするもの）としてかなりメジャーなnpmと、Facebookが作成したYARNがあります。
　どちらもできることは特に変わらないのですが、この2つにはどのような違いがあるでしょうか？

yarnはnpmの問題点を解決することが目的

　広く世界中で利用されているnpmですが、以下の2点が問題として指摘されています。

• インストール時にコードを実行することを許可しているため、セキュリティー上の問題がある
• インストールパッケージの速度及び一貫性が不十分

　はい。もう難しいですね。
　YARNではセキュリティー面が改善されているんだろうなっていうアバウトな認識で今は大丈夫だと思います（超入門レベルですしね）。
　てことでYARN使いましょう（npmがいいんだという方はnpmで構いません）。

yarnをインストール

　npmはNode.jsをインストールした際に併せてインストールされますが、yarnは別途インストールを行う必要があります。こちらからインストールのページに飛び、OSとバージョンを確認の上ページ下部にある「インストーラをダウンロードする」でダウンロードして下さい。バージョンについては、「安定版」と書かれているものを選ぶことをおすすめします。
　あとは落ちてきたインストーラを実行してインストールを行うだけです。

インストール成否の確認

　例のごとくバージョン確認コマンドを実行して、正常にインストールが行われているかを確認しましょう。

YARNのバージョン確認

yarn --version

YARNのバージョン

1.19.1

　このようにインストールしたバージョンが表示されれば成功です。

yarnを使ってhttpモジュールをインストール

　前置きが大変長くなってしまい申し訳ありませんが、ここでようやくモジュールのインストールを行います。先ほどインストールしたyarnのコマンドを使ってインストールを行います。冒頭に記載したフォルダにcd ./Desktop/http_testなどのように移動してからインストールのコマンドを入力しましょう。

httpモジュールのインストール

yarn add http

インストールの実行結果

[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ http@0.0.0
info All dependencies
└─ http@0.0.0
Done in 0.68s.

　これでモジュールのインストールが完了しました。

package.json

　ここでちょっとしたポイントです。先ほどのコマンドを入力してモジュールのインストールが完了したタイミングで、作業環境内にpackage.jsonというファイルが作成されているかと思います。中身を見てみると

package.json

{
  "dependencies": {
    "http": "^0.0.0"
  }
}

となっていますね。
　御覧の通り、このpackage.jsonには作成したNode.jsプロジェクトで利用しているライブラリをはじめ、様々な情報が記録されています。そしてここに記載のあるライブラリに関しては、別の実行環境にプロジェクトが移動した際に一発でインストールを行うことができるようになっています。プロジェクトで実際に使用するモジュールはここに記述されるようにしておきましょう。
　ちなみに、package.jsonへの追加を行わずにモジュールをインストールするコマンドは以下です。

パッケージへの記載なしインストール

yarn install http

JSファイルの作成

　さて、前回環境構築をしましたが、まだNode.jsのコードを一行も書いていませんよね。超入門なのにモジュール周りから説明するのかよとバッシングが聞こえてきそうですが、本当に必要なことを最短でお伝えしようと思っているのでご理解下さい。
　それではいよいよお待ちかねのNode.jsのコーディングの時間です。前回の記事でも記載した通り、Node.jsはサーバーサイドのJavaScriptですので、使用するファイルの形式は.jsです。まずはJavaScriptのファイルを作成しましょう（後のことを考えてファイル名はserver.jsとでもしておきましょう）。
　試しにJavaScriptからメッセージを表示するコマンドを記述してみます。

ディレクトリ構成

http_test
  ├ node_modules
  ├ package.json
  ├ server.js
  └ yarn.lock

server.js

console.log("今さらながら、ようこそ");

　作成したファイルを実行します。Node.jsでjsファイルを実行する際には、node <ファイル名>としてあげます。

Node.jsでファイルを実行

node server.js

今さらながら、ようこそ

　入力したメッセージ通りに表示が行われたら成功です。
　これ以外のJavaScriptのコードについては、随時必要に応じて説明を行います。

httpサーバーの作成

　さて、今回の記事もいよいよ大詰めです。ここからは先ほどyarnでインストールしたhttpモジュールを使って、httpサーバーを立ち上げたいと思います。
　手順としては以下の通りです。
　　1. httpモジュールの読み込み
　　2. httpサーバーの立ち上げ
　　3. Webブラウザ上にメッセージの表示

httpモジュールの読み込み

　インストール済みのモジュールの読み込みを行います。モジュールの読み込みにはrequire('<モジュール名>')を利用し、読み込んだモジュールを変数に格納します。
　また、ここから記載するJavaScriptのコードについてはJavaScriptを始めようと思い立った人のためのJavaScript超入門で解説を行っているので、併せてご覧ください。（ここでいうとconstとかが大事な部分なので、ご一読いただくことをおすすめします。）
　先ほど作成したserver.js内のconsole.log("今さらながら、ようこそ");を削除して、下のコードを記述しましょう（これだけではまだ何も起きません）。

httpモジュールの読み込み

const http = require('http');

httpサーバーの立ち上げ

　次に、先ほど読み込んだhttpモジュールのcreateServerメソッドを実行してhttpサーバーを立ち上げます（ここに出てくるアロー関数も先ほどの記事で解説しています）。
　createServer()内の関数が引数として持っているreqとresはそれぞれリクエストとレスポンスを示しています。使い方については後で説明します。

　そして、server.listen(port)でサーバーを待機状態にします（portは8080番ポートを利用します）。これによって、Webブラウザを通じてサーバー側にリクエストが来るのを待ち続ける状態になります。

2.httpサーバーの立ち上げ

const server = http.createServer((req, res) => {
  // ここに処理を記述
});

const port = 8080;
server.listen(port);
console.log('Server listen on port ' + port);

Webブラウザ上にメッセージの表示

　先述したコードの中の// ここに処理を記述の部分に、Webブラウザからアクセスがきたタイミングでリアクションしてあげる処理を書きます。

3.Webブラウザ上にメッセージの表示

res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.write('<h1>Hello World</h1>');
res.end();

res.writeHead: リクエストに対して返す値のヘッダー情報を定義します。
res.write: Webブラウザのページ上に表示する値を指定します。

コードの実行とローカルホストの表示

ここまで出来たら実行してみましょう。nodeコマンドを実行し、ウェブブラウザでlocalhost:8080と入力してみて下さい。

すると、res.writeHeadで指定したHTMLが表示されていると思います。

　ここまで出来たら今回はこれで終わりです。
　いかがでしたか？思っていた以上に簡単にWebサーバーを立ち上げることができたかと思います。

　実はこのhttpサーバー、別のモジュールを利用してもっと簡単に立ち上げることができるのですが、本記事はNode.jsの超入門ですのでWebアプリケーションを例にNode.jsの説明を行っていこうと思っています。
　とはいえ簡単な方も皆さんには知っておいて頂きたいので、別モジュールでの書き方についてはまた別記事を記載致しますので、そちらも併せてご覧頂ければと思います。

　今回も閲覧頂きありがとうございました。次回はNode.jsで立てたサーバーで、htmlファイルを表示する方法などについて説明しようと思います。