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

Browserify

シンプルな構成
CommonJSモジュールをブラウザ用にコンパイルする
最近はこちらに対応していないモジュールも出てきている

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

React.js

Facebook製のJSライブラリ
大規模開発で思い入れがないなら、これを選ぶとよいと言われた
Reduxと併用すると、stateの管理が楽と聞いた

Vue.js

オープンソースなJSライブラリ
学習コストは低く、少しづつ導入していくときに良さそう
大規模プロジェクトだと管理しづらくなると聞いた

AngularJS / Angular(旧Angular2)

Google製のJSフレームワーク
1も2も学習コストが高いと聞く
1と2は設計からして別物と聞いた

Ember.js

少し前に大流行したフレームワーク
学習コストが高いと聞いた
規約による制限は強いが、慣れれば使いやすいと聞いた

# コンパイラ/トランスパイラ

Babel

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

TypeScript

Microsoftが開発
静的型付けができる
JavaScriptにコンパイルできる

CoffeeScript

JavaScript/JSXにコンパイルできる言語
Ruby/Pythonっぽい記法

# React関連用語

Redux

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

Element (React)

Reactのアプリケーションを構成する最小要素
ReactDOMという、オブジェクトでできている

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

Component (React)

関数のようなもの
入力(props)に対して、画面に表示するElementを返す

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

JSX

XMLのような構文をサポートした拡張言語
DOMの設計を理解しやすい
Reactで利用する

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

仮想DOM(Virtual DOM)

実際のDOMを直接操作しない
操作した状態のDOM情報をオブジェクトとして持ち、実際のDOMに対し、差分のパッチを当てることでDOMを描画する
参考 : 仮想DOMの内部の動き

ミドルウェア (Redux)

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

redux-thunk

引数としてディスパッチを渡し、Reduxに非同期処理を持ち込む
公式でも言及されているミドルウェア

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

Jest

Facebook製。Reactのテストはこれを使っている@Facebook
変更した際の差分をテストするので大規模プロジェクトでも高速
スナップショットテストもできる

Mocha

柔軟性が高く、よく利用されるツール
外部のツールなどを利用するので複雑になりやすい

enzyme

AirBnB製。React用のテストユーティリティライブラリ
テストが格段に書きやすくなる
他のツールと組み合わせて利用する

flow

プロジェクトに気軽に型チェックを導入できる

# CSS関連のLoader

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

参考
WebpackってCSS周りのLoaderがいっぱいあって分かりにくいので整理してみる
 なんとなくで理解しないWebpackのCSS周辺

css-loader

CSSの依存関係を解決し、JSで読み込めるようにする
@importとurl()で管理する

raw-loader

cssをJSで読み込めるようにする
css-loaderのように高機能ではない。超シンプル

style-loader

DOMに <style>タグを挿入し、CSSを読み込ませる
要するにHTMLにCSSを挿入する

less-loader

Less(CSSを記述するためのDSL)をCSSに変換するためのLoader
実際に使うときは、その上にcss-loader, style-loaderを載せる

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

Postcss-loader

PostCSS(JSでつくられたCSS変換ツール)でCSSを処理するLoader

その他ライブラリ

Promiseライブラリ

非同期処理を抽象化したオブジェクトとして扱う
callbackでもできるが、ルールが統一されたため
非同期処理をキューにして管理することができる

ユーティリティライブラリ

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

Underscore

100以上の関数が定義されている(map, filter...)
公式ページが分かりやすい

Lodash

UnderscoreからForkされたプロジェクト
Underscoreよりもパフォーマンスがよいらしい
カスタムビルドができる

時間操作ライブラリ

# 開発に便利なライブラリ ## [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

rm -rfを実行できる
npm run clean で使うことが多い

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

@erukiti さんのご指摘により大幅に修正 ↩

128

166

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up