-
サーバーサイド
-
言語
-
node.js
-
-
フレームワーク
-
Express
-
nodeのMVCフレームワーク
-
express-generatorで簡単にプロジェクトのスケルトンを生成できる
-
expressコマンドが使えるようになる
-
-
これを使うことで、サーバーサイドレンダリングができる
-
-
-
テンプレートエンジン
-
ect
-
一番高速
-
nodejsのエンジン
-
-
-
-
クライアントサイド
-
View：react
-
View以外：redux
-
fluxパターンで、view以外を提供している
-
action
-
ユーザによって発生するイベント
-
状態変更のトリガーは必ずAction
-
State を更新するための定義を書く。何が起きたのかを伝えるための事のみを記述するべき
-
dispatch（反応、送信）をするとこ
-
bindActionCreatorsでreducerにactionを渡す
-
適切なモデル型のEntityを構築する責務
-
actionCreator：アクションクリエイター
-
サーバ通信、イベント発行。APIはここ
-
新しいStateの定義を書く
-
テストのために分離しているってのもある
-
-
-
Middleware
-
ReduxにはMiddlewareって概念がある
-
dispatch(action)する前、した後に任意の処理を追加
-
Redux-loggerとRedux-thunkとか
-
applyMiddlewareで適用する
-
-
reducer
-
dispacher
-
stateを更新するためのロジック部分
-
前回のstateとactionより新しいstateを計算してstoreに渡す
-
オブジェクトの変更はしてはいけない
-
API呼び出しなどしてはいけない
-
-
store：model
-
はじめに更新してから基本更新しない場所
-
全てのstateをstoreオブジェクトが管理する
-
storeを作ってproviderに渡す
-
Store(Reducer)はエンティティの操作はしない
-
state：ステート
-
View 部分である React でレンダリングを行う
-
stateが変わるとUIの変化が起こる
-
-
provider：プロバイダー
-
store内のstateとReactなどのviewとのインターフェース
-
純粋な関数
-
connectでpropsとactionを渡す
-
-
-
-
-
ソース検証ツール：ESLint
-
タスクランナー：gulp
-
-
テスト（どれ使うか）
-
テストフレームワーク。
-
Mocha
-
これだけではテストできないので、アサーションライブラリが必要
-
好きなアサーションライブラリと組み合わせられる
-
流行りな感じ。
-
-
-
テストランナー
-
QUnit
-
これはテストフレームワークと、アサーションが入っている
-
-
Jasmin
-
非同期テストdoneがついたとか
-
All in One。これ一つでOK。
-
-
jest
-
jasmineベース
-
Karmaと比べても遅い
-
-
ava
-
Karma
-
テストブラウザでテストし、結果をレポーティングしてくれる
-
JSのテストをいい感じにしてくれる
-
テスト実行前にTypeScriptをコンパイルできるようにする
-
CLIでテストを実行できるようにする
-
Node.js 上で動作するテストランナー
-
AngularJSチームが開発した
-
-
-
アサーション
-
Chai
-
-
アサーションユーティリティ、テストランナー
-
Enzyme
-
Airbnbが開発したReactのためのテストライブラリ
-
-
-
テストブラウザ
-
phantomJS
-
karmaがphantomJSに対して、mochaで記述したテストを実行する
-
-
-
スパイの設定
-
shimon
-
-
-
ビルドツール
-
ビルド
-
Browserify
-
CommonJSモジュール記述されたコードを、ブラウザでも動作するように変換するツール
-
ブラウザ上でもNode.js用モジュールを使えるようにする
-
出力されたjsファイルを使えばブラウザで使える
-
単一ファイル を作成するのに特化している
-
js用
-
JSX変換
-
reactify
-
JSX用のtransform module。JSXをJSに変換できるオプション
-
reactで作ったJSXをこれでJSに変換する。JSに変換するだけで1つのファイルにまとめることができていないので、Browserifyを使う
-
JSX -> reactify(JS複数ファイル) -> Browserify(1ファイル)
-
-
-
Babelify
-
Babel の Browserify transform 版
-
みんなこっちに乗り換えている
-
-
-
-
webpack（本命）
-
複数JSファイルの結合
-
HTML、CSS、画像などいろんな読み込み、全てをJavaScriptに変換してくれる
-
非同期のロードもサポートしている
-
ビルド時間がBrowserifyより速い
-
webpack-dev-server
-
web packをローカルサーバで使うのにさらに便利にしてくれる
-
-
-
-
-
package
-
react関連
-
react
-
react-router
-
reactのルーティング。ネストされたUIを作るときの生産性、保守性が上がる
-
-
react-dom
-
domライブラリ
-
-
-
redux
-
redux
-
react-redux
-
Viewの実装にReactを使うことができるようになります
-
-
redux-devtools
-
redux-thunk
-
redux-saga
-
redux-act
-
redux-router
-
react-routerとreduxを繋いでくれるやつ
-
-
-
babel関連
-
babelとは
-
まだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラ
-
-
babel-cli
-
CLI（コマンドラインインターフェース）
-
インストールパッケージ
-
-
babel-core
-
本体は何も機能を提供していない。6系からはプラグインと、presetを入れる必要がある。
-
各種APIを提供
-
-
polypill系
-
babel-polyfill
-
polyfill
-
babelの変換において、古いブラウザでもある程度動かすようにしてくれる
-
使うのであればこちらで大丈夫そう
-
-
babel-plugin-transform-runtime
-
polypillと似てる？
-
polyfill対象に該当するコードだけが未対応なブラウザでも動くように変換される
-
必要な変換のみをするので、対象になるコードが少なければ、ファイルサイズは小さくすむ
-
-
-
babel-loader
-
es2015やJSXで記述したJSファイルも変換する
-
-
babel-preset-es2015
-
es2015を使う時に必要
-
-
babel-preset-react
-
reactを使う時に必要
-
-
babel-plugin-syntax-async-functions
-
？
-
-
babel-plugin-transform-regenerator
-
？
-
-
babel-plugin-transform-runtime
-
？
-
-
babel-preset-stage-0
-
-
webpack
-
webpack
-
webpack-dev-server
-
react-hot-loader
-
-
eslint
-
eslint
-
eslint-plugin-react
-
eslint-plugin-import
-
eslint-plugin-jsx-a11y
-
eslint-config-airbnb
-
-
loader
-
url-loader
-
css-loader
-
style-loader
-
file-loader
-
-
その他
-
axios
-
APIアクセスの補助的な
-
-
classnames
-
underscore
-
watchify
-
uglifyify
-
vision
-
-
-
Flowtype
-
jsの世界に型チェックを含めるもの
-
flowtypeが力を発揮する環境は、既存のJSが大量に存在する環境や、railsなどの動的な型のフレームワーク環境で、静的な定義が抽出できない環境
-
自分が書いたコードのIFを明確にし、その静的なチェックを行なう
-
-
css module
-
style-loaderとcss-loaderが必要
-
CSSをJavascript側でimportすると、requireしたCSSをhead内に挿入してくれる
-
-
reactを使うことを前提に作ったものだと
-
javascriptでファイルを読み込む
-
複数のcssファイルに分割してcssを記述する。変換する際にはクラス名は自動生成され、一意になって出来上がる。
-
-
nodemon
-
手動でnode.jsプロセスを再起動せずにソースが自動的に反映されます。
-
プロジェクトのソースを変える必要がない
-
フォルダ下のソースを監視し、何か変わったら自動的にnode.jsを再起動する
-
-
Immutable.js
-
Facebookが開発している、不変データ構造を扱うJavaScriptのライブラリ
-
作成後にその状態を変えることのできないオブジェクト
-
-
サーバサイドレンダリングをする理由
-
jsでレンダリングは、初期ロードコストが高い、jsレンダリングなのでSEOに弱いかも（Googleは大丈夫そう）
-
jsでは、変更前後のHTMLの差分を人間が予め準備して、時系列でどんどん変化していくHTMLを考えていくと複雑になってしまい、複雑なロジックをプレゼンテーション層側に実装するのは良くない。
-
Viewの部分を仮想DOMを利用してComponent化する
-