「React.js meetup #6」に参加してきました

勉強会メモ
  • React.js meetup #6に参加してきました。

reactjs-meetup.connpass.com

  • @koba04さんのライブコーディングがいい刺激になりました！suspenseはまだunstableとのことですが早く使えるようになってほしいです！
  • Apolloはちょっとさわったことありましたが、Reduxの面倒なとこが減りそうだなという期待が広がりました！
タイトル 発表者
読みやすいコードの書き方のススメ @hmktsu
React HooksとReduxとProxy @dai_shi
ちょっと先のReact @koba04
ApolloとReactを使ったアプリケーション設計 @about_hiroppy

読みやすいコードの書き方のススメ

  • @hmktsuさん
  • 株式会社g&h

読みやすいコード

  • 他の人と作業する時流れが理解しやすい
  • 久しぶりに見ても迷わない

Reactのコードを読みやすくするポイント

eslint-config-airbnb

  • ルール厳し目
  • 誰が書いても似たようなコードになる
  • VSCodeの拡張と組み合わせてauto-fixもおすすめ

defaultProps

importの整理

  • 順番が適当だと分かりづらい
  • 順序のルールを決めておく

React HooksとReduxとProxy

  • @dai_shiさん

React HooksとReduxとProxy

  • function componentsで全て完結する仕組み

Redux とReact Redux

  • Reduxは99行だけ
    • React関係ない
  • React Redux
    • Reactに依存したライブラリ

React Reduxの代替

  • Reduxを使わずにHooksで同じようなことを実現
  • Reduxは使うけどReact Reduxは使わずに実現

Reduxの問題点

  • stateはグローバル
  • stateの一部の変更で関係ないcomponentまでレンダリングされてしまう
    • selector指定
    • memorizeする
    • auto-detectする

auto-detect

  • 何もしなくてもselectorを指定したときと同じように動かす
  • Proxyを使う
    • stateのうちどの部分が使われたか知ることができる
    • Proxyが重いけどなんとか使えるレベルでは動いてる

ちょっと先のReact

  • @koba04さん

ライブコーディング

コード

github.com

ApolloとReactを使ったアプリケーション設計

  • @about_hiroppyさん

GraphQL

  • サーバサイドでqueryを定義
  • エンドポイントは一つだけ

Apollo

Apollo Client

  • queryをサーバに投げる
  • 結果をUIに返す
  • キャッシュとかもやってくれる

apollo-link-state

  • ローカルの状態をGraphQLのクエリを使い処理する
  • mutation投げるときにローカルの処理もできる

ApolloとRedux

  • Reduxと比べてApolloは
    • fetchのフラグ管理がとても楽
    • 部分更新が簡単
    • リモートとローカルを同一クエリで表現できる
    • 複雑な処理を書くのはあまり向いてない

まとめ

  • Apolloはエコシステム含めて充実している
  • Reduxのコード減らせる可能性高い