SPAを選択した理由とその結果～Reactを添えて～

SPAを選択した理由と
その結果
～Reactを添えて～
株式会社日本プロテック
疋田直樹
2 0 1 9 年 1 2 月 1 0 日

Copyright (C) 2019 NIHON-Protec Co., Ltd. All Rights Reserved.
会社紹介
社名株式会社日本プロテック
設立１９８２年１２月
代表取締役早川誠
所在地東京都千代田区鍛冶町
■経営理念
【真摯】Integrity
【相乗効果】Synergy
【継続】Continue

会社紹介
Bot
RPA
IoT
AI
ERP/SCM
Mobile
Database
EC
Logistics
Cloud
HR
見える化
営業強化
グローバル展開
MRP
技術課題経営課題
Sales
CRM 情報共有
生産管理
Migration
会計
企画から運用まで、システムライフサイクルをトータルサポート

自己紹介
• 疋田直樹（ひきたなおき）
• 株式会社日本プロテック所属
– 業務システムの受託開発がメイン
– Java、C#のWeb開発案件が多い
– その他、LINEチャットボットやWatsonなどなど...
たぶん皆さんと同じようなバックグラウンドを持っています

SPAを選択した理由と背景

2年くらい前までの主な技術スタック
Web デスクトップ
Razor
Windows
Forms

ここ2年くらいの主な技術スタック
Web デスクトップ
Razor
Windows
Forms

TypeScript
React
Vue.js
Angular

TypeScript
React
Vue.js
Angular
Single
Page
Application

Why SPA?
レガシー複雑生産性

SPAを採用した理由(1)：レガシーシステム移行
• RIA（Silverlight、Flash、Flex）からの移行案件が増加
• SPAへの移行はメリットが多い
✓ UX（操作性など）の維持
✓ データグリッドなどリッチなUI部品を使える、使いやすい
✓ 既存のコンポーネント構成やバックエンドをそのまま活かせる

SPAを採用した理由(2)：複雑な状態管理の限界

本日の裏テーマ
クライアントサイドは
状態との戦いである

SPAを採用した理由(3)：単純に生産性が高い
• 共通化に関係なく、細かくコンポーネントに分けて開発
– コンポーネントは自らの責務にだけ関心を持つ
• 分業しやすい
– 人をたくさんぶち込めますよ！
• JavaScript（Node.js）のエコシステムが強い
– CSSのモジュール化からコーディング規約のチェックまで何でもある
• TypeScriptが最高

React開発事例：アサイン管理アプリ
• プロジェクトへの人のアサインを管理するアプリ
• 元はExcel
• 約3人月かけて開発（今も追加機能を実装中）
• まだ一画面しかないが、けっこう複雑

• 状態の例
– 未保存データ一覧
– 行挿入
• 必ず一番下に追加する
– 行削除
• 必ず1行空白行を残す
– 独自のフィルター、ソート、グルーピング
– 導出項目
• フィルター毎の件数、選択されたプロジェクトの情報（金額や工数など）

• その他機能
– Service Workerによるオフライン対応（PWA）

カテゴリライブラリ
クライアント側
言語 TypeScript
フレームワーク React
CSSフレームワーク Office UI Fabric React
UIコンポーネント Wijmo
サーバー側
言語 Scala
フレームワーク Scalatra
DB PostgreSQL
技術スタック

その他の事例
• React
– 製品のキャンペーン設定システム
– 製品の構成管理システム
• Vue.js
– 機器の定期検査管理システム
– 被服管理システム
• Angular
– クラウド会計システム
– 倉庫管理システム
意外といける

Reactを選択した理由
状態を一番うまく扱えそうだったから

Reactの基礎
✓ ただの関数の組み合わせである
✓ 状態を局所化する
ポイント

Reactを選択した理由
ただの関数の組み合わせ

Reactの基礎：ただの関数の組み合わせ
html = component(props)

計算結果関数引数

※あくまでイメージです。実際のReactのコードとは異なります。

Card()
Avatar(p) Profile(p)
https://1.semantic-ui.com/views/card.html
ツリー構造

