• こんにちは!!

  • 話したい事

    • Redux に求めていたこと
    • Redux よりも大事なこと
    • Redux と戦える強いチームを作る
    • Redux ではなく unstated という選択肢
  • Reduxに求めていたこと

    • 全画面で共通して使うデータをどう扱うか悩む
    • 状態管理をどうやってやるのか
    • Redux はそれに特化したフレームワーク
    • フレームワークを使うと同じ作法でコードを書ける
    • 実を言うと私はそれが一番大事だと思っています😀
  • Redux を使いたいが...

    • 私が言うには学習コストが高い
    • 私が言うには Redux は純粋関数にこだわりすぎな気がする
    • 私が言うには純粋関数は非同期処理が出てくると話がややこしい
    • 私が言うには理想が高すぎて敷居が高い気がする🙁
  • 私が出した結論

    • Redux を使わない方法を考える
    • もしくは投入するタイミングを遅らせる
    • 親コンポーネントから props を渡す、で乗り切る方法もある
    • 最初はひとまず他の開発者にも React.js に慣れてもらう
    • Redux はそれからにしよう
  • Redux よりも大事な事

    • 要件を満たし、メンテナンスを属人化させないこと
    • React.js を使えるエンジニアが一人だけだとつらい
    • フロンエンドに強いメンバーをチーム内に増やす
    • 強いチームでないと Redux に立ち向かえない
  • Redux と戦える強いチームを作る

    • フロントエンドの担当を大きく2つに分けた
    • react-router などを扱い、画面遷移を担当するシニアエンジニア
    • storybook で component を作成するのに専念するジュニアエンジニア
    • この切り分けをした事には重要な意味がある
  • コミュニケーションコストが高い問題

    • フロントエンドが一人だとサーバーサイド、デザイナー二人との対話が発生する
    • なかなか作業が進まない
    • component を作成するエンジニアをアサインしてもらう事によってデザイナーとの対話もお任せできるようになった
  • うまく分割することに成功

    • 作業量が多い、コミュニケーションコストが高い問題を解消した
    • component 作成だけであれば React.js を学習するだけなので学習コストが低い
    • 新人エンジニアやHTMLコーダーに覚えてもらうことも可能になり人材確保が容易になった
    • リードエンジニアが Redux に立ち向かう事ができるようになった
  • 何が言いたいかと言うと

    これぐらい準備をしっかりしないといけないぐらい、私にとって Redux は難しかったです

  • そろそろ Redux の話

  • Redux を導入するタイミングを考える

    グロースさせようとすると状態管理がやっぱり必要

  • 状態管理が必要なケース

    ざっくり言うとヘッダー部分にある全画面で使われるグローバルな情報。ユーザー情報既読未読通知

  • 状態管理必要だけど Redux つらい問題

    やはりフレームワークの導入を検討したほうがよくなってきた。でも Redux つらい。そして途中から Redux を導入しようとするとコードの差分が大きくなるので Pull Request と review のコストが大きい。

  • 本日はそんなあなたにぴったりの unstated のご紹介です

  • unstated 登場の経緯

    • React は state の管理はサードパーティーのライブラリに頼っていた
    • Redux, mobx など
    • そんな中 React v16 で Context API が変更
    • state の管理を React.js でもかなりできるようになった
    • その Context API を超薄く拡張したライブラリ unstated が登場
  • unstated とは

    • React v16 の ContextAPI を拡張したライブラリ
    • 私が言うには学習コストが低い
    • ソースコード自体はわずか400行
    • React.js のみで書かれているので、テストが簡単
    • デバックのためのエコシステムも充実している
  • これはすごい

    みなさん詳しく知りたいですか?

  • 詳しくは

    Qiita に詳しく書いている人がいらっしゃいますのでご覧になってください。

    https://qiita.com/kaba/items/50126e874b24ff984471
    https://qiita.com/kaba/items/b05f680f850dd46548f3

  • 最終的なまとめ

    • どのライブラリ、フレームワーク使ってもいいと思います
    • アプリの状態を管理する前に自分たち力量を管理しましょう
    • Redux がつらい場合は unstated というライブラリもあります
    • ちなみに typeless もあるよ
  • ご静聴ありがとうございました

Item 1 of 22
Next redux? New state container unstated