node.jsのインストールから、フロントエンドの開発環境作りまで

## node.js とは
nodeは、サーバーサイドで動くJavaScriptの実行環境。
フロントエンドの開発ツールを作る言語として、nodeが利用されることが非常に多い。なぜならブラウザの言語がjavascriptだから。

nodeインストールするとnpmというパッケージ管理ツールもインストールされて、こいつを使っていろんなパッケージをインストールして、開発に使ったりします。

### 参考サイト
[node.js 公式](https://nodejs.org/ja/)
[node-jsとは何なのか調べてみました](https://sterfield.co.jp/designer/node-js%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%AA%E3%81%AE%E3%81%8B%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%81%9F/)
[フロントエンド・エンジニアのためのNode.js](https://app.codegrid.net/entry/nodejs-1)

## nodeインストールするにはndenvが良い

普通にインストールするのと、バージョン管理ツールを使ってインストールする方法があり。普通にインストールするのは公式から落とすのがいいのかな。バージョン管理ツールは、nodebrewというのとndenvというのがあり、ndenvはディレクトリごとバージョンを切り替えることができるので、ndenvがおすすめです。

## anyenv, ndenv, そしてnodeをインストール
ndenvをインストールするにはanyenvでインストールするのがいいです。anyenvというのはなnodeのバージョン管理ツールであるndenvだけでなく、rubyのrbenv、phpのphpenvといった様々な言語のバージョン管理ツールの管理をするツールです。入れ子が深くてややこしいですね。

### anyenvのインストール

git cloneで落としてきて、パスを通します

```
git clone https://github.com/riywo/anyenv ~/.anyenv
```
```
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
```
```
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
```
```
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
```

シェルを再起動して、anyenvが使えるかどうか確認

```
exec $SHELL -l
```
```
anyenv 
```

### ndenvのインストール

インストールはanyenvのコマンド一つでできます

```
anyenv install ndenv
```
シェルを再起動して、ndenv使えるかどうか確認してみましょ

```
exec $SHELL -l
```
```
ndenv 
```

### nodeのインストール

やっとこさ本体のnodeのインストールです。
[node.js公式](https://nodejs.org/ja/)を見てみると、2018年4月現在の推奨版は8.11.1のようなので

```
ndenv install v8.11.1
```

インストールされたかどうか確認してみましょう

```
ndenv versions
```

このバージョンをグローバルに利用するバージョンとして設定してあげれば使えるようになります。

```
ndenv global v8.11.1
```

nodeが使えるかどうかバージョンを確認してみましょう

```
node -v
```

ためしに最新版をインストールしてみて切り替えてみましょう。
なおnodeはLTS版（long term stability 長期安定版）が偶数バージョン、奇数バージョンが最新機能版って言われてるんですが、現在の最新版は10みたいです（先日まで9だった）。

```
ndenv install v10.0.0
```

```
ndenv global v10.0.0
```

```
node -v
```

#### nodeのローカルのバージョンの切り替え

今度はグローバルなバージョンを元に戻して、ディレクトリにローカルで使用するバージョンを指定してみましょう

```
ndenv global v8.11.1
```
```
ndenv version
```

```
mkdir awesomename
```
```
cd awesomename 
```
```
ndenv local v10.0.0
```
```
ndenv version
```

#### nodeのローカルのバージョンの削除

ndenv versionsでバージョンを確認してあげるとわかりやすいですが、ローカルのバージョンを指定するとそのディレクトリに .node-version というファイルが作られます。

```
ndenv versions
* v10.0.0 (set by /$PATH/.node-version)
  v9.11.1
```
この .node-version を削除すると、ローカルバージョンはなくなりグローバルなバージョンを利用できるようになります。

```
rm .node-version
```

```
ndenv versions
```
```
node -v
```

## node をさわってみる

nodeのコマンドのみを打つと、コンソールでjavascriptが使えます。


```
node
```
```
> 1+1
```
```
> var a = 1, b = 2
> a + b
```
```
> Date.now()
```
.exit で終了します

```
> .exit
```

### ファイルを実行する

nodeコマンドのあとにファイルのパスを指定すると、そのファイルを実行してくれます

```javascript:hello.js
console.log('hello, world')
```
```
node hello.js
```


### nodeのモジュールシステム

nodeではモジュールシステムが使えます。
（[新しいブラウザでもわりと使える](https://caniuse.com/#feat=es6-module)）

```javascript:sayHello.js
function sayHello () {
  console.log('hello, world');
}

module.exports = sayHello; // モジュールとして出力
```
```javascript:hello.js
const sayHello = require('./sayHello.js'); // モジュールを読み込む

sayHello();
```
```
node hello.js
```

### ビルトインモジュール

nodeには様々なモジュールが組み込まれており、これらモジュールを使ってファイルの読み書きをしたり、サーバーを立ち上げたりできます。

[公式モジュール一覧](https://nodejs.org/api/modules.html)

なお、ビルトインモジュールや後述するnpmでインストールしたモジュールは名前空間の名前のみでrequireでき、基本は相対パスで指定します。

読み

```javascript:readFile.js
const fs = require('fs');

fs.readFile('hello.js', 'utf-8', (err, data) => {
  if (!err) {
    console.log(data);
  }
});
```
```
node readFile.js
```

書き

```javascript:writeFile.js
const fs = require('fs');

fs.writeFile('output.txt', 'hello, world');
```
```
node writeFile.js
```
サーバー

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

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('hello, world\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```
```
node server.js

// Ctr + c で終了
```

## npm

npmというのは「Node Package Manager」、javascriptで書かれたモジュールパッケージをインストール・管理するツールで、nodeをインストールすると、一緒にインストールされます。
これを駆使してフロントエンドの開発環境を作ったり、そこから生成されるブラウザで読み込むjavascriptで使用するライブラリも、これで管理します。

### npmの便利なツールをインストールしてみる

以下に紹介してるものは、コマンドラインから実行ができ、グローバルにインストールすれば簡単に利用できます。

```
npm intall --global PACKAGE_NAME
// or
npm i -g PACKAGE_NAME
```

#### svgo

svgを最適化してファイルサイズを小さくしてくれる。
[svgo - npm](https://www.npmjs.com/package/svgo)

```
npm i -g svgo
```
```
svgo input.svg
```
```
// 生成するファイル名を指定
svgo input.svg -o output.svg
```
```
// パスの小数点の数を1までに丸める
svgo -p 1 input.svg -o output.svg
```

#### http-server

さくっとサーバーを立ち上げる
[http-server - npm](https://www.npmjs.com/package/http-server)

```
npm i -g http-server
```
```
// 現在のディレクトリがドキュメントルートとなる
http-server
```
```
// ドキュメントルートを指定
http-server ./public
```
```
// portを指定
http-server -p 8081
```
```
// キャッシュを無効に（ファイル変更してリロードしてすぐに反映されるように）
http-server -c-1
```

#### browser-sync

サーバー立ち上げつつ、ファイルを監視し、変更すると自動でリロードしてくれる。
[Browsersync Command Line Usage](https://browsersync.io/docs/command-line)

```
npm i -g browser-sync
```
```
// ドキュメントルートをpublic、監視する
browser-sync start --server public --watch
or
browser-sync start public -w
```

## npmで開発環境を作る

途中

### npmの使い方

* npm init
* npm install --save-dev PACKAGE_NAME
* npm install

### scssのコンパイルとライブリロードの環境
単純にscssファイルをcssへコンパイルする環境を作る。
プラスautoprefixerとライブリロードができたら。

### webpack

jsからcss、画像、とかをいろいろまとめてくれる。
react、vue、anglarとかで作ったspaは大抵webpack使ってる。

でも、ESModules、http2とか使えるようになってきて、Custom Elements、Shadow DOMまわりも安定して使えるようになったら、コンパイルいらなくなるのかも。。。

### vue-cliでvueベースのspaの開発環境