React.js Meetup #6 に行ってきました。 #reactjs_meetup

Yahoo!スポンサートーク by @__sakito__ さん

社員

• 社員6611人
• エンジニア 2600人
• デザイナー 400人
• 100以上のサービス

働き方

• フリーアドレス
  • どこに誰がいるかわかるシステムが構築されている
• 1on1
• Hack Day
• ヤフーミーティング
• 食堂・カフェ
• 保育園

フロントエンド

• React, Vue, Angular, jQuery, Backboneなどなど
• まとめブログがあります
  • https://techblog.yahoo.co.jp/advent-calendar-2018/yahoo-frontend/
  • Devサミで話します
• Yahoo! TechConference 2019
• イベント
  • フロントエンドランチ会
  • LT会
  • もくもく会
• 採用募集
  • 日本全国募集しています

読みやすいコードの書き方のススメ by @hmktsu さん

読みやすいコード

• 他の人と一緒に作業するときに流れが理解しやすい
• 久しぶりに触るときに迷わない

eslint-config-airbnb

• 素のESLINTよりも厳しい
• 誰が書いても似たような感じになる

VSCodeのプラグインで保存時に自動整形

DEFAULTPROPS

propsの初期値を設定しておけばVSCodeでマウスオーバーすると教えてくれる

importの整理

• package.jsonのnameをつける
  • nameがルートのエイリアスになる

その他

• コンポーネントを返すメソッドをJSX内に書かない
• アセットを一元管理する

React HooksとReduxとProxy by @dai_shi さん

React Hooks

function componentsですべて完結する仕組み

出てくると言われてから時間がかかった

React Hooks好きすぎてライブラリをたくさんつくりました

Redux

Reduxは独立したライブラリ。本質的には99行程度

React ReduxはReactに依存したライブラリ

React Hooksによって代替ライブラリが登場

• Reduxを使わずにhooksで似たようなことを実現するライブラリ
• など

作るにあたって

• Redux Storeを作成
  • 素朴な実装だと関係ないコンポーネントがレンダリングされる問題に対応したい
• 変更検知問題
  • selector
  • memoization
  • auto-detect
  • これを採用した
  • Proxy
    • オブジェクトの操作をフックすることができるのでどの部分が操作されたか検知できる

react-hooks-easy-reduxを作りました。
v0.8.0はすごく遅かった(8.37fps)が、ボトルネックになっていたライブラリの作者とともにボトルネックの改善をして39fpsくらいになった

ちょっと先のReact by @koba04 さん

reactjs/ja.reactjs.org
新しい日本語ドキュメントプロジェクトが立ち上がっているので興味ある方はぜひ。

（ライブコーディング）

• class componentsをfunction componentsに書き換え
• SuspenseでのLoading callback埋め込み
• Lazyロード
• useCallback(func, [...obj])で、useCallback(func, [])にすると1度しか動かない
  • [...obj]に変更があったときにfuncが呼ばれるため

APOLLOとREACTを使ったアプリケーション設計 by @about_hiroppy さん

• GraphQL
• Apollo
• apollo-link-state

Apollo

GraphQLプラットフォーム

• 一部がOpen Sourceとして無料で提供されている

  • Apollo Server
  • Apollo Client
  • JavaScript
  • Native Mobile
  • Apollo Links
  • ...

GraphQL Gatewayみたいなもの……？

apollo-link-state

ローカルデータをapollo clientで管理して、GraphQL query/mutationでアクセスする

redux vs apollo

• fetchのフラグ管理が楽
• 部分更新が簡単
  • バケツリレーが起きない
• 何が必要かわかりやすい
  • リモートとローカルを同一コンポーネントで表現できる
• 複雑な処理を書くのはあまり向いていない

まとめ

• apollo はエコシステム含め充実している
• ...
• ...

どうにも疲れているようで後半理解しきれなかった……orz