2019年3月20日(水)にLINE株式会社で行われた「UIT#6 進化する React.js」のセミナーに参加してその内容がとてもタメになったので自身の備忘録も兼ねて投稿します。
こちらのセミナーはconnpassから登録しました「UIT#6 進化する React.js」
React Hooksを使ってアニメーション処理を行なう
アニメーション処理を使うところ／使うべきじゃないところ
- 「情報伝達/情報編集」に重きを置くならアニメーションを控えるべき
- 構成要素を認識させるならアニメーションを使うべき
- アニメーション設計を行なうことでコンバージョン達成につながる
- 利用者が提供者に興味がないときに通知機能としてアニメーションを使う
- 利用者が提供者に興味があるときは補佐機能としてアニメーションを使う
- アプリケーションの情報構造の認知を促すときにアニメーションを使う
- 利用者が提供者と対話するときにアニメーションを使う
- ユーザーのアクションに対してアニメーションで応える対価機能
なぜReact Hooksを使ってアニメーションしたいのか
- 関数コンポーネントでstateが扱えるようになったから
- 関数コンポーネントでライフサイクルメソッドと同等のことが可能になったから
- アニメショーンを実装するときはStatefulなComponentで書きたいから
これからのClass Component
- React HooksができてもClass Componentは廃止されない
- Class Componentを利用したライブラリは今後も使える
- これからはClass Componentを書く必要がなくなる
現場でReactを使ったときの悩みと改善点
TypeScript導入
- JS Docの更新が面倒だから(怠るから)、TypeScript導入を考える
- 勉強会を実施して、サンプルプロジェクトで書いてみる
- TypeScriptが分かるメンバーが書いたソースを真似ながら他のメンバーも実装してみた
- 結果、開発しやすくなった、修正箇所が分かりやすくなった。
Css-in-JsでEmotion導入
- 「CSS-in-JSのライブラリとして「emotion」を選択している理由」
- ドキュメントが充実している
- 「babel-plugin-emotion」を使うとclassNameが「フォルダ名/ファイル名/コンポーネント名」になるので該当コンポーネントを探しやすい
- コンポーネントを削除するとスタイルも削除するので不要な記述が残らない
「Redux-Form」から「Formik」に変更
- Redux-Formはバリデーションなど拡張するときに優れてなかった
- FormikはReact公式サイトで推奨されていたので使用
- バリデーションの操作がしやすかった
- docが見やすかった
- 全てのFormで採用するかを協議中
Reduxから「re-ducks」
- Reduxだと1ページ、1Storeの構成だった。
- 同じStore構成だとコピペして流用して手間がかかる(Redux)
- 似たようなActionで違うページのActionを呼んだりしてた(Redux)
- re-ducksだとカテゴリーごとのStoreで分けられて、その中のファイル構成も処理ごとに分けられるので理解しやすくなった
- docはこちら
ファイル構成例
duck/
├── actions.js
├── index.js
├── operations.js
├── reducers.js
├── selectors.js
├── tests.js
├── types.js
├── utils.js
データ構造をimmutableにしてくれる「Immer」の使用
- データをmutableに書き換えている箇所があり、レビューで抜け落ちがあった
- データを操作できて、データ構造をimmutabaleにしてくれるImmerを採用
- レビューの負担が軽くなった
Atomic Designについて
- デザイナーと一緒に開発しないと「組織」と「分子」の認識が違う時があるので注意