シンプルNodeJS理解 実践


# はじめに
備忘録および、これからNodeJS等を体系的にシンプルに理解したい方向けに簡単に書いてみようと思う。

## NodeJSとは
サーバーで動くJavaScript環境のこと。   
言語がフロントエンド・バックエンド同じような書き方で作成することができ、学習コストが低い。

## 特徴 メリット
- スクリプト言語であること（インタプリタ型）・・・コンパイルがいらない=機械語に変換する必要がないので簡単（めんどくさくない）   
- 軽量かんたん・・・軽量で簡単に使えます。。
- リアルタイム処理に向いている（ゲームとかチャットボットとか向いてるって）
   

# npmとNode起動の所

## パッケージ管理npmについて
ここから簡単にNodeの使用について説明していこうと思う。   
初めての人はインストールして、実践しながら見てもらえればと思う。 ※推奨版を推奨
[NodeJSインストール](https://nodejs.org/ja/download/)   
`node -v`  ・・・バージョン確認

### npmとは
まずNodeをインストールをするとnpmも一緒にインストールされている事がわかる。   
`npm -v`   ・・・確認   
これは先人たちの技術の結晶であるパッケージ、npmはそのマネージャーであり、コマンド一発でその恩恵を受けることができる。   

* 簡単にnpmでできること   

```
パッケージインストール
テスト実行
アプリ起動
バージョン管理
```

### Nodeでは`package.json`ファイルで内容を管理されている。

理解するために以下を実施
1： 準備   

```bash
// 必要なモジュールをインストール(gオプションはグローバル（PC）つけないとローカル(ディレクトリ)へって意味)
npm install -g express
npm install -g express-generator
```

２： 空フォルダでプロジェクト作成

```bash
express sampleapp
```

sampleappのフォルダが作成され、実行に必要なファイルが作られている。

```shell
.
├── app.js //実行ファイル
├── bin
│   └── www
├── package.json //※※※これ※※※
├── public //フロントサイド側 JS等
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes //サーバーサイド側 NodeJS
│   ├── index.js
│   └── users.js
└── views //サーバーサイド側HTMLみたいな
    ├── error.jade
    ├── index.jade
    └── layout.jade

```

### package.jsonの中身を簡単にご説明   
scriptsに書かれている事がnpmで実行できること、ここでは`npm start`コマンドで実行される内容が書いてある。   
scriptsにはtestとかlintとかビルド系とかを書いたり、環境変数をつけたり等、色々実行コマンドを書くことが出来る。

dependenciesではモジュールの名前を書く   
何のパッケージなのかは省略。基本`パッケージ名 npm`　のように調べればすぐ見つかる。    
横の数字はパッケージのバージョン。   
 ※たまにバージョンで起動出来ないこととかある（Nodeのバージョンとか、一緒に開発しててとか）

```json:package.json
{
  "name": "sampleapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  }
}

```

## Node起動
### sampleapp起動
モジュールをインストールする。
ディレクトリにある、package.jsonを見て必要なモジュールを`node_modules`フォルダを作成して入れてくれる。

```bash
npm install
```


完了したらアプリ起動してみよう   

```bash
npm start
//またはstartに記載されていた
node ./bin/www
```

起動した状態で以下のURLにアクセスする。   
`http://localhost:3000/`

ここまでのステップで難しく思えた人はいないだろう。   
ここから、応用に移っていきたいと思う。

# Node起動をもう少しシンプルに掘り下げる

## 単体起動とnpm起動
```js:hello.js
function Hello(hi) {
  console.log(hi)
}

function main(){
  Hello('Hello, World')
}

main()
```
上で作成したsampleappのフォルダで問題ないので、このhello.jsを作って単体で実行する。  
※かなり適当なシンプルさだが、こちらで理解していただけると嬉しい。

実行

```bash
node hello.js
```
実行するとコンソールにHello, Worldが表示されただろうか。
このように単体でも簡単に起動やテスト等の確認をすることが出来る。　たまに簡単なツールを作りたい場合はこのように切り離して使用するような事もする。

次はこのHello, Worldを表示するだけのやつをnpmで実行したいと思う。
statの部分を以下に変更して`npm start`で実行する。

```json:package.json
{
  "name": "sampleapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node hello"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  }
}

```

ここまでで、起動部分のNodeとnpmの関連性が把握出来てくれれば嬉しい。

## npmモジュールを追加とhtml+Node

1. indexファイル作成   

- sampleappのフォルダに下の超シンプルindex.jsを作成する。   
※基本app.jsかindex.jsかserver.jsがメインのファイルだと思って貰えればよいです。

```js:index.js
// 使うモジュールの宣言
var express = require('express');
var app = express();
var cfenv = require('cfenv');

// 静的なフォルダの場所を宣言
app.use(express.static(__dirname + '/public'));

// このアプリの情報をget
var appEnv = cfenv.getAppEnv();

// URL(get)の処理、この場合上で宣言したフォルダのindex.htmlをレンダリングしている
app.get('/', function(req, res, next) {
  // res.send('ページが表示されました！'); こんな送り方もある。
  res.render('index', {});
});

// ポートとか勝手に選んで開始してくれる
// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
  // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});
```
- public直下に単純なHTMLのindex.htmlを作成   

```html:index.html
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="/css/index.css">
</head>

<body>
	<h1>hello world</h1>
</body>

</html>
````

2. 足りないモジュールを追加   
新しく使う`cfenv`を追加する

```bash
npm install cfenv
```

`package.json`にcfenvが追加されただろうか。　されていない場合は-sオプションをつけて追加しよう。   
※ なかったら起動の時に怒られて分かるので問題はあまり無いかもしれないが、


`node index`かpackage.jsonのstart値を変更して`npm start`

今度はコンソールにURLが表示されると思うので`server starting on http://localhost:****`、そのURLへ接続してhello world画面の確認。

## まとめ
難しい話を無しにすると、ここまで出来れば後はカスタマイズしていくだけとなる。   
フロント　HTML+Javascript+CSS   
バック　　Node.js(get,post等のリクエストを)