Node.jsとExpressでローカルサーバーを構築する(1) ―Node.jsとnpmの導入―

ネット上に初めて記事を投稿してみます。
足らぬところがいろいろあるとは思いますが、よろしくお願いいたします。

**リンク一覧**

1. Node.jsとExpressでローカルサーバーを構築する(1) ―Node.jsとnpmの導入―（本記事）
2. [Node.jsとExpressでローカルサーバーを構築する(2) ―Expressでルーティング―](https://qiita.com/koedamon/items/fb85c3eb32e7838f9d7c)
3. [Node.jsとExpressでローカルサーバーを構築する(3) ―JSONを返すスタブAPI―](https://qiita.com/koedamon/items/e8b3482811f275264592)
4. [Node.jsとExpressでローカルサーバーを構築する(4) ―他サーバーから画像を取得する―](https://qiita.com/koedamon/items/122d009327e138caded2)

# 概要
## この記事の概要
- 目的
  - Node.jsを利用して、PC上にローカルサーバーを立ち上げる
- 本記事のゴール
  - ブラウザで「localhost:8080」にアクセスすると、「HelloWorld」が返ってくる
- 対象者
  - WEBフロント担当者
  - HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人
  - HTTP通信、GET、POSTなどについて、ある程度理解している人（ざっくりで良いです）
  - 黒い画面にコマンドを打ち込むことに抵抗がない方
- 環境・バージョン
  - Windows10
  - Node.js(推奨版) 10.15.01
  - npm 6.4.1

なお、本記事で“コマンドプロンプト”が登場しますが、実際に筆者が使っているのは“GitBash”です。
Windows標準で搭載されているコマンドプロンプトより使いやすいので、おすすめです。

[WindowsでGitを始めたらまず確認！Git Bashの設定&ショートカット | 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/gitbash-setting-shortcut)

## Node.js
サーバサイドで動作するJavaScriptの実行環境の事を指します。
コアモジュールと呼ばれる、サーバーサイド向けの標準機能を実装したライブラリ群が含まれています。これらはブラウザのJSとは別に存在する独自の機能です。逆にブラウザ操作用の機能は持っていません。
頻繁にアップデートがあり、時には互換性のないアップデートが行われることもあるため、nvmというパッケージ管理ツールを用いてバージョンを管理するそうですが、割愛いたします。

[公式サイト：Node.jsとは（日本語）](https://nodejs.org/ja/about/)
[Windowsでnvmを利用してNode.js環境を整える](https://www.tech-tech.xyz/node-nvm-install.html)

## npm
Node.jsの開発で利用するパッケージの管理をするためのツールです。（Node Package Manager の略）
どのパッケージのいつのバージョンを利用しているのか、「package.json」というファイルに書き留めて管理します。
クライアントサイドの開発で利用するパッケージも一緒に管理できます。

[公式サイト：About npm（英語）](https://docs.npmjs.com/about-npm/)
[npm入門 - Qiita](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)

# Node.jsとnpmの導入
## ダウンロードとインストール
公式サイトよりダウンロードします。
npmはNode.jsにあらかじめ含まれているため、別途ダウンロード作業をする必要はありません。
[公式サイト：ダウンロード](https://nodejs.org/ja/download/)
基本的に、デフォルトの設定で「yes」をクリックしていくと、インストールが完了します。 
細かな手順につきましては、こちらの記事でご確認いただけます。
[Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)
執筆時点での推奨版は10.15.01です。 

# サーバーを構築する
## プロジェクトの開始
作業用に任意のフォルダを準備します。
コマンドプロンプトでこのフォルダまで移動し、下記コマンドを実行します。

```
$ npm init -y
```

このコマンドでは、このフォルダでプロジェクトを始めまーす!と、npmに伝えています。
`-y`は、とりあえず規定の値で`package.json`を作成してください！という意味です。おまかせコースです。
省いた場合、npmが「どういうプロジェクトなの？」と英語であれこれ聞いてきます。きちんと答えるか、Enterキーで相槌を打ってやり過ごすかすると、聞き取り終了後に`package.json`といファイルが下記の内容で生成されます。

```json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

**package.json**
プロジェクトの概要が記述されています。パッケージ名、バージョン、ライセンスなどなど。公開予定のパッケージを制作する場合は、適切に記載しなくてはなりません。
今回はローカルサーバを構築するだけの目的ですので、規定値のままにしておきます。
[npm package.json 日本語版 取扱説明書](http://liberty-technology.biz/PublicItems/npm/package.json.html)

## WEBサーバーのアプリケーションファイルを作成する
作業用フォルダに、`app.js`といJavaScriptファイルを用意し、下記コードを記述します。
Node.jsで、最低限の機能を有するサーバを構築する為のコードはこのような感じです。

```js
const http = require('http');
const server = http.createServer((req, res)=>{
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!!');
});
server.listen(8080);
```

まず、コアモジュールの一つである`http`モジュールを読み込みます。
HTTPサーバーとしての機能を提供してくれるモジュールです。
[HTTP | Node.js v10.x Documentation（英語）](https://nodejs.org/dist/latest-v10.x/docs/api/http.html)

```js
const http = require('http');
```

次に`http`の`createServer`メソッドを用いてサーバを生成して変数に格納します。 

```js
const server = http.createServer((req, res)=>{...
``` 

この際に渡すコールバック関数は、リクエスト受付時の対応処理です。`req`はリクエストの詳細、`res`はレスポンスを送り返すためのツール群が含まれています。
`writeHead`メソッドでレスポンスのヘッダーを指定し、「Hello World」というテキストメッセージを返しています。
そして生成されたサーバオブジェクト（`server`)の`listen`メソッドを実行してリクエストの受付を開始します。引数に渡している数字はポート番号です。

```js
server.listen(8080); 
```

そして、コマンドプロンプト上で下記コマンドを実行します。（作業用フォルダに移動した上で）
「nodeさんapp.jsファイルを実行してください」

```
$ node app.js
```
これでサーバーが立ち上がったので、ブラウザより`localhost:8080`へアクセスしてみます。

![localhost.png](https://qiita-image-store.s3.amazonaws.com/0/362737/a15257f3-2838-4197-081d-c97b950c78a6.png)

無事にレスポンスを受け取れました！！

終了する場合は、サーバーを立ち上げるコマンドを実行したコマンドプロンプト上で`Ctrl+C`を入力して、プロセスを終了させます。


正直なところ、これだけでフロント制作に取り掛かることは出来ませんね。
次回は、Node.jsのExpressというフレームワークを利用して、もっと実用的な形にしていきたいと思います。
初心者の拙い記事を読んでいただき、ありがとうございました。
お役に立てていたら幸いです。

# 参考情報
 [Node.js公式サイト：Getting Started Guide（英語）](https://nodejs.org/en/docs/guides/getting-started-guide/)
 [Windows版 Node.js環境構築方法まとめ - Qiita](https://qiita.com/maecho/items/ae71da38c88418b806ff)