はじめに
今回はMixLeap Live Study #59 - Reactとその仲間たちに参加してきましたのでその内容についてまとめます。発表テーマはお題の通り、Reactに関するお話でした。
「React + GraphQLで社内の負債を解決した話」藤本 卓哉さん（株式会社Gemcook）
GraphQLを実際に業務に用いた話です。実際に用いたのはAWSのサービスのAppSyncをとのこと。実際にGraphQLをチャットアプリの開発に用いたお話をされました。GraphQLについての解説はここではしませんが、本格的に知りたい場合はこのオライリー本がオススメです。
ここでは開発にGraphQL(AppSync)を用いて良かったことと悪かったことについてお話されました。そのことについて以下にまとめます。
- 良かったこと
- エンドポイントの本数を減らせた
- ドキュメントの管理コストがなくなった
- 必要なレスポンスを得られる
- すべてをAWSで開発できた
- 悪かったこと
- リゾルバーやマッピングテンプレートの管理方法の検討が必要になった
- GraphQLの学習や実装コストが増えた
- RESTで取得したくなる気持ちと戦う必要があった
印象としてはGraphQLという新しい形の仕様を導入するという学習コストが大きいが、フロントエンドとバックエンドの技術負債は減ったという感じでした。
「React Hooks公開から1年で得られた知見」西村 爽さん（株式会社Gemcook）
React Hooksを業務に導入して得られた恩恵についてのお話をされました。
Gemcookでも当初はクラスコンポーネントやRecomposeを用いていたみたいです。しかしHooksを導入することでStateの管理をシンプルにできたり、カスタムフックを用いてコンポーネント間のロジックの共通化ができるようになったとのことです。実際に用いたライブラリは以下のものとのこと、
これからはカスタムフックを提供するライブラリが主流になるとのお話をされました。
「React/ReduxにSelectorを導入したら幸せになった話」松井 真子さん（ヤフー株式会社）
Reactで入稿ツールを開発するといった内容でお話されました。テーマは、入稿ツールを開発する際に困ったことの一つとしてのバリデーションの実装が複雑になったことへの解決についてでした。
Reselectを用いることでStateを渡す前にバリデーションをかけることができて、実装を切り分けることができたとのことでした。
「React × Unity」 青山 広大（ヤフー株式会社）
UnityとReactの連携をreact-unity-webglを用いて行ったというお話でした。このライブラリを用いることでUnityでビルドしたソースコードをReactで呼び出すことができるみたいです。また逆に、Unity側からReactのコードを呼び出すこともできるみたいですね。
「React Nativeで家計簿アプリを作って得たもの」 西仲 幸太さん（ヤフー株式会社）
タイトルの通り、家計簿アプリをReact Nativeで行ったというお話でした。経緯としては、複雑な家計簿の計算を行うアプリを開発したかったからとのことです。ステート管理にRedux、画面遷移のハンドリングにReact Navigation、データの保存にはFirebaseを用いたそうです。
これらのツールを用いることで高速でアプリの開発ができるようです。
さいごに
使ってなかったツールの紹介がほとんどだったので、明日にでもやってみたい（やるかどうかは別として）なと思いました。個人的にはAppSyncで次は記事を書いてみたいなと思いました。
