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

こんにちは！ラクス フロントエンドチームの松浦です！
7月になりました！
すっかり夏になってしまいました。
毎日、暑くて暑くてたまらないです。みなさんはバテてないですか…？🥵
しっかり水分補給をしながら、夏を乗り越えましょう！

今月からタイトルが変わりました！
今まではチームLT会の内容を抜粋して共有させていただいていたのですが、かくかくしかじか、色々とありまして各々のチームメンバーが最近気になった記事などを共有する情報共有会という形になりました。
なぜ変わったかなどの事情はいつかお話できたらなと思っています。
ということで初めての情報共有会で共有された記事などをメンバーのコメント付きで紹介していきたいと思います。
※ それぞれのタイトルにリンクを貼り付けています

君の目標はSMARTか ーSMARTの法則をおさらいする会ー

第7回　良い目標は「SMARTな目標」～適切な目標設定が確実な成果を生む～｜WEB労政時報

ラクスではKGI/KPI設定する際に、SMARTに当てはまることが推奨されているそう。知っておいて損はないぞ

コメント
・定性癖直します。
・具体例があってわかりやすい！

個人的な感想
SMARTに則った目標決めって、意外と簡単なように見えていつも難しいなと感じます。 「達成可能であること」や「期限が明確であること」という観点においてはハッキリと決められるのですが、その他の3つを意識して目標を立てられていないことが多いです…。 しっかりと成果を重視して、手段と目的が逆転しないようにしていきたいです。

Figma AIにワクワクしたい

【Config2024】ついにFigmaにAIが搭載されたらしいので情報を全部まとめた。 - Qiita

コメント
・スライド作成は便利そう！無料だったらな〜

個人的な感想
プロンプトからUIを作成してくれるのは本当にワクワクしますね！
デザインセンス皆無の僕でも綺麗なUIを作れるのかな？
他にも色々とAIによる機能が紹介されていますが、個人的に嬉しいなと思ったのは「画像から該当するフレームを検索してくれる機能」です。
大きな製品になってくるとフレームが見つからなかったりするので、これは実際に使いたいです。

状態管理はどのように変わるのか

React 19によって状態管理はどのように変わるのか

コメント
・学習コストが減るのはいいですね。
・研修が終わる頃には理解できるようになります。

個人的な感想
React19で新たに出てくるhooksによって、どのように現状の状態管理が変わってくるのかをわかりやすく伝えてくださってる記事でした。
記事内でも書いてある通り、すぐにはReactQueryやその他のライブラリを完全に切り離すことはできなくても徐々にReact単体で非同期状態管理やフォーム管理をできる未来が近いことは感じられました。
まずは、React19に向けてどこから手をつけていくかの道筋を立てていくことから始めていきたいですね。

SSR,CSR,SSG,PPRの整理

SSR, CSR, SSG, PPR の整理

コメント
・PPR、名前だけ知っていたが中身や仕組みをよくわかっていなかった
・ISRは以前読んだ本で知っていたが、PPRとの違いがわからなかった

個人的な感想
多くの人が悩むSSR, CSR, SSGの違いについて図でまとめてくださっててとてもわかりやすかったです。
PPRは僕も初めて知りました。
PPRとは共通的な部分をSSGで返し、プライベート情報が入ってるところをSSRで返す仕組みと理解しました。
どんどんユーザに早く、快適にサービスを提供できる仕組みが生まれてきてるのは喜ばしいことですね。
実装が複雑になりすぎないかは少し心配です。

HTML Tags Memory Test

https://codepen.io/plfstr/full/zYqQeRw

知らないタグをおさらいする良い機会になりました。
ちなみに50個しかわかりませんでした

コメント
・10分だと30個くらいが限界でした。
・パッと出てこないのが多かった

個人的な感想
フロントエンドエンジニアなら触れる機会の多いHTMLタグ。
普段、実装しているページはおそらく40〜50程度のタグで作られていると思うのですが、頭の中をフル回転させて思い出せるものは30個程度でした…。
悔しいです…。
なお、HTMLタグは全部で100個以上あります。

React v19 新Hooksと新APIについて

React 19 Betaリリース！新HooksとAPIの機能紹介とサンプルコードで学ぶ使い方 - Qiita

コメント
・自分が携わっている製品に使いたいけど、他の製品ではTanStack Queryを使っているから、どっちに寄せるか悩む
・useは便利。useTransitionやuseActionStateとかも積極的に使っていきたい

個人的な感想
先ほどの記事でも出てきたReact19の新API。
僕としても積極的にuseは使っていきたい所存です。しかしながら先ほどの記事でも書いていた通り、まだPromiseのキャッシュ機構が用意されていないみたいなのでTanStack Queryを手放すのはもう少し先になりそうですね。

