Node.jsを使ってWebアプリケーションを作るための流れ - 事前知識 & ベタ書きで書いてみる 編 -

# 今回の目的

今回は、Node.jsのインストールとHTTP通信のざっくり理解、そしてベタ書きでnodeサーバーを立ててみるところまで。

# node.jsをインストールする

まずは、node.jsがインストールされているか確認します。
ターミナルで`node -v`を入力し、バージョンが表示されればOKです。

```shell
$ node -v
v10.11.0
```

もし表示されなかったら、公式サイトからnode.jsのパッケージをぶっこんでください。
https://nodejs.org/ja/

インストールするのは、よほどの理由がない限り、**LTS**版を使用しましょう。
※ LTS ... Long Term Support の略。安定バージョンのことで、長期的にサポートをしていきますよ、という意味です。


# ベタ書きでnodeサーバーを書いてみる

## そもそも：Webページが表示されるまでの仕組み

そもそも、Webページが表示されるまでの仕組みはどうなっているのでしょうか。
超簡略化するとこうなります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/ffd449b7-a058-e114-c5f7-5809ff1c5887.png)

一つずつ見ていきましょう。


http://hoge.com というURL(URI)を打ち込むと、Webブラウザ(Chrome, Firefox とか)がhoge.comという住所のサーバーを探しにいってくれます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/b81a814e-f2f3-9e0b-2efb-0f3c71fd8971.png)



現実世界で例えるなら、　**「東京都○○区△△9999-9999 に向かって！」**と指令しているんですね。

Webブラウザさんは、入力された住所、つまりURLを元にDNSサーバーとかに場所を聞きつつ、hoge.comという住所にあるサーバーを探し回ります。

そして、hoge.comのサーバーを見つけると、そこの80番ポートを通って通信を開始します。詳述はしませんが、サーバーはたくさんの出入り口を持っていて、HTTP通信、つまりHTMLをやりとりする通信は80番目の出入り口を使うんだ、程度に考えておいてください。

そこで送られるのが**リクエスト**です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/10363f54-32aa-3c4b-66f6-f4f991967b40.png)

そして、サーバーはそのリクエスト情報を元に、情報を送り返してきます。それが**レスポンス**です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/cd1a634b-ee1d-77a3-f317-306180ac59bd.png)

今回は、HTMLファイルが返されてきましたね。
Webブラウザはこの情報を読み取って、人間がわかりやすい形にしてWebブラウザ上に表示をしてくれるのです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/97dfa02a-d1b9-162f-31c5-1d1c2128c965.png)

この**リクエスト**と**レスポンス**という概念が今後重要になってくるので覚えておいてください。

このリクエストとレスポンスには実際どういうことが書かれているのか、見てみましょう。
ターミナルで下記のコマンドを入力してみてください。

```shell
curl -v [好きなURL]
```

きっと、こんな画面が出てきたはずです。
（過去資料から転用しました）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/35849244-04fa-f0d5-934c-4e0a40c3ac8c.png)

注目して欲しいのが**リクエストライン**と**HOST**です。

```
GET /scrayping-handson/index.html 
HOST: cha1ra.github.io
```

`GET`というのは**メソッド**です。HTTPにはメソッドと呼ばれる、ユーザーが行いたい処理を記述しなければならないというルールがあります。

メソッドにはいくつか種類があります。ここら辺を参照すると良いかと。
https://qiita.com/r_fukuma/items/a9e8d18467fe3e04068e

今回のGETというのは、**リソース(データ)の取得**がしたいという意味です。
なので、HTMLファイルを返してくれるんですね。

HOSTは先ほど言った住所です。

なので、↑の命令文は翻訳するとこうなります。

```
マンションHOGE XXX号室 にある情報をください(GET)
住所： 東京都○○区9999-9999
```


そして、もう一つみて欲しいのが、レスポンスの中にある`Content-Type`の箇所。

```
Content-Type: text/html;
```

レスポンス、つまり返ってきたリソースの種類をレスポンスでは教えなければなりません。
一覧をまとめてくださっている記事がありました！
https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa

