2017年10月27日の発表資料です。

1. 2017/10/27
JustTechTalk#10
株式会社ジャストシステム 田中優太

2.  自己紹介
 薬学出身の新卒２年目エンジニアです。
 JUST DWHのフロントエンド担当
 JUST DWH
 医療用データウェアハウス
 院内の各システムに散らばったデータを取り込んで
一元化
 システムをまたがったデータ抽出・分析、全文検索
 フロントエンドにReact-Reduxを採用

3.  E2Eテスト(今回は説明を省略)
実際のユーザー操作で正しく動くこと
シナリオテスト数個
 ユニットテスト
各モジュールが正しく動くこと
Node.js上のテスト
 処理系が違うが実行が速いため開発中に使う
ブラウザ上でのテスト実行
 ユニットテストをブラウザ環境でも動かす
 ブラウザ間のJSエンジンの違いを確認
 テスト以外のバグ検知
ソースコード静的解析（ESLint）

4. テストランナー
Mocha：Node上での実行
Karma：ブラウザ環境での実行
モック・スタブ
Sinon.js：コールバック関数のテストなど
Enzyme：React.Componentのテスト
アサーション
Power Assert：APIがシンプルなアサーション

5. メンテコストを考慮して書く/書かない
特にViewは流動的
 Viewはユニットテスト書かない
という方針ではない
共通部品はしっかり書く
テストしやすい設計は常に意識
テストを書かない判断をした場所も
開発者が不安な点をテストに書く

6. 設計と性能を両立できる
（Virtual DOM, 永続データ構造、メモ化）
宣言的プログラミングで可読性が高い
（対義語は手続き的、命令型）
ライブラリの設計レベルで
"テストしやすさ"が考慮されている
ここを次から詳しく見ていきます。
 React採用事例増加中
 Facebook、Instragram、Twitter、Qiita、Trello、Bitbucket、My Visual
Studio・・・
 React-Redux、フロント以外にも進出中
 スマホアプリ（React-Native）
 デスクトップアプリ（React-Native On Windows、Electron + React-Redux）

7. ※これ以降の説明では、わかりやすさを優先した結果、不正確な記述があります。
Component
Middleware
ActionCreator
Action
State
Reducer

8. Component
Middleware
ActionCreator
Action
State
Reducer
Model
View
Controller

9. ブラウザ上の
HTML
Component
Middleware
ActionCreator
Action
State
Reducer

10. Component
Middleware
ActionCreator
Action
State
Reducer
In：Stateの一部
Out：仮想HTML要素
 純粋関数とは・・
 引数が同じなら返り値が常に同じ
 副作用がない
 純粋関数のテスト
 関数のIN/OUTのセットが正しいかどうか をテストすればいいだけ
In:
現在のState
Action
Out:
新しいState In：生成に必要な情報
Out：Action(JSON)
JSON
JSON
副作用有
※コンポーネントを純粋関数というのは少し乱暴かも

11. 状態を"State"に、副作用を"Middleware"に
隔離することで、他の部分の純粋性を実現
Component
Middleware
ActionCreator
Action
State
Reducer
 アプリ全体の"状態"を保持する
一つのJSONオブジェクト
 基本、読み取り専用。
 Reducerによってのみ更新される。
 イベント処理全体の流れを記述する
 副作用を伴う処理
 Reducerでできない処理
 API処理、非同期処理、Action
の連鎖など

12. Component
Middleware
ActionCreator
Action
State
Reducer
 Stateを更新する関数
 現在のStateとActionを受け取って新しいStateを返す
 アプリのロジックはStateに対する操作ととらえて実装
 テスト
 引数と結果の組が正しい → アプリのロジックが正しい
In:
現在のState
Action
Out:
新しいState
In：生成に必要な情報
Out：Action(JSON)
イベントを表現するJSON
動作の種類(type)と
動作に必要な情報を持つ

13. Actionとして、以下のような
オブジェクトが渡ってくる
{
type: 'ADD_TASK',
name: '掃除',
dueDate: '2017/10/27',
}

15. ブラウザ上の
HTML
 Stateの一部を受け取って、HTMLを描画する。
 ステートレス
 Props（引数）が同じなら、出力もおなじ
Viewクラスをメンバ関数を順番通りに呼ばないとうごかない・・みたいなことがない
 Propsを使って、出力するHTMLを定義するように記述
 テスト
 引数と結果の組が正しい → アプリのViewが正しく定義されている
Component
Middleware
ActionCreator
Action
State
Reducer
In：Stateの一部
Out：仮想HTML要素

18.  ユニットテストを書く優先度
Reducer
 アプリのロジックを記述しているため優先度高
Component
 Viewは変更頻度が高いため優先度中
 但し、共通UIパーツは優先度高
Middleware
 重要だがコストが高いため優先度中
ActionCreator
 JSONを生成するだけなので意味が薄いため優先度低

19. 【効果】
 アプリのロジックとViewをユニットテストできている。
 開発プロセスの効率化に大きく貢献
 テストしやすい設計は、可読性にも貢献
 静的解析（ESLint）により
変数名のtypoによるバグなどは未然に防がれている。
【課題】
 型導入など、テスト以外でのバグ検知もより充実させる
 Middlewareにもテストしやすい記述を実現するライブ
ラリを導入する（redux-sagaなど）

20. テスタビリティの面からReact-Reduxを
紹介しました。
自動テストの実行環境整備も大切ですが
テストを考慮した設計も大切