リクルート × BASE × バイセル 【第1回フロントエンド勉強会】に参加しました
今日はBuySell Technologiesさん主催のリクルート × BASE × バイセル 【第1回フロントエンド勉強会】 React & GraphQLに参加してきました。
帰って参加レポを書くまでが勉強会！なので書きます。
Reactのコンポーネント設計
WF to Codeでのコンポーネント設計しっかり手順組んでやっていくというお話。
具体的には、コンポーネント分割→ツリー図→IF設計という流れ。
登壇スライドの中でも例とともにこんな感じというものがあったのでめちゃくちゃ分かりやすかった。
backendだとシーケンス図書いて〜とかで割としっかりと設計していたけど、Reactのコンポーネント設計って頭の中でなんとなく組み立ててぽや〜と進めちゃっていた節があったので、段階的に設計してから手を動かすとカオスを生むこともなくて嬉しい。
早速次機会があればやってみようと思った。
カートUIのフォーカスを可視化する
BASE株式会社さんのカートUIのa11y改善のお話。
safari...!!のくだりでは現場にいた全frontenderが心の中で頷いていたはず。
自分のチームではデザインエンジニア的なポジションの方が主体的にa11y進めてくれていたりするので、そういったポジションがないとデザイナーエンジニア間でのコミュニケーションは課題になってくるよな〜と改めて認識した。
あとは最近jsx-a11y導入して、hrefのないAnchorタグめちゃくちゃ怒られてたな〜という記憶があるのでa11yやっていかねばという気持ちになった。
ちなみにWebアプリケーションアクセシビリティの書籍買ったもののまだ全然読めていないので読まないと...
GraphQLでのキャッシュ戦略
GraphQLのキャッシュを種類に分けていい感じに活用しようやというお話。
クライアントサイドでのキャッシュ、うまく活用したいけどなんとなくしか理解できてなくてう〜んという状態だったので、キャッシュ正規化の流れやどういった場面でキャッシュが活用されるのかから知ることができてよかった。
キャッシュを汎用性やデータの大きさで3種類に分類することでスコープを分けてキャッシュを有効活用できるという、なんとなくこうあるべきという形が今の段階で認識できた気がする。
Apollo Clientも触りながらなんとなく使ってる節があるので改めてちゃんと理解しないとな〜という気持ち。
GraphQL Gatewayを実質無料で手に入れる
「マイクロサービス好きですか？」
frontenderに起こりがちなマイクロサービスにしたものの通信複雑になるのはどうすんのよ問題を実質無料(実装コスト)で手に入れるためのお得情報。
GraphQL Gatewayパターンという考え方だと、各マイクロサービスのschemaをいい感じに合体させていい感じにクライアントサイドに返すことができる。
GraphQL Gateway Framework(schema stitchingとかApollo Federation)正直全然触ったことなかったので個人開発でなんかいい感じのマイクロサービスつくりながら触ってみたい気持ちになった。
また、「そのコードは誰がオーナーシップを持つのか？」辺りの話はチーム開発で確かに重要な論点だな〜と感じた。
感想
夏に上京をしてからオフラインで他の企業に行って勉強会に参加すること自体初めてだったけど、どのセッションもめちゃくちゃ勉強になったし、参加者との懇親会でも色々と交流ができて楽しかった〜(お寿司、ピザ美味しすぎて泣いた)。
個人的な反省点としては、他の企業のエンジニアの方に弊社のあれこれについて聞かれた時、「まだチームが変わってそんなに経ってないんですが〜」とか、「最近backendの方が触ってて〜」とか保険かけたマイナスな前置きから曖昧な回答になっちゃいがちだったのがダメだったなーという気持ち。
ただ周囲から学ぶだけでなくお互い良い影響を与えられる存在になれるよう、自分が関わっているプロダクトについては何でも聞いてください！と自信持って言えるくらい完全理解しておかないとなと思った。
書き殴りになりましたが、これにて無事に勉強会を終了です。