TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線

TechFeed フロントエンドフレームワーク界隈記事ランキング！

https://techfeed.io/entries/6628c0581268902fa0f318ad

Angular 最新動向

ほんとに最新の情報を知りたい方は下記コミュニティへ
https://www.youtube.com/channel/UCayXpiOPFQh9MWePLoEFLmg

Signals

アプリケーションをリアクティブに。

• reactivity = 手続き的ではなく宣言的
• 外部ライブラリに依存しない軽量実装
• モバイル向け YouTube Web の全トラフィックに適用

SSR と Hydration

• Destructive Hydration -> Hydration
• ビルド時のプリレンダリング
• Partial Hydration(年内リリース予定): 動的な処理が必要なときに必要なコンポーネントだけ起動

新しい開発者ポータル (beta)

angular.dev

• New Turorials (ブラウザだけで完結)
• Playground
• UX Improvements

Component Authoring

• ブロック構文によるフロー制御
• @defer ブロックによるコンポーネントの遅延読み込み
• デコレータではなく、input()関数による親から子へのデータの受け渡し

Svelte 最新動向

Svelte は HTML のスーパーセットを謳っている。

リアクティビティ

リアクティビティを実現する書き方に変更が加わった。

• ステート管理
• 算出フィールド
• エフェクト関数
  Svelte 5 では依存関係の追跡をランタイムで実施するようになった。

Slot / Snippets

要素を使い回す JSX の利点を取り入れた。

イベントハンドラー

イベントは props と同様に記述できるようになった。
Svelte 4 では各 DOM にイベントをアタッチしていたが、Svelte 5 ではアプリケーションルートにのみイベントをアタッチするようになった。(Event delegation)

その他

Svelte 4 と Svelte 5 の違い
https://component-party.dev/compare/svelte4-vs-svelte5

Vue.js 最新動向

Vue 3.2

script setup の登場

Vue 3.3

3.3 では DX 改善にフォーカス。
Reactivity Transform が非推奨に。

Vue 3.4

3.4 ではパフォーマンス改善にフォーカス
ハイドレーション周りの改善

Vue.js の今後

安定性重視

• リアクティビティシステムの改善
• SSR の改善
  • Suspence
  • Lazy hydration
• Vapor モードの開発 (WIP)

React 最新動向

https://conf.react.dev/

React Server Components (RSC) / Server Actions

ロジックをクライアントとサーバーのそれぞれ適切な箇所で行う。

RSC

• サーバーでしか実行されないコンポーネント
• 新しい API: use, cache (RSC 外でも利用可能)

SA

• サーバーで実行される関数をクライアント側から import して呼び出せる
• 新しい API: useActionState, useOptimistic, requestFormReset

Cleanup Deprecated APIs

• Pass refs as normal props
• String Refs
• defaultProps on Function Components
• Spread keys (Warning)
• ... and more

その他

• Add diffs to Hydration Warnings
• BigInt support
• Document Metadata
  • React Helmet のようなことが React 本体でできるように
• Asset Loading
• React Compiler
  • これまで useMemo, useCallback, memo でやっていた最適化を自動でやってくれる...!