Fusicフロントエンド座談会 from 雅 2024/05/22

はじめに

みなさんこんにちは、フロントエンドチーム「雅」の山西です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。

今回は、React 19 Beta、React Native0.74、React Conf 2024開催など、大きな話題がいくつもありました。

前回の記事

Fusicフロントエンド座談会 from 雅 2024/04/18

Fusicフロントエンドチームで気になった記事や技術情報を共有、ちょっとだけ深ぼりして話す会「Fusicフロントエンド座談会」の議事録です。 チーム雅が普段どんなことを話しているかやどんな技術に興味を持っているのか知ってもらえたら幸いです。

tech.fusic.co.jp

議事録

React 19 Beta

React v19 – React

The library for web and native user interfaces

react.dev

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

The library for web and native user interfaces

react.dev

↑React Compilerが、オープンソース化されましたね。

Merging Remix and React Router

We've been building a bridge from React Router to Remix, and we made it so good that we're going to merge the two projects.

remix.run

↑今後は、React Routerを使う必要があるようです。大きめの変更なので、Remixで開発を行っている場合、対応が大変そうですね。

x.com

x.com

↑Rsbuildで、React Compilerが利用できるようです。

x.com

twitter.com

↑Next.jsでReact Compilerが利用できるようになるみたいです。

React Native · Learn once, write anywhere

A framework for building native apps using React

reactnative.dev

↑reactnative.devのデザインが一新されて、とても見やすくなってて良いですね。

GitHub - expo/react-conf-app

Contribute to expo/react-conf-app development by creating an account on GitHub.

github.com

↑React Conf Appがオーブンソースになってます。React Compilerの利用例としても、とても参考になります。

React 19の勉強会あるよ

うひょさんに聞く！React 19アップデートの勘所 (2024/05/29 12:00〜)

## 🎥 アーカイブ動画 アーカイブ動画はこちらから # ✍️概要 2023年4月にReact 19 Betaがリリースされ、アクションの導入やuseOptimisticなどの新しいフック、use APIによるリソースの読み込みなど、多くの新機能や改良が加えられました。 本イベントでは、第一人者である、うひょさんをお招きし、React 19の新機能やアップグレード時の注意点などについて解説していただきます。 最新のReactの動向を知り、正式リリースに備えて明日からの開発に活かせる知見を得られるイベントを目指します。 ### うひょさんに聞いてみたいことを、お申込み時...

findy.connpass.com

既に、参加予定者が700人を超えている模様です。

React 19への注目度の高さが伺えますね。

React Native 0.74公開

React Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more · React Native

Today we're releasing React Native 0.74! This release adds Yoga 3.0, Bridgeless by default under the New Architecture, batched onLayout updates (New Architecture), and Yarn 3 as the default package manager for new projects.

reactnative.dev

主な変更点は下記のようです。

• Android5のサポートが切れる
• Flipper React Native 非推奨
• Yoga ３が利用できるようになり、スタイルが描きやすくなった
• PropTypesが非推奨
• ブリッジレスがデフォルトになった

zod 3.23

Release v3.23.0 · colinhacks/zod

Zod 3.23 is now available. This is the final 3.x release before Zod 4.0. To try it out: npm install zod Features z.string().date() Zod can now validate ISO 8601 date strings. Thanks @igalklebanov! ...

github.com

下記の変更点が目玉そうです。

• string型でdate、timeをチェックできるようになった
• これが、v3最後のリリースとのこと

string型で、date系がチェックできるようになったのはとても便利そうですね！

Node.js 22がリリース

Node.js 22がリリース | gihyo.jp

OpenJS Foundationは2024年4月25日、Node.jsの新バージョン「Node.js 22」をリリースした。

gihyo.jp

Node.js 22がリリースされました。

下記の変更点が気になりますね！

• v8が12.4にアップデート
• ESMグラフのrequire()サポート
• package.json スクリプトの実行が実験的に実施できる

EAS Build Workflows

Orchestrate advanced workflows with custom builds

Custom builds are the most convenient way to orchestrate advanced workflows before or after a build. This blog explains how and when to use custom builds.

expo.dev

並列でジョブを動かせるようになったようです。

Next.jsにて、SSRFの脆弱性

Next.jsのSSRF脆弱性 CVE-2024-34351

zenn.dev

SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です

アップデートを実施する必要があります。

TSKaigi 2024 スライドまとめ

TSKaigi 2024 スライドまとめ【非公式】

zenn.dev

TSKaigi 2024が先日行われました。

とても興味深いセッションが多かったので、スライドをまとめていただいてとても助かりますね。

Hono Conference 2024開催

Hono Conference 2024 - Our first step (2024/06/22 13:00〜)

# Introduction Webフレームワーク「Hono」をテーマにした初めてのカンファレンスです。Honoコントリビュータ、ユーザーによるトーク。また座談会もあります。 * * * This is the first conference for the Web framework "Hono" by Hono contributors and users. The talks and discussions are mainly in Japanese (all slides are in English) and held in Japan. But it's not j...

hono.connpass.com

Hono Conferenceが、オフラインで開催されるようです。

是非、現地に足を運びたいですね。

ラクスさんのフロントエンドチームでやってるLT会とても良さそう

フロントエンドチーム LT会【４月号】｜matsu

こんにちは！ラクス フロントエンドチームの松浦です！ 今年も春がやってきましたね。 桜満開！と思っていたらいつの間にか緑の葉っぱになってました…。 少し悲しかったです。 フロントエンド開発課で定期的に開催されるチームLT会の4月分をまとめたものを共有させていただきます。 今月はイベントが色々とあり共有会が1度しか開催されなかったのでちょっと短めです…。すみません。 ラクス フロントエンドチームでは、チームのコミュニケーション活性化を目的とした、チームLT会を開催しています。（会の目的や、効果についてはこちらの記事にまとめています。ぜひ、ご覧ください！） チームLT会で発信した情報

note.com

ラクスさんのフロントエンドチームが社内でLT会を実施していて、とても良さそうです。弊社チームでの実施してみたいと話題になりました。

AI Shift さん フロントエンドトーク会について

AI Shift フロントエンドトーク 2024-04

zenn.dev

弊社のこの座談会と似た取り組みをしているみたいです。

移り変わりの早いフロントエンド業界において、チームでの技術情報のキャッチアップはとても効果が高い取り組みだと思うので、弊社でも継続してやっていきたいです！

2024 Canaryアプリの技術スタック

https://zenn.dev/canary_techblog/articles/0cd332e5ae011

zenn.dev

CANARYアプリの技術スタックがわかりやすく説明されている記事です。

Magic PodというGUIでテスト周りを充実させれるツールを利用しているようで、とても便利そうです。

Findy転職のフロントエンドの生産性向上について

Findy転職フロントエンドの開発生産性を向上させるためにやったこと - Findy Tech Blog

こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、転職サービス Findy の開発チームにおける開発生産性の向上に対する取り組みをご紹介します。 以前の状況 モノリスの解体 開発基盤の刷新 コンポーネント設計の刷新 テストの拡充 CI の高速化 改善の効果 まとめ 以前の状況 2020年頃の Findy は Ruby on Rails と React のモノリス構成で作られていました。 機能の増加に従いコードが複雑化し、しだいに開発スピードが伸び悩むようになりました。 ここで Findy Team+ で算出した当時のリードタイム…

tech.findy.co.jp

フロントエンドチームの生産性を見える化して、改善したという取り組みがとても興味深い内容でした。

生産性の見える化をすることで、開発作業の課題が見えてくるので、是非取り入れていきたいですね。