search
LoginSignup
116
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

本当の初心者のための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とバージョンを確認の上ページ下部にある「インストーラをダウンロードする」でダウンロードして下さい。バージョンについては、「安定版」と書かれているものを選ぶことをおすすめします。
 あとは落ちてきたインストーラを実行してインストールを行うだけです。

image.png

インストール成否の確認

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

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()内の関数が引数として持っているreqresはそれぞれリクエストとレスポンスを示しています。使い方については後で説明します。

 そして、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と入力してみて下さい。

image.png

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
116
Help us understand the problem. What are the problem?