フロントエンドチーム 情報共有会【8月号】

matsu

こんにちは！ラクス フロントエンドチームの松浦です！
8月の末です。9月が近づいてます。
夏も終わりが近づいてきて、１ヶ月前より格段に過ごしやすくなりましたね！
早く秋が来てほしいと個人的には思っています😌

今月も各々のチームメンバーが最近気になった記事などを共有する情報共有会の内容を一部抜粋して共有します。
共有された記事とメンバーのコメント付きで紹介していきたいと思います。


フロントエンド開発に役立つ Datadog 活用法

Datadogは使っていないが、GAでログ収集を行なっているため、参考にした。

コメント

  • GAでやるのは辛そう…。他に良いツールが出てくるといいのですが。

個人的な感想

Datadogに関しては概要くらいしか知らなかったのですが、これほど簡単にログを収集できるのはすごいですね！
実際使ってみてどうだったのかってことも書かれてあり非常に勉強になります。
Slackとの連携も簡単そうで、いいところばっかり！


意味のタグ付けする Branded Typeで型の一意性を守る

コメント

  • ブランド型は興味本位で調べたことがあったがあんまり使うケースがない？型チェックだけに使うのにプロパティ生やさないといけないのが微妙な気もする。

個人的な感想

確かにタイプ名が違ったのものでもプロパティが同じ場合、同じものとして扱われてしまうのは少しだけ厄介だなと思います。
それをbranded typeで防ぎ、コードの信頼性を向上させるのはいいですね！
ただ、branded typeを毎回定義しないといけないのが少しだけネックかなと思いました。


コンポーネントのデザインパターンについて

コメント

  • Atomic DesignとPresentational - Container Patternの併用をしている。

  • Atomic Designは自分には難しいと思った。

個人的な感想

この記事にも書かれてありましたが、やはりAtomic Designにおけるコンポーネントの分類に困っている人が僕たちだけじゃないんだと再確認できました。
Reactでは、モジュールの一貫性や再利用性の向上は重要であり、Tree Designはかなり有用なデザインパターンだと思いました。
実際のプロジェクトでこのアイデアを試してみたいですね。


State of React 2023が公開されました

コメント

  • Vueも周回遅れでReactの一部追従するイメージはあるので、参考になりました。

  • Reactでもviteを使っているのは嬉しい。共通で話せるため。

個人的な感想

世界中のReactユーザーが特定の機能をどのくらい使っているのか、使っていないのか、使っている人は満足しているのか。
具体的なデータを観れるのが非常にありがたいですね。
特に、ユーザーがどのReactの機能に悩みを持っているのかを知れたのがよかったです。


HTMLのコンテンツモデルが覚えられない

コメント

  • 自分も覚えられません。devtoolでwarningが出たら調べるくらいです。

  • ある程度使うものも限られてくるため、実装時に確認して対応していけばよさそう。 正しいマークアップでないことが問題になるケースもあるので留意はした方がよさそう。

個人的な感想

僕も完璧には覚えられていません。
しかしながら、コメントにもある通り1つのプロダクトで使われているタグは40-50個程度なので実装時に対応していけば問題はないのかなという印象は受けました。


useLayoutEffectは使っていますか？

コメント

  • ちらつき防止で仕方なく使っていたりします。

  • 基本使わない方針で、苦肉の策で使っている。

  • React採用商材も多数あるのでどう使うとかノウハウ集まっているといいのかも。

個人的な感想

useLayoutEffectを使ったことは数回ありますが、記事にも書いてある通り、全てDOM操作のためのものだった記憶があります。
また、そのDOM操作自体も軽微なものが多く、描画に影響が出るほどのものではありませんでした。
しかし、useLayoutEffectが同期的に動くということを忘れないようにしておきたいですね。いつか描画に影響が出るほどのものを実装しないためにも。


Pull Requestをレビューする時にやっていること

コメント

  • レビュワーの責務・レビュー観点について定義しているかどうか、でも異なってきそう。  PRからVSCode起動できるの初知りでした！

  • descriptionを見た後にdiffを想像するというのは目から鱗だった。

個人的な感想

PRの見方的な記事ってあまり読んだことがなかったので、非常に勉強になりました。
僕は普段PRを見るときはすぐにdiffを見ちゃうのですが、特に難しい実装のコードだと「実装者はあの人だし大丈夫だろ。」などの変なバイアスがかかってしまい問題ないんじゃないかと思ってしまうことがあるのでぜひ、この記事を参考にしたいと思いました。


React/Remixへの依存を最小にするフロントエンド設計

コメント

  • 前回のremix移行といい、パワーがすごい。

  • ライブラリに依存しない設計を考えるのがすごい

  • 大変そうではあるが、将来を見据えて僕たちもこれくらいやるべき？今後に注目

個人的な感想

多くのフロントエンド開発で悩んでいるメジャーバージョンアップによる破壊的変更やエコシステムの追従について、その解決策として「依存の最小化」を挙げてくれている記事でした。
具体的にどのように依存を最小化していくのかも書かれていて、今後の参考にしたいと思いました。


Why does Object.keys return string[]?

コメント

  • プロパティが多い分には問題になりにくい、各自で気をつける意識は持ちたいと思った

  • Object怖い。気をつけなければいけないなと改めて感じた。

個人的な感想

実務で直面しやすいObject.keysの型の問題に対する解決策を提案してくれていました。
Object.keysの戻り値がstring[]であることに違和感を持つ開発者は多いと思います。
Branded Typeの方でも書いてありましたが、Object型の安全性を確保するためには自身でユニークな型を定義したり、今回のような型アサーションを使うのがいいですね。
勉強になります。

終わりに

情報共有会でメンバーが紹介してくれたものを抜粋して貼らせていただきました。
今月も非常に面白い記事ばかりでした。
皆さんの最近の興味に合った記事はありましたか？
一つでも興味を持ってくださった記事があれば幸いです。
最後まで読んでいただいてありがとうございました！！
よろしければ、「スキ」お願いします！

採用情報

https://career-recruit.rakus.co.jp/engineer_jobs/frontend_tokyo/

https://career-recruit.rakus.co.jp/career_engineer/

イベント情報

https://rakus.connpass.com/

いいなと思ったら応援しよう！