2017年のJavaScript開発で知っておきたい用語集/リンク集


JavaScriptを本格的に学ばねばならぬときがきたので、よく知らなかった用語を調べた。
基本的に大項目のリンク先は公式ページ。参考記事は詳細に別途リンクを貼る。
HOTなツールを知りたいときは[2016 JavaScript Rising Stars](https://risingstars2016.js.org/)を見るとよさそう。

# 更新履歴
- 2017/10/31 11:00 : [その他ライブラリ](その他ライブラリ)の項を追加
- 2017/10/31 12:00 : ECMAScriptの説明を大幅に修正
- 2017/10/31 23:00 : [CSS関連のLoader](#css関連のloader), [開発に便利なライブラリ](#開発に便利なライブラリ)を追加


# 基本用語

## [Node.js](https://nodejs.org/en/)
- ネットワークアプリケーションを作成するためのJavaScript実行環境
- 非同期型のイベント駆動

## [nvm (Node Version Manager)](https://github.com/creationix/nvm)
- Node.jsのバージョン管理システム

## [V8 (Google V8 JavaScript Engine)](https://developers.google.com/v8/)
- Googleが開発しているJavaScriptエンジン
- C++ベースでGoogle Chromeやnode.jsに使われている

## [ECMAScript(ES)](http://www.ecmascript.org/)
- JavaScriptの標準言語仕様
- 最新はECMAScript® 2017(ECMA-262 8th edition) ~~ES8~~
- ~~バージョンは発表された西暦を使う場合と、発表ごとの連番を使う場合がある~~
- ~~ES2015以降はサポートしていないブラウザが多い~~ [^1]
- ブラウザへの対応状況は[ここで確認できる](http://kangax.github.io/compat-table/es6/)
- 「エクマスクリプト」と読む

[^1]: @erukiti さんのご指摘により大幅に修正

## [CommonJS](http://www.commonjs.org/)
- ウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクト - [wikipedia](https://ja.wikipedia.org/wiki/CommonJS)
- さまざまなツールの基盤になってはいるが、いまの重要度は低そう

## SPA(Single-page Application)
- 1枚のHTML+必要なアセット(JavaScript/CSS etc)で動作する
- ページのリロードが発生しない

<br/>
# パッケージ管理

参考 : [Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか](https://www.webprofessional.jp/yarn-vs-npm/)
   
## [npm (Node Package Manager)](https://www.npmjs.com/)
- Node.jsでつくられたパッケージの管理システム
- Node.jsをインストールすると標準でついてくる

## [Yarn](https://yarnpkg.com/en/)
- Facebook, Googleなどが開発したパッケージ管理システム
- npmの課題を解決してある
  - lockファイルの作成
  - 並行ダウンロード

## package.json
- npm/Yarnで管理するパッケージリストを記載したファイル
- 同じ書式で利用可能
- [npm仕様](https://docs.npmjs.com/files/package.json)/[Yarn仕様](https://yarnpkg.com/en/docs/package-json#search)

<br/>
# モジュールバンドラ
参考ページ : [What are the best client-side JavaScript module loaders?](https://www.slant.co/topics/1089/versus/~webpack_vs_browserify_vs_rollup-js)

## [Webpack](https://webpack.js.org/)
- コード分割ができる
- 柔軟性が高い
- 最近はこちらがスタンダード

## [Browserify](http://browserify.org/)
- シンプルな構成
- CommonJSモジュールをブラウザ用にコンパイルする
- 最近はこちらに対応していないモジュールも出てきている

<br/>
# ライブラリ/フレームワーク
参考 : [https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282](https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282)

## [React.js](https://reactjs.org/)
- Facebook製のJSライブラリ
- 大規模開発で思い入れがないなら、これを選ぶとよいと言われた
- Reduxと併用すると、stateの管理が楽と聞いた

## [Vue.js](https://jp.vuejs.org/)
- オープンソースなJSライブラリ
- 学習コストは低く、少しづつ導入していくときに良さそう
- 大規模プロジェクトだと管理しづらくなると聞いた

## [AngularJS](https://angular.io/) / [Angular(旧Angular2)](https://angular.io/)
- Google製のJSフレームワーク
- 1も2も学習コストが高いと聞く
- 1と2は設計からして別物と聞いた

## [Ember.js](https://emberjs.com/)
- 少し前に大流行したフレームワーク
- 学習コストが高いと聞いた
- 規約による制限は強いが、慣れれば使いやすいと聞いた

<br/>
# コンパイラ/トランスパイラ

## [Babel](https://babeljs.io/)
- JavaScriptのコンパイラ ※以前はtranspilerだった気がする
- まだブラウザが対応していない標準言語仕様で記載しても、動くコードを吐き出してくれる
- そのため、ブラウザが対応してくれるようになれば、書いたコードをそのまま使えばよいだけになる

## [TypeScript](https://www.typescriptlang.org/)
- Microsoftが開発
- 静的型付けができる
- JavaScriptにコンパイルできる

## [CoffeeScript](http://coffeescript.org/)
- JavaScript/JSXにコンパイルできる言語
- Ruby/Pythonっぽい記法


<br/>
# React関連用語

## [Redux](http://redux.js.org/)
- JavaScriptの状態を管理するフレームワーク
- Fluxの考え方をベースにつくられている
- 以下の5要素で構成される
  - State : アプリケーションの状態
  - Store : Stateを一元管理する場所
  - Reducer : StoreにあるStateを変更し、新しいStateを返す。Actionをもとに起動する。
  - Action : Stateを変更する際に一番最初に発火する。Reducerに働きかける
  - ActionCreator : Actionを作るとき便利に呼び出しやすくするためのもの
- 参考 : [Redux入門【ダイジェスト版】10分で理解するReduxの基礎](https://qiita.com/kiita312/items/49a1f03445b19cf407b7)

## [Flux](https://facebook.github.io/flux/)

- アプリケーションのデータ管理パターン
- データが単一の方向に流れる

## [Element (React)](https://reactjs.org/docs/rendering-elements.html)
- Reactのアプリケーションを構成する最小要素
- ReactDOMという、オブジェクトでできている

```js
const element = <h1>Hello, world</h1>;
```

## [Component (React)](https://reactjs.org/docs/components-and-props.html)
- 関数のようなもの
- 入力(props)に対して、画面に表示するElementを返す

```js
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

## [JSX](https://reactjs.org/docs/glossary.html#jsx)
- XMLのような構文をサポートした拡張言語
- DOMの設計を理解しやすい
- Reactで利用する

```js
const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);
```

## 仮想DOM(Virtual DOM)
- 実際のDOMを直接操作しない
- 操作した状態のDOM情報をオブジェクトとして持ち、実際のDOMに対し、差分のパッチを当てることでDOMを描画する
- 参考 : [仮想DOMの内部の動き](http://postd.cc/the-inner-workings-of-virtual-dom/)

## ミドルウェア (Redux)
- Reduxの拡張ではミドルウェアの使用が推奨される

### [redux-thunk](https://github.com/gaearon/redux-thunk)
- 引数としてディスパッチを渡し、Reduxに非同期処理を持ち込む
- [公式でも言及されている](http://redux.js.org/docs/api/applyMiddleware.html)ミドルウェア

<br/>
# テストツール
参考 : [An Overview of JavaScript Testing in 2017
](https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a)

## [Jest](https://facebook.github.io/jest/)
- Facebook製。Reactのテストはこれを使っている@Facebook
- 変更した際の差分をテストするので大規模プロジェクトでも高速
- スナップショットテストもできる

## [AVA](https://github.com/avajs/ava)
- テストを並列で実行することで高速化
- シンプルな構成
- スナップショットテストもできる

## [Jasmine](https://jasmine.github.io/)
- BDD(ふるまい駆動開発)
- 必要なものはあるていど揃っている

## [Mocha](https://mochajs.org/)
- 柔軟性が高く、よく利用されるツール
- 外部のツールなどを利用するので複雑になりやすい

## [enzyme](http://airbnb.io/enzyme/)
- AirBnB製。React用のテストユーティリティライブラリ
- テストが格段に書きやすくなる
- 他のツールと組み合わせて利用する

## [flow](https://flow.org/)
- プロジェクトに気軽に型チェックを導入できる

<br/>
# CSS関連のLoader

> 「どんなものでも最終的な出力をjavascriptで実行できる形に変換する」もの。
> 

参考
[WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる](https://qiita.com/shuntksh/items/bb5cbea40a343e2e791a)
[なんとなくで理解しないWebpackのCSS周辺](https://qiita.com/inuscript/items/0574ab1ef358fecb55b9)

## [css-loader](https://github.com/webpack-contrib/css-loader)
- CSSの依存関係を解決し、JSで読み込めるようにする
- `@import`と`url()`で管理する

## [raw-loader](https://qiita.com/inuscript/items/0574ab1ef358fecb55b9)
- cssをJSで読み込めるようにする
- css-loaderのように高機能ではない。超シンプル


## [style-loader](https://github.com/webpack-contrib/style-loader)
- DOMに `<style>`タグを挿入し、CSSを読み込ませる
- 要するにHTMLにCSSを挿入する


## [less-loader](https://github.com/webpack-contrib/less-loader)
- [Less](http://lesscss.org/3.x/)(CSSを記述するためのDSL)をCSSに変換するためのLoader
- 実際に使うときは、その上に`css-loader`, `style-loader`を載せる

```js
require("!style!css!less!./file.less");
```

## [Postcss-loader](https://github.com/postcss/postcss-loader)
- [PostCSS](http://postcss.org/)(JSでつくられたCSS変換ツール)でCSSを処理するLoader

<br/>

# その他ライブラリ
## [Promise](https://developers.google.com/web/fundamentals/primers/promises?hl=ja)ライブラリ
- 非同期処理を抽象化したオブジェクトとして扱う
- callbackでもできるが、ルールが統一されたため
- 非同期処理をキューにして管理することができる

### [Bluebird](https://github.com/petkaantonov/bluebird)
- [Bluebird で Promise を学ぶ](https://qiita.com/masakielastic/items/025b67d01b3501a5c3fb)


## ユーティリティライブラリ
- ネイティブ型を扱うライブラリ
- ES2015以降でサポートされている記法もある
- 基本的にはどちらか一方を利用する

### [Underscore](http://underscorejs.org/)
- 100以上の関数が定義されている(map, filter...)
- 公式ページが分かりやすい

### [Lodash](https://lodash.com/)
- UnderscoreからForkされたプロジェクト
- Underscoreよりもパフォーマンスがよいらしい
- [カスタムビルドができる](https://lodash.com/custom-builds)


## 時間操作ライブラリ
### [Moment.js](http://momentjs.com/)
- タイムゾーンの設定
- フォーマットの指定
- 日時計算

<br/>
# 開発に便利なライブラリ
## [npm-run-all](https://www.npmjs.com/package/npm-run-all)
- 並行でのnpmコマンド実行や、npmコマンドの単純化ができる
- 以下の3つのコマンドが用意される
  - `run-s` : sequentialに実行
  - `run-p` : parallelで実行
  - `npm-run-all` : どちらも指定できる。デフォルトは`sequential`


```
$ npm run clean && npm run build:css && npm run build:js && npm run build:html
↓ 簡潔に実行できる
$ npm-run-all clean build:* 
```

## [rimraf](https://www.npmjs.com/package/rimraf)
- `rm -rf`を実行できる
- `npm run clean` で使うことが多い

```js
  "scripts": {
    "clean": "rimraf targetDir"
  }
```