reactを使う上で必要な物たち

  • サーバーサイド
    • 言語
      • 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化する