Node.js v20で出来ること

10 modern Node.js runtime features to start using in 2024 | Snyk

コメント
・v20で標準のテストランナーが導入されていたのは初耳だった

個人的な感想
10個の機能が紹介されており、どれもとても魅力的だったのですが、特にテスト関連が魅力的でした。  
普段はJestまたはVitestを使っているのですが、これからはNode.js test runnerに移行していけたら嬉しいなと思いました。
また、面白いなと思ったのはPermissionsModelです。
Denoでは前からありましたが、Nodeにも提供されるみたいです。
アプリケーションのアクセスできるリソースを制限をすることでより安全で信頼性の高い開発ができるのは嬉しいですね。

React hooksとCompositionAPIの比較について

React HooksとVue Composition APIの比較

コメント
・Vue3はdefineModelsがあるので少し触ってみたい感あります
・Nuxt含めて、久しぶりに触ってみたいと思った

個人的な感想
Vueに関してはほとんど素人だったので非常に勉強になりました。
React hooksは値をイミュータブルに扱うからこそ、自分たちでメモ化を図ったりしないといけなかったですが、CompositionAPIは値をミュータブルに扱われているため依存関係などを気にすることなく最適化が図られるという認識であっていますかね…。
Reactにおけるレンダリングの最適化に悩まされることは非常に多いので、VueのConpositionAPIはものすごく便利に感じてしまいます。

TypeScriptのオーバーロード関数

オーバーロード関数 (overload function) | TypeScript入門『サバイバルTypeScript』

コメント
・書いたことはないけど、ライブラリを読んだ時に出てきて調べて知った気がする
・TypeScriptは浅い知識なのでなんとなくの理解ですが使い所をうまくできれば有用そうですね。
・せめて引数と返り値の方がセットだったら…

個人的な感想
オーバーロード関数をTypeScriptで書く方法があるなんて知りませんでした。
柔軟に型の定義ができるな〜とは思いましたが、それなら書いてある通りにユニオン型などで対応すればいいよなとなりました。
どのような場面で役に立つのかが気になります…。

ChatGPTの使いこなしについて

エンジニアにも知って欲しいChatGPT基本テクニック - Qiita

コメント
・チャットでパラメータを指定できるの便利ですね
・一度プロンプト決めないと、普通に会話しがち（ぐぐる代替になりがち）
・あのUIからプロンプト渡せるの知らなかった

個人的な感想
コメント同様にチャットから変数を挿入できたり、パラメータを設定できたりするのは知らなかったです。
ChatGPTは普通に対話する分にも十分に優秀ですが、プロンプトを一度設定して各々にとって最適な形で返してくれるようになれば生産性がどんどん上がりそうですね！

Vue Vapor Mode

【脱仮想 DOM !?】Vue.js が控えている進化 "Vapor Mode" の詳細 (2023/12)

• Solid.js から着想を得た新しい代替コンパイル戦略

• Solid.jsとVue.jsはProxyを利用したリアクティビティシステムで一緒なので、同じコンパイル戦略をとれる。

• 仮想 DOM による更新では、再レンダリングするのはピンポイントかもしれないけど、更新箇所を探すのにすべてのツリーを比較する必要があるので、オーバーヘッドが発生している

• Vue2 → Vue3の失敗があるので、とにかく段階的に、少しずつ、互換性を保ちながら安定した移行を目指している。

• 従来の比較はVNodeという仮想DOMNodeの単位。VaporモードではBlockという概念で、基本の単位が所謂DOM、つまりそのままDOM操作をするイメージ。

• 既存のSFCをパースしたASTをさらにVapor IRへ変換し DOM を更新できるような JavaScript コードを出力する。

• これが破壊的変更をせず、既存の実装のままVaporモードの恩恵を受けることのできる仕組み。

コメント
・破壊的変更はないから、移行のメリットは大きそう

個人的な感想
脱仮想DOMって大胆ですね。
ですが、確かに仮想DOMはバンドルサイズが大きいという話を聞いたこともあるのでそこを削減する意図もあるのかなと思いました。
Svelteも同じ仕組みだったなーと思い出しました。
Vapor Modeは開発中ですが、簡単に試せる環境もあるので気になる人はぜひお試しを！

終わりに

情報共有会でメンバーが紹介してくれたものを抜粋して貼らせていただきました。
フロントエンド関連に寄るとは思っていましたが、いろいろなベクトルから記事を出してくれているのでまとめている僕としても読んでいて非常に楽しかったです。
また来月もこのような形でまとめる予定なので、お楽しみにしていただけると嬉しいです！

最後まで読んでいただいてありがとうございました！！
よろしければ、「スキ」お願いします！

採用情報

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

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

イベント情報

https://rakus.connpass.com/