• おさらい
– Reactは関数の組み合わせでコンポーネントを構築する
– 関数呼び出しの結果としてHTMLが返るようなイメージ
• 補足
– クラスを使った書き方もあるが、非推奨という流れになっている

Reactの基礎
状態の局所化

Reactの基礎：状態の局所化何回呼び出しても
結果は同じ

Reactの基礎：状態の局所化
• 副作用がない純粋な関数
• いつ何回実行しても結果は同じ
• 状態を持たない（DBアクセス、
ファイル読みこみも無し）
• 引数（props）が同じであれば必
ず同じ結果が返る
関数型プログラミングからの影響
考えることが減りバグも減る

純粋ではない例

Card(p)
Avatar(p) Profile(p)
props props
props
親のpropsが同じなら
子も同じ結果になる
状態を持たない
コンポーネント
propsが変わると
再描画される

Form
TextBox
Radio
Button
props props
props
state
コンポーネントに状態を
持たせることもできる
状態を持つ
コンポーネント

App
XXX XXX XXX
XXX XXX XXX XXX
props props props
props props props props
props
状態を最小限に抑える
state state
Reactアプリの
基本的な構成

• おさらい
– Reactは状態を極力持たない・扱わないような思想と仕組みを持っている
• 補足
– 親に値を渡すときはコールバックを使う

Form
TextBox
Radio
Button
props props
props
props = {
text,
onTextChanged
}
onTextChanged(“疋田”)
コールバックによる
値の引き渡し
state

Reactの基礎
• ここまでのおさらい
– Reactは主に純粋な関数の組み合わせでアプリ、コンポーネントを構築する
– コンポーネントに状態（state）を持たせることもできる
• ただし、できる限り避けるように
– 値の受け渡し
• 上から下はprops（引数）
• 下から上はコールバック

Reactの基礎
Reactの問題とFlux＆Redux

App
XXX XXX XXX
XXX XXX XXX XXX
props props props
props
状態を最小限に抑える
...が規模が大きくなると？
state state
Reactアプリの
基本的な構成

App
XXX XXX XXX
XXX XXX XXX XXX
props props props
state
大元のstateの値に
よってアプリの状態が
一意に定まる
状態局所化を徹底
したパターン

入力フォームA
入力フォームB
ボタン
ボタン
アイテム詳細
状態
状態
状態
状態
状態
※過度に悪いイメージを植え付けています
React以前

React
state（データ）アプリ全体を表す関数
（コンポーネント）
HTML（アプリ）

計算結果関数引数

App
XXX XXX XXX
props props props
state
このくらいの規模
ならよいが...

App
XXX XXX XXX
XXX XXX XXX XXX
props props props
props props props
大規模になるとpropsと
コールバックの
バケツリレーがつらい
props
state

• Flux
– Facebookが提唱したアーキテクチャ
• Redux
– Fluxに独自解釈を加えて実装したライブラリ
– Reactの状態管理ライブラリでデファクトスタンダードの位置にある

Fluxのイメージ（処理が単方向であることに注意）
https://facebook.github.io/flux/docs/in-depth-overview/

App
XXX XXX XXX
XXX XXX XXX XXX
props
props props propsprops
state
(store)
Redux
適用後
stateとコンポーネント
が直接やり取りできる
ようになる

Before After
Action

• データと処理が1方向にしか流れないためシンプルになる
✓ 処理を追いやすい、デバッグしやすい
✓ 書き方が統一される、悩まずに済む
✓ バグを仕込みにくい
✓ 影響範囲が予測しやすい
業務システム開発、チーム開発に最適

• おさらい
– React単体ではスケールしない
– 業務システム開発ではReduxを使うべし

SPAとReactを採用した結果

うまくいった

• 予想通り、機能、データ、開発者が増えても破綻しなかった
この流れが本当に偉大

SPAとReactを採用した結果：開発フロー
サーバー側とインターフェース決める
Reactコンポーネントを書く
Redux関連のコードを書く
テスト
（サーバー側未完成ならダミーデータで）

