- UIT#6 進化する React.jsに参加してきました。
| タイトル | 発表者 |
|---|---|
| Hooks で作る React.FC | Takepepe |
| Page Stack again in React | sunderls |
| 現場から届けるReactの悩みと改善 | sakito |
Hooks で作る React.FC
- Takepepeさん(DeNA)
サービスフロントエンドアニメーション
- アニメーションネガティブ要因
- ただ派手なだけ
- 予測不能な動き
- テストつらい
- 速度 === UXなアプリもあればそうでないアプリもある
- アニメーションが向かないアプリ
- 読み物系
- 遷移が多い
- 明確なユーザストーリーが描けるものは活用するべき
機能としてのアニメーション
通知機能
- 利用者が興味がないフェーズ
- 悪目立ちさせない
補佐機能
- 利用者が興味があるフェーズ
- チュートリアルなど
認知機能
- 利用者が理解するフェーズ
- 現在位置を認知させるトランジション
対話機能
- 利用者と対話するフェーズ
- 従順な反応
- リアルコミュニケーションと同じ
耐火機能
- 利用者が評価するフェーズ
- アプリからの要求対価
React Hooksとアニメーション
従来のReactとアニメーション
- アニメーションは非同期
- classにする必要ある
- cssに関する知識がいる
React Hooksとアニメーション
- Classが不要に
- メモ化が簡単
- アニメーションもやりやすくなった
- useContextで0~1の係数を管理して子に伝播する
- function componentに気軽に後からアニメーション追加できるのがいい
Page Stack again in React
- sunderlsさん(LINE)
アプリとWeb
アプリの何がいいのか
現場から届けるReactの悩みと改善
- sakitoさん(yahoo)
担当のプロジェクト
- フロントエンド15人
- BtoB
刷新
- React + TypeScript
- SassからEmotion
TypeScript採用前
- 採用前はJSDocを頑張って書いてた
- 更新されずに放置される
- propsを確認するUnitTestメンテ辛い
TypeScriptの採用
- TypeScript採用で実装スピード遅くなってしまわないか？
- コンパイルでエラー分かるのが効率的だった
- 修正箇所がわかりやすい
- propsのデータがわかるから開発しやすい
- 使えないライブラリないか
- そんなことなかった
- 今どきのReactライブラリはTypeScript対応してる
SassからEmotion
ReduxFormからFormikへ
- ReduxFormつらかった
- バリデーションは拡張しないとつらい
- 簡単なフォーム作るには便利
- Yupというバリデーションライブラリと合わせて使うとやりやすかった
Reduxの構成変更
- 従来は1ページ1store
- コピペが乱立
- re-ducks
- ducksを拡張していい感じにしたもの
- それぞれのファイルの責務がわかりやすくなった
- テスト書きやすくなった
- そこそこ規模大きめな時に向いてるのかな？
- Immerを採用
- ImmutableJSはハードル高い
- Redux周り以外にも影響ある
- Storeのデータ構造の操作が見やすくなった
- 開発メンバー多くてもimmutableな状態を保ちやすい
- レビューもしやすい
- ImmutableJSはハードル高い
