MixLeap Live Study #59 - 「Reactとその仲間たち」に参加して
はじめに
59回目のMixLeap Live Study!内容は「Reactとその仲間たち」に参加しました。初のオンライン開催ということで僕もドキドキしていました。(聞くだけですが)結果音声や途中で止まるなどトラブルもなく、ストレスなく聞くことができました。こういうスタイルは勉強しやすいしこうやってアウトプットもしやすいので良いなあと思いました。
ということで今回は内容と感想について書いていきます。
React + GraphQLで社内の負債を解決した話
AWSのAppSyncを使いチャットの機能を構築した話
GraphQLとは
APIで使用するための問い合わせ言語
AppSyncとは
サーバレスの形でGraphQLのバックエンドを実装できるAWSのフルマネージドなサービス。
最初の障壁が低く細かい仕様をカバーできる。
GraphQLの良かった点
・エンドポイントが1つになる
・フロントが欲しいデータだけ取得できる
・フロントエンドの責務を増やし開発負荷を均等化できる
・APIドキュメントはSchemaで常に最新
・AWSで完結
GraphQLの辛かった点
・リゾルバーやマッピングテンプレートの管理方法については検討が必要
・VTLが初めは慣れない
・コードの書く量が増える
・RESTで取得したくなる時もある
まとめ
技術的負債がかなり解消できるのでGraphQL導入してよかった。
React Hooks公開から1年で得られた知見
React Hooksとは
react16.8.0移行で利用可能な関数コンポーネントのAPI
なぜ関数コンポーネントなのか
クラスコンポーネントはClass構文が必要なため複雑
thisやbindなど独特な構文を意識する必要があり複雑
関数コンポーネントはシンプルに実装できる
Hooksのメリット
・関数コンポーネントが高機能
・見通しのいいコードになる
・コンポーネント間のロジックを再利用できる
・UIとロジックを切り分けられる
基本的なHooks
・useState:コンポーネントに状態を付与する
・useEffect:ライフサイクルイベントの管理
・useContext:コンテキストの値を参照
まとめ
Hooksの登場で関数コンポーネントが主流になった。
Hooksを使用することでコンポーネント間のロジックを共通化できる。
React/ReduxにSelectorを導入したら幸せになった話
WordPressのような入稿ツールを開発した際バリデーションの実装が複雑といった問題が発生した。
バリデーションの実装が複雑になった理由としては、
・バリデーションのタイミングが複雑(入力、DBからデータ取得時)
・実装が複雑(ActionやReducerの中ではロジックを持たせたくない)
といったことが挙げられるがReselectを使い解決
Reselectを使うと
・Stateが渡されたときに関心のある値を返すことができる
・バリデーションを切り出して結果をpropsとして渡せる
・バリデーションを保持しなくていい
これによってコードがすっきりし責務わけができたことで品質が担保されテストが書きやすく余計なデータを保持しなくてよく良い
React × Unity
UnityはWebGL書き出しできるのでReactと連携してみる話
なにをもって連携できるとするか?
・reactのコンポーネントとしてUnityのビルド結果を表示できる
・reactからUnityのメソッドを呼び出せる
・UnityからReactのメソッドが呼び出せる
react-unity-webglを使うことで解決
Web,Unityから相互にアクションを起こすことができる
Unity上でECサイト構築してるのほんとに楽しそうでした
夢がある技術だと思いました。
React Nativeで家計簿アプリを作って得たもの
React native Redux firebaseを使い家計簿を作った話
Firestoreとは
ドキュメント試行のNoSQLDB
エンドユーザーから直接アクセスできバリデーションやユーザ認証など考える時間が減る
Firestoreの機能
・セキュリティルール：バリデーションのようなもの
・リアルタイムリスナー：最新状態をアプリケーションに同期する仕組み
・オフライン対応：読み取りはキャッシュ、書き込みはキューに蓄積
まとめ
ReactNative+Expo+Firestoreでそれなりに高速にアプリ開発ができる
FirestoreはReactと親和性高めでした
感想
自分自身Reactは最近始めたので深いことはわかりませんでしたが
Reactを勉強すればこんなことができるんだ!と勉強する意欲が湧くような内容でした。GWで基礎を勉強して何かアプリ作ってみたいと思いました。