• 学習コスト
– 最初は意味がわからん！のは仕方ない
「state？」「Redux？？」「Action？？？」
– 書き方がカッチリ決まってるので、書くだけなら思ったより簡単
– 最初から思想や意義を理解してもらうのは難しい
とりあえず書いてもらおう
– Angularよりは学習コストが低い印象

• サードパーティーのコンポーネント最高！
– Wijmo
– Office UI Fabric React
• Reduxのミドルウェア最高！！
種類が豊富なうえ使い方が似ている

React採用時の注意点：共通化
• 必要がないのに共通化しない
– 実際のところ共通化できるようなコンポーネントは多くない
• 共通化に関係なく、ある程度細かくコンポーネントを切っていく
– 各コンポーネントが自分の責務に集中することで見通しがよくなる

React採用時の注意点：ライブラリ
• ライブラリ選定
– ReactはただのUIライブラリなので色々組み合わせる必要があって大変
...と言われるが、実績があるライブラリの数はそこまで多くない
少し調べればカタイ組み合わせはすぐにわかる
– npm trendsとGitHubを参考にすると○
– 後はAPIの使いやすさやファイルサイズで決めればOK
（TypeScriptを採用したのであれば型定義の有無もチェック）

npm trends GitHub

• 今回採用したライブラリ
– redux-saga（Redux非同期処理）
– redux-persist（stateのローカル保存）
– Emotion（CSS in JS）
– Wijmo（UIコンポーネント）
– Office UI Fabric React（UIフレームワーク）

• Redux非同期処理ライブラリ
– redux-thunk（薄すぎる）
– redux-saga（意外とシンプル！だけど機能豊富で伸びしろもアリ）
– redux-observable（Rx経験者ならよいかも）
– 自作（やめておいたほうが...）

• WijmoとReact
– 相性：おおむねOK（2018） -> バッチリOK！（2019）
– 特にデータグリッドを使うのであればマスト
– FlexGridはReduxとの組み合わせ方に気をつける必要アリ
DataGrid
状態
OR DataGrid
状態
Redux
状態

React採用時の注意点：ボイラープレート
• Reduxを採用すると書くコードの量が激増する
– しかも同じようなコードばかり...
– ヒイヒイ言いながら書いていた
ReactとReduxの改善で最近解決した
React：Hooks（Reactの新機能）
Redux：Redux Toolkit（公式のラッパー、ヘルパー）
絶対にこれらを
駆使すべき

React採用時の注意点：パフォーマンス
• ほとんど完成してからパフォーマンス問題が発覚
– 開発者が使うマシンはスペックが高いので気づかなかった
– Reactに限らずSPA超あるある（辛い...）
Chromeで低スペックマシンをシミュレートしながら
地道に改善していった

Chrome開発者ツールの
Performanceタブで低スペック
CPUをシミュレートできる

• 大規模システムで初期表示時のパフォーマンスが問題になる場合は
コード分割（Code-Splitting）を検討しよう
Before After
Login Page A
Page B Page C
Page A
Page B Page C
Login
すべての画面のスクリ
プトがダウンロードさ
れる
実際に表示される画面
のスクリプトしかダウ
ンロードされない

React採用時の注意点：認証
• 認証は今まで通りのCookie-Sessionベースでも十分
– JWTなどのトークンは扱いが難しい
• ログイン画面だけ別にするのもアリ
Login SPA

React採用時の注意点：Reactの動向
• Reactは基本的にFacebookが自分たちのために作っている
• 我々はFacebookではないので、それいる！？みたいな機能も
• ただ、不要な機能は使わなければいいだけではある
（Reactは後方互換性をとても大事にする）
Concurrent ModeとSuspenseは追っておいた方がよいかも

さいごに
• 業務システム開発全般でReact + Reduxはむしろオススメ
• 最低一人はReactの思想を理解してから導入しよう！

ご清聴ありがとうございました

SPAを選択した理由とその結果～Reactを添えて～

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SPAを選択した理由とその結果～Reactを添えて～

Similar to SPAを選択した理由とその結果～Reactを添えて～ (20)

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社）

More from Developer Solutions事業部メシウス株式会社（旧グレープシティ株式会社） (20)

Recently uploaded

Recently uploaded (9)