2020/04/28 MixLeap Live Study #59 - Reactとその仲間たちの勉強会メモ
2020/04/28（火）にオンラインで開催されたMixLeap Live Study #59 - Reactとその仲間たちの勉強会メモです。
イベント詳細
目次
- 内容
- 質疑応答
- 感想
内容
React + GraphQLで社内の負債を解決した話@藤本 卓哉氏/株式会社Gemcook
GraphQLを採用するまでの経緯
- Miyou というマッチングサービスをつくる
- マッチングサービう＝チャットが必要＝GraphQL使おう
- GraphQLとは
- あるサーバーに対してデータの問い合わせできるクエリ言語
- SQLはDBに対してデータの問い合わせできるクエリ言語
- 特徴
- 必要な分だけデータを取れる
- 1度でデータをまとめて取得できる
- 型システム
- 導入するとなにがいい？
- 1つのエンドポイントでほしいデータを取れる！
- ＋AppSyncを導入
- 最初の障壁が低くなり、細かい仕様もカバー
GraphQL（AppSync）の良かった点
- 社内の負債がいくつか…
- エンドポイントが大量発生→エンドポイントが1つになり地獄から開放
- APIドキュメントはバックエンドのしごと→フロントエンドの責務を増やすことができた！
GraphQL（AppSync）の辛かった点
まとめ
- フロントエンドとバックエンドが仲良くなれた
- 技術的負債の解消ができた
- チームの布教と理解、共有は必要
React Hooks公開から1年で得られた知見@西村 爽氏/株式会社Gemcook
React Hooks概要
- 16.8.0 以降で利用可能
- 関数コンポーネントで利用可能
- React Hooksのメリット
GemcookのコンポーネントとHooksの歴史
- Gemcookのコンポーネント
- クラスコンポーネント
↓
- 使っているライブラリ
まとめ
React/ReduxにSelectorを導入したら幸せになった話@松井 真子氏/ヤフー株式会社
入稿ツール
入稿ツールの開発時に困ったこと
- コンポーネント間の依存関係が複雑
- 1からAtomicDesignを導入し、作り直し
- バリデーションの実装が複雑に
- データ構造が複雑＆ネストが深め
バリデーションがなぜ難しい？
- バリデーションのタイミングが難しい
- 実装方針としてActionやReducerの中ではロジックをもたせたくない！
- そもそもバリデーションの条件が多かった
そんなとときに助けてくれたselector
- 使うと何がいい？
- stateが渡された際に関心のある値を返すことができる
- 責務分けができた！
まとめ
- 責務分けができた！
- stateが渡された際に関心のある値を返すことができる
- selector機能をつかうと余計なデータを保持しなくて良い
- バリデーションの切り分けできてよかった
React × Unity@青山 広大氏/ヤフー株式会社
Unity?
- ゲーム作れるすごいやつ？
- 対応プラットフォームにWebGL！
- Webにできるのでは？
React Nativeで家計簿アプリを作って得たもの@西仲 幸太氏/ヤフー株式会社
アプリの紹介
- 家計簿アプリ
- メールアドレス/PWで認証
- 月で一覧表示
技術紹介
Redux
- Hooks が2019年6月にリリース
- Hooksを使うことで記述量が減らせる
- Hooks が2019年6月にリリース
React Native
- v5がリリースされ、タグが囲む形式になって可読性が上がった
- Firebase
- Firestoreを利用
- 考えるべきこと
- 必要なデータ加工不要な形式で取得可能
- 機能
- セキュリティルール
- リアルタイムリスナー
- オフライン対応
- 考えるべきこと
- Firestoreを利用
まとめ
- React NativeもReact！
- Reactのよさはそのまま
- React + Expo + Firebaseで迅速に対応！
質疑応答
React + GraphQLで社内の負債を解決した話@藤本 卓哉氏/株式会社Gemcook
@藤本さん GraphQLって中間サーバー（APIとフロントエンドをつなぐ）を設けるというイメージなのですが、そのことによるパフォーマンスって気になりますか？
- きちんと所感では問題なさそう
- 設計次第でそこは解説できそう
GraphQLを知った上で、あえてREST APIを採用した方がいいケースはありますか？
- 画像や動画ファイルでやり取りする場合
2つ質問させてください。 ①クライアントではapolloを使っていますか？使っていたらここのメリデメを知りたいです
- メリット
- Hooksベースで作れる
- コードを簡素化できる
- デメリット
- 教育、布教が大変
②チャット以外でGraphQLを使うことってどう言うユースケースが想定されますか？
- グラフの描画などのサブスクライブなところ
@藤本さん RestからGraphQLへのパラダイムシフトで、「ここは要注意！！」のようなものはありますでしょうか？
- キャッシュの使い方は気をつける/Appsyncで完結
- プラグインを使ってgit管理している
新しい技術のチームビルディング
- 採用で新しい技術のキャッチアップをしたい人を集める
- 当事者意識を持って、布教する
React Hooks公開から1年で得られた知見@西村 爽氏/株式会社Gemcook
@西村さん React Hooksにしてからテストフレームワークは何を使っていますか？ - jestを使ってる - React testng Library - React Hooks testing Library
@西村さん HooksによるState管理とReduxによるState管理って全く別の考え方でいいのでしょうか、初学者はやはり両方通るべきでしょうか。
- ReduxとHooksは共存するものなので、両方学んだほうがよい
@西村さん hooksの登場でもうクラスは使わなくなったのでしょうか？あとhooksはuseEffectなど色々ありますが、全種類使ってる感じでしょうか？
- 新しいプロジェクトではクラスをつかっていない
- 基本的なものは使っているが、全種類は使っていない
React/ReduxにSelectorを導入したら幸せになった話@松井 真子氏/ヤフー株式会社
@松井さん 今バリデーションで同じことをするとしたらHooksを使った実装をしますか？？
- 使う
- Hooksを使うとコードがスッキリしそうなので、使う
- Hooksメインでselectorも使う
- Hooksを使うとコードがスッキリしそうなので、使う
＠松井さん バリデーションが簡単になったとのことですが、コードを書く量が相当減ったということでしょうか？ - 記述量はだいぶ減った
@松井さん バリデーションは何かライブラリを使われていますか？
- 使っていない
React × Unity@青山 広大氏/ヤフー株式会社
@青山さん VRやARもできますか？？
- SDKがでていればできるが調べたところだとなさそう
@青山さん 今回のデモンストレーション実装にどの程度の時間がかかりましたか？
- 2日
- それぞれになれている人はもっと早そう
React × Unity について質問です。 (1)UnityでC#ソースコードをビルドするとJSファイル変換されるのでReactからメソッドを読めるようになったのでしょうか？
- そのとおり
(2)Unityちゃんがカクカクしていたのはレンダリング結果がリアルタイムのアニメーションではなく静止画の紙芝居になっているからなのでしょうか？
- プロダクトとして出すのであれば、もっとシンプルにしないと重たい
React Nativeで家計簿アプリを作って得たもの@西仲 幸太氏/ヤフー株式会社
@西仲さん 普通のDBシステムと、firestoreの違いで苦労した点はありますか？ - データモデルの違い - クライアント側で加工しないようにするにはどうしたらいいかを考えるのが大変だった
@西仲さん Firestoreはアプリと親和性が高く、かつ学習コストも低いのでメリット面が非常に大きいと感じました。逆にFirestoreを使うデメリットです（≒NoSQLのデメリットにもなるかと思いますが）とか、こういう状況ではFirestoreは使うべきではないという場面はどのような場面を想定されますでしょうか？
- サーバーサイドでロジックを持ちたいときはサーバーサイドをかませて使うべき
@西仲さん Firestoreの利点として，リアルタイムリスナー(Reactと親和性が良い)とあったと思うのですがReactのどのような点と親和性が良いのでしょうか？
- データフローを単一化できる部分が親和性が高い
感想
普段はヤフー株式会社の大阪オフィスで開催されているイベントが今回はオンライン配信という形で開催されていました。
ReactからGraphQL、Unityと幅広く紹介されていて、勉強になりました！
今回分のアーカイブは公開されないそうですが、次回以降は検討されるとのことなので、期待したいです。
