NodeJSを触りだけやってみる

NodeJSを触った事がないので一旦環境構築〜HelloWorldまでをやってみようと思います。

# NodeJsの環境を準備
今回はグローバル環境ではなく、特定のディレクトリ配下にインストールします。

# 1. [NodeJS](https://nodejs.org/en/download/)の公式サイトから
対応のパッケージをダウンロードしてインストールします。
下記のメッセージが出ますのでバージョンとパスが通ってるか確認しましょう。

```
Node.js was installed at
   /usr/local/bin/node

npm was installed at
   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.
```

HelloWorldを一応確認しておきましょう。

```js
[murotanimari]$ node
> console.log("HelloWorld")
HelloWorld
```

# 2. NodeJSモジュール類のインストール
一応、reactを利用する前提なので下記の４つをインストールします。

webpack-dev-server: 
WEBウェブサーバーです。

バベル:
現在のwebブラウザーはES6,7の書式を理解できないので、一旦これらのコードをES5 JavaScriptに変換するためのライブラリ群です。
Reactと相性のよいJSXの書式もサポートしてます。

Lint:
書式チェックしてくれます。

WebPack:
コンパイルしてくれます。

### 2.1 プロジェクトフォルダー作成
```
[murotanimari]$ mkdir HelloNodeJS
[murotanimari]$ cd HelloNodeJS
```

### 2.2 サーバーのインストール
1) Webpack & webpack-dev-serverのインストール

```
[murotanimari]$ npm install webpack
[murotanimari]$ npm install webpack-dev-server
```

2) index.htmlとpackage.jsonの準備

```
[murotanimari]$ vi index.html
test

[murotanimari]$ vi package.json
{
 "scripts": {
  "start": "ebpack-dev-server"
 }
}
```

3) 起動

```
[murotanimari]$ webpack-dev-server
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 13ms
webpack: bundle is now VALID.
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/murotanimari/HelloNodeJS
```

http://localhost:8080/webpack-dev-server/
アクセスしてtestが表示されればOKです。

### 2.3 Lintモジュールのインストール
[こちら](http://arfyasu.hatenablog.com/entry/2016/03/06/161832)を参考にESLintの設定をします。
Reactで利用するBabelも一緒に入れます。

1)Babelのインストール

```
[murotanimari]$ npm install babel-core
[murotanimari]$ npm install babel-loader
[murotanimari]$ npm install babel-preset-react
[murotanimari]$ npm install babel-preset-es2015
[murotanimari]$ npm install babel-plugin-transform-function-bind
```

２) Lintのインストール

```
[murotanimari]$ npm install eslint
[murotanimari]$ npm install babel-eslint
[murotanimari]$ npm install eslint-plugin-react
```

3) .eslintrcを生成

```
[murotanimari]$ node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Google
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /Users/murotanimari/HelloNodeJS

[murotanimari]$ mv .eslintrc.json .eslintrc
[murotanimari]$ vi .eslintrc
{
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "globals": {
        "React": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "comma-dangle" : 0
   }
}
```

4) テスト用ファイル作成

```
[murotanimari]$ vi src/hello.jsx
import React from "react";
import ReactDOM from "react-dom";

export default class HelloWorld extends React.Component {
    render() {
        return <div class="hoge">Hello World</div>;
    }
}

ReactDOM.render(
    <HelloWorld />,
    document.getElementById("app")
);
```

5) テスト

```
[murotanimari]$ node_modules/.bin/eslint --debug src/hello.jsx
  eslint:cli Running on files +0ms
  eslint:ignored-paths Looking for ignore file in /Users/murotanimari/HelloNodeJS +26ms
  eslint:ignored-paths Could not find ignore file in cwd +2ms
  eslint:glob-util Creating list of files to process. +1ms
  eslint:cli-engine Processing /Users/murotanimari/HelloNodeJS/src/hello.jsx +5ms
  eslint:cli-engine Linting /Users/murotanimari/HelloNodeJS/src/hello.jsx +0ms
  eslint:config Constructing config for /Users/murotanimari/HelloNodeJS/src/hello.jsx +1ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading /Users/murotanimari/HelloNodeJS/.eslintrc +3ms
  eslint:config-file Loading config file: /Users/murotanimari/HelloNodeJS/.eslintrc +1ms
  eslint:config-file Loading plugin:react/recommended +129ms
  eslint:config-file Attempting to resolve eslint-plugin-react +0ms
  eslint:config-file Loading JS config file: /Users/murotanimari/HelloNodeJS/node_modules/eslint-plugin-react/index.js +0ms
  eslint:config-file Loading /Users/murotanimari/HelloNodeJS/node_modules/eslint/conf/eslint.json +10ms
  eslint:config-file Loading JSON config file: /Users/murotanimari/HelloNodeJS/node_modules/eslint/conf/eslint.json +0ms
  eslint:config Using /Users/murotanimari/HelloNodeJS/.eslintrc +239ms
  eslint:config Merging command line environment settings +0ms
  eslint:config-ops Apply environment settings to config +1ms
  eslint:cli-engine Linting complete in: 727ms +332ms

/Users/murotanimari/HelloNodeJS/src/hello.jsx
   6:21  error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property
  12:5   error  'document' is not defined                                no-undef

✖ 2 problems (2 errors, 0 warnings)
```

eslint --debugでデバッグオプションを指定するとログが見られるので一個一個見ていきます。
.eslintrc と package.json が正しく使われているみたいなので今回は一旦よしとします。

### 2.4 WEB PACKのテスト
[こちら](http://qiita.com/cortyuming/items/ba4c4d61fdf262bc2303)を参考にwebpackを入れます。
entry.jsをbundle.jsにコンパイルしてindex.htmlから参照してみます。

```
[murotanimari]$ vi src/entry.js
document.write("It works.");

[murotanimari]$ vi src/index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>webpack tutorial</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

[murotanimari]$ webpack src/entry.js src/bundle.js
Hash: a41c6217554e666594cb
Version: webpack 1.13.1
Time: 39ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./src/entry.js 29 bytes {0} [built]

```
>webpack-dev-server --content-base src/

http://localhost:8080/webpack-dev-server/index.html
で"It works!"が表示されています。


※１ --content-base src/のオプションでドキュメントルートを設定できます。