Top View


Author Daiki Urata

Fusicフロントエンド座談会 2024/10/09

2024/10/15

はじめに

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

今回は、Reactに関しての話題が多かったのと、Deno 2.0が出たのも話題になりましたね。

前回の記事

React

One, a React Framework

ViteベースのWeb、モバイル、サーバーサイドのアプリが作れるユニバーサルフレームワークのOneが発表されました。

ユニバーサルフレームワークといえばExpoが有名ですが、Expoの場合はMetroベースでOneはViteベースになります。

Web(React)とモバイル(React Native)で動くUIライブラリのTamaguiチームが作成したフレームワークのようで、Webとモバイルアプリの開発が1つのフレームワークで済む世界が来るのか今後に期待です。

Pages_Router × EmotionからApp×Router × Vanilla-extractへの移行

Next.jsのPages_Router × Emotion構成からApp×Router × Vanilla-extractへ移行したリアーキテクチャに関するスライドになります。 Emotionのコードとvanilla-extractのコードを比較しているところがあり、書き方がEmotionと似ているところもあるようでした。 vanilla-extractの欲しい機能として未使用スタイルの検出機能があげられていて、確かにあったら便利だなと思いました。

ラクス_FE_TechCafe 〜Reactでのプロダクト開発を語る〜 アフタートーク

こちらは7月に開催された「フロントエンドTechCafe〜Reactでのプロダクト開発を語る〜」という勉強会のアフタートーク記事になります。

フロントエンドとバックエンドで分業体制のため、基本的にポリレポで開発しているとのことでした。

弊社でも大規模な開発では同様に分業体制 + ポリレポなので似ている部分はあるのかなと感じました。

その他にも状態管理ライブラリやReact 19、CSS-in-JSの話などラクスさんの内部事情について知ることができるとても興味深い記事でした。

Server ActionsがServer Functionsにリネーム

React 19からServer Actionsという名前がServer Functionsへ名前が変更されました。

公式ドキュメントの方でも確かに変更されてるのが確認できました。

formタグのaction属性やuseActionStateへ渡す関数を引き続きServer Actionsと呼び、Server Actionsを含めたクライアントコンポーネントから呼ぶサーバー上で実行される関数の総称としてServer Functionsと呼ぶことになるようです。

ランタイム

Deno 2リリース

Deno 2.0がリリースされました。

npmサポートやパッケージマネージャが組み込まれたりなどNode.jsとの互換性を保ちつつ、TypeScriptサポートや安全性、開発者体験の向上など、Denoの特徴を活かしたアップグレードとなりました。

このアップデートでDenoを採用し始める方ももしかしたら出てくるのではないでしょうか?

モバイル

Tauri 2.0 Stable Release

iOSとAndroidアプリが作れるようになったTauri 2.0がStableになりました。 モバイルのクロスプラットフォームフレームワークといえばFlutterとReact Nativeの2強だと思いますが、そこに第3の選択肢となるのでしょうか、今後に期待です。

その他

便利なJavaScriptライブラリが登場! CSSのプロパティの値の変更を検出できる -CSSStyleObserver

CSSのプロパティ値の変更を検出するライブラリ「@bramus/style-observer」の紹介記事です。

正直このツールの活用方法が思いつかなかった(Chrome拡張だと便利?)ですが、仕組みがとても興味深かったです。

今年の8月から全てのブラウザで使えるようになったtransition-behaviorを利用して離散的なプロパティ(displayなど)の要素に対してもtransition-behavior: allow-discrete;を付与することでCSS Transitionを有効にさせ、transition-durationを0.001msというすごく短いアニメーションを設定し、transitionstartイベントのリスナーで捕捉できるようにして実現しています。

transition-behaviorはアニメーション以外にもこういう使い方ができるんだなと勉強になりました。

Evan You氏がVoidZero設立

VueやViteの作者で知られるEvan You氏がJavaScriptの開発ツール群の統一を目指した会社VoidZero Inc.を設立したと発表されました。

同じくJavaScriptの開発ツール統一化を目指していたRomeが実現できなかった事をVoidZeroが実現できるか今後に期待です。

イベント

何が変わる?akfmさん、Quramyさんに聞く Next.js v15アップデート解説

Next.js v15アップデートの解説についての勉強会でした。 v14からv15でなにが変わるのかについてのお話があり、v14では様々な種類のキャッシュがあり初学者には辛かったという話から、v15になりそれが改善されるという話がありました。

v15からはPPRという概念が出てきてキャッシュを使わなくてもパフォーマンスが良くなりキャッシュに悩まされることが少なくなるとのことでしたので、期待です。

Daiki Urata

Daiki Urata

Twitter X

フロントエンド/モバイルアプリなどを主に開発しています。