はじめに
みなさんこんにちは、フロントエンドチーム「雅」の山西です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。
今回は、React 19 Beta、React Native0.74、React Conf 2024開催など、大きな話題がいくつもありました。
前回の記事
![Fusicフロントエンド座談会 from 雅 2024/04/18](https://tech.fusic.co.jp/og/posts/frontend-discussion-from-miyabi-2024-04-23.png)
議事録
React 19 Beta
![React 19 RC – React](https://react.dev/images/og-blog.png)
React 19のベータについてアナウンスされました。
目玉アップデートは下記です。
useActionState
/useFormStatus
/useOptimistic
でフォーム処理が書きやすくなるuse
でSuspenseと組み合わせてfetch処理が書きやすくなる- RSC / Server Actions
- ref propでforwardRefを書かなくて良くなった
<Context.Provider>
→<Context>
- refsのクリーンアップ関数
- react-helmetみたいな機能
- stylesheet、async scriptサポート
- リソースのpreloading
React Conf 2024
先日、React Conf 2024が実施されました。
弊社チーム内では、下記のトピックが話題になりました。
![React Compiler – React](https://react.dev/images/og-learn.png)
↑React Compilerが、オープンソース化されましたね。
↑今後は、React Routerを使う必要があるようです。大きめの変更なので、Remixで開発を行っている場合、対応が大変そうですね。
↑Rsbuildで、React Compilerが利用できるようです。
↑Next.jsでReact Compilerが利用できるようになるみたいです。
![React Native · Learn once, write anywhere](https://reactnative.dev/img/logo-og.png)
↑reactnative.devのデザインが一新されて、とても見やすくなってて良いですね。
↑React Conf Appがオーブンソースになってます。React Compilerの利用例としても、とても参考になります。
React 19の勉強会あるよ
![うひょさんに聞く!React 19アップデートの勘所 (2024/05/29 12:00〜)](https://media.connpass.com/thumbs/40/4a/404a29df3ac2f0c3e67d811bc1f5e4e1.png)
既に、参加予定者が700人を超えている模様です。
React 19への注目度の高さが伺えますね。
React Native 0.74公開
![React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more · React Native](https://reactnative.dev/img/logo-og.png)
主な変更点は下記のようです。
- Android5のサポートが切れる
- Flipper React Native 非推奨
- Yoga 3が利用できるようになり、スタイルが描きやすくなった
- PropTypesが非推奨
- ブリッジレスがデフォルトになった
zod 3.23
下記の変更点が目玉そうです。
- string型でdate、timeをチェックできるようになった
- これが、v3最後のリリースとのこと
string型で、date系がチェックできるようになったのはとても便利そうですね!
Node.js 22がリリース
![Node.js 22がリリース | gihyo.jp](https://gihyo.jp/assets/images/ICON/2024/2267_node_js-22.png)
Node.js 22がリリースされました。
下記の変更点が気になりますね!
- v8が12.4にアップデート
- ESMグラフの
require()
サポート - package.json スクリプトの実行が実験的に実施できる
EAS Build Workflows
![Orchestrate advanced workflows with custom builds](https://cdn.sanity.io/images/siias52v/production/622c552d9fab5bf5e03c4378b96da0c9077b1db0-1200x675.png?rect=1,0,1198,675&w=600&h=338&fm=webp&q=80&auto=format)
並列でジョブを動かせるようになったようです。
Next.jsにて、SSRFの脆弱性
![Next.jsのSSRF脆弱性 CVE-2024-34351](https://res.cloudinary.com/zenn/image/upload/s--6JbVyl8i--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Next.js%25E3%2581%25AESSRF%25E8%2584%2586%25E5%25BC%25B1%25E6%2580%25A7%2520CVE-2024-34351%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png)
SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です
アップデートを実施する必要があります。
TSKaigi 2024 スライドまとめ
![TSKaigi 2024 スライドまとめ【非公式】](https://storage.googleapis.com/zenn-user-upload/avatar/695391d011.jpeg)
TSKaigi 2024が先日行われました。
とても興味深いセッションが多かったので、スライドをまとめていただいてとても助かりますね。
Hono Conference 2024開催
![Hono Conference 2024 - Our first step (2024/06/22 13:00〜)](https://media.connpass.com/thumbs/23/98/23983da9ef2df30cfe8fb38899543167.png)
Hono Conferenceが、オフラインで開催されるようです。
是非、現地に足を運びたいですね。
ラクスさんのフロントエンドチームでやってるLT会とても良さそう
![フロントエンドチーム LT会【4月号】|matsu](https://assets.st-note.com/production/uploads/images/138456368/rectangle_large_type_2_add65b2dbb1a8057792942b9cf1b17f1.png?fit=bounds&quality=85&width=1280)
ラクスさんのフロントエンドチームが社内でLT会を実施していて、とても良さそうです。弊社チームでの実施してみたいと話題になりました。
AI Shift さん フロントエンドトーク会について
![AI Shift フロントエンドトーク 2024-04](https://res.cloudinary.com/zenn/image/upload/s--ftRAafl8--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:AI%2520Shift%2520%25E3%2583%2595%25E3%2583%25AD%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25A8%25E3%2583%25B3%25E3%2583%2589%25E3%2583%2588%25E3%2583%25BC%25E3%2582%25AF%25202024-04%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_34:kult%2Cx_220%2Cy_108/bo_3px_solid_rgb:d6e3ed%2Cg_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhhNDQwNmNlMGUuanBlZw==%2Cr_20%2Cw_90%2Cx_92%2Cy_102/co_rgb:6e7b85%2Cg_south_west%2Cl_text:notosansjp-medium.otf_30:AI%2520Shift%2520Tech%2520Blog%2Cx_220%2Cy_160/bo_4px_solid_white%2Cg_south_west%2Ch_50%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhkZmY1MjcxNzUuanBlZw==%2Cr_max%2Cw_50%2Cx_139%2Cy_84/v1627283836/default/og-base-w1200-v2.png)
弊社のこの座談会と似た取り組みをしているみたいです。
移り変わりの早いフロントエンド業界において、チームでの技術情報のキャッチアップはとても効果が高い取り組みだと思うので、弊社でも継続してやっていきたいです!
2024 Canaryアプリの技術スタック
CANARYアプリの技術スタックがわかりやすく説明されている記事です。
Magic PodというGUIでテスト周りを充実させれるツールを利用しているようで、とても便利そうです。
Findy転職のフロントエンドの生産性向上について
![Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog](https://cdn-ak.f.st-hatena.com/images/fotolife/p/puku0x/20240426/20240426102110.png)
フロントエンドチームの生産性を見える化して、改善したという取り組みがとても興味深い内容でした。
生産性の見える化をすることで、開発作業の課題が見えてくるので、是非取り入れていきたいですね。