今回は`text/html`なので、HTMLファイルを返しますよ、ということですね！

さて、こんなことを念頭に置きつつ、実際にnode.jsでプログラムを書いてみましょう。

# Node.jsのプログラムを記述する

## `npm init`をする

※ぶっちゃけ、今回の作業ではNode.jsの標準モジュールしか使わないのでこの作業は**必要ありません。**お作法として覚えておこうという意味で記述しています。

さて、ここまできたらあとはサクサクプログラムを書いていきましょう。
好きなディレクトリを作成しましょう。
（私は今回`nodejs_example`というディレクトリを作成しました。）

ターミナルで、作成したディレクトリまで移動したら、下記のコマンドを入力します。

```shell
$ npm init
```

これは、node.jsを作成にあたっての初期ファイルを作成してくれるコマンドです。

色々聞かれますが、「作成者名教えて！」「このアプリの概要をおしえて！」的な質問なので、今回みたいにただテストするだけならばEnter連打で大丈夫です。

```shell
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodejs_sample)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/cha1ra/Sites/nodejs/nodejs_express_example/nodejs_sample/package.json:

{
  "name": "nodejs_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
```


一通り完了し、`package.json`というファイルが作成されていれば成功です。

```
$ ll
total 8
-rw-r--r--  1 cha1ra  staff   209B  3 12 16:29 package.json
```

## `server.js`を作って動かす

では、いよいよコードを記述してみましょう。と言ってもめっちゃ簡単です。
`server.js`と言うファイルを作成し、下記のように記述してみてください。

```javascript:server.js
const http = require('http')
const server = http.createServer()

server.on('request', function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/plain'})
    res.write('Example Response!')
    res.end()
})
server.listen(3000)
console.log('Server is working on port 3000')
```

で、ターミナルで`server.js`がおいてある場所まで行って、↓のコマンドを入力してください。

"Server is working on port 3000"と言う文章が表示されていれば成功です。

```shell
$ node server.js
Server is working on port 3000
```

では、この状態でhttp://localhost:3000/ にアクセスしてみてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/241647/0d76f244-631b-4e08-ed9f-c5e853698699.png)


こんな表示が出ていれば成功です！！！

## 何をしたの？

さて、突然駆け足の説明になりました。「何をやったのか教えろーー！」と言う意見があると思いますが、実はほとんど説明は終わっているんです。

改めて`server.js`のコードをみていきましょう。

### require文を記述する

```javascript:server.js
const http = require('http')
const server = http.createServer()
```

この記述でNode.jsのHTTPインターフェースを呼び出しています。
https://nodejs.org/api/http.html
で、そのモジュールの中にあるcreateServerを利用しているんですね。
https://nodejs.org/api/http.html#http_http_createserver_options_requestlistener

```
$ node hoge.js
```

での形でファイルを実行すると、`require`の部分を読み込んでくれます。


### リクエストとレスポンスを設定する

あとは、`server.on...`の部分で先ほど解説したレスポンスの設定を行なっていきます。

```javascript:server.js
server.on('request', function(req, res) {
    res.writeHead(200, {'Content-Type' : 'text/plain'})
    res.write('Example Response!')
    res.end()
})
```

resはResponseの略ですね。
`Content-type`はHTMLではなく、ただのテキストなので`text/plain`が指定されています。

```javascript:server.js
server.listen(3000)
console.log('Server is working on port 3000')
```

最後に`listen`でポート番号(サーバーが持っている扉の番号のことでしたね)を`3000`に指定しています。だからhttp://localhost:3000/ にアクセスするんですね！

ちなみに、「localhostって何？」って方はここら辺をみると腹落ちすると思います。
https://wa3.i-3-i.info/word1102.html

---

今回はここまで、次は`express-generate`を用いたWebアプリケーションの作成をまとめていけたらと思います。


参考
https://ja.stackoverflow.com/questions/44422/node-js%E3%81%AEhttp-server-on%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6