2025年に社内で話題になったフロントエンド技術トピックを振り返る

こんにちは。AI在庫管理のプロダクト開発をしているソフトウェアエンジニアの大村です。

本記事では2025年にカケハシ社内で話題になったフロントエンド関連の技術トピックをピックアップしながら、昨年を振り返っていきます。

主要なライブラリ / フレームワークのアップデート

React 19.2 (2025年10月)

React 19.2がリリースされ、ActivityコンポーネントやuseEffectEventフックなどの便利な機能が追加されました。

Activity

Activityは、コンポーネントの表示・非表示をプロパティによって切り替えられる仕組みです。

これまで、コンポーネントを一時的に隠す場合は条件によってレンダリングを制御するか、CSSで隠すという選択肢がありました。前者の場合はアンマウント時にstateが破棄されるため、再度表示するときに再計算やデータフェッチが必要になることがあり得ます。後者の場合は、stateは保持されますがEffectのクリーンアップが必要なケースに対応できません。

Activityを使うと、非表示時にstateを保持しつつ、Effectをクリーンアップしてくれます。タブの切り替えやサイドバーの開閉など、データフェッチを伴う重いコンポーネントの表示・非表示に活用できそうだと感じました。

従来の方法とActivityを比較すると、以下のようになります。

// 条件付きレンダリング → タブ切り替え時にstateが破棄される
{activeTab === 'dashboard' && <Dashboard />}

// CSSで隠す → stateは保持されるが、Effectがクリーンアップされない
<div style={{ display: activeTab === 'dashboard' ? 'block' : 'none' }}>
  <Dashboard />
</div>

// Activity → stateを保持しつつ、Effectもクリーンアップされる
<Activity mode={activeTab === 'dashboard' ? 'visible' : 'hidden'}>
  <Dashboard />
</Activity>

useEffectEvent

useEffectEventは、Effect内で使う値を依存配列から分離できるフックです。

これまでは値が変わってもuseEffectを再実行したくない場合、その値を依存配列から除外するという回避策がありましたが、これは保守性の観点から好ましくありません。

useEffectEventを使えば、useEffectの再実行トリガーにしたくない値を明示的に分離できます。これにより、意図が伝わりやすいコードが書けるようになります。react-hooks/exhaustive-depsルールに違反しそうになった場合はこのフックを活用しようと思います。

以下は、roomIdの変更時のみ再接続し、themeの変更では再接続しないChatRoomコンポーネントの例です。

function ChatRoom({ roomId, theme }) {
  // themeの変更ではEffectを再実行したくない → useEffectEventで分離
  const onConnected = useEffectEvent(() => {
    showNotification(`${roomId} に接続しました`, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // themeを依存配列に含めなくてよい
}

React Compiler v1.0 リリース (2025年10月)

React Compiler v1.0

React Compilerの安定版が利用可能になりました。 React Compilerはコンパイル時にReactのコンポーネントとフックを自動で最適化する技術で、ほとんどの場合で手動でのuseMemo、useCallbackの記述が不要となります。

開発中のプロダクトにも導入したところ、8割ほどのコンポーネントが自動的にメモ化され、予想以上の効果でした。インストール手順に従っていくだけで簡単に導入できたのも嬉しいポイントでした。

Angular v20 - Signalsの安定化 (2025年5月)

Announcing Angular v20

Angular v20ではSignalsが安定版になりました。Signalsは値の変更を細かく追跡し、変更があった部分だけを効率的に再レンダリングする仕組みです。

同じUIをAngular SignalsとReactで実装した場合の再レンダリングの違いを示します。

// Angular Signals: nameを更新してもageの表示は再レンダリングされない
import { Component, signal } from '@angular/core';

@Component({
  template: `
    <input [value]="name()" (input)="name.set($event.target.value)" />
    <p>Name: {{ name() }}</p>   <!-- nameの変更時、ここだけ更新 -->
    <p>Age: {{ age() }}</p>     <!-- nameが変わってもここは更新されない -->
  `,
})
export class ProfileComponent {
  name = signal('Taro');
  age = signal(25);
}

// React: nameを更新するとコンポーネント全体が再レンダリングされる
function ProfileComponent() {
  const [name, setName] = useState('Taro');
  const [age] = useState(25);

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Name: {name}</p>   {/* nameの変更時、 */}
      <p>Age: {age}</p>     {/* ここも含めて全体が再レンダリング */}
    </>
  );
}

ReactではSignalsのような細粒度リアクティビティは標準ではサポートされておらず、代わりにReact Compilerによる自動最適化でパフォーマンスの課題を解決する方針が取られているようです。

私自身はまだSignalsをプロダクト開発で使ったことはなく、Reactの「状態が変わったらコンポーネントを再レンダリングする」という考え方に慣れ親しんでいます。一方で、SignalsはAngularをはじめとする他のフレームワークにも導入が広がっており、近い将来Signalsのアプローチが主流になる可能性もあるため、今のうちにキャッチアップしておきたいと思いました。

新しいフレームワーク / 開発ツール

TanStack Start v1.0 RC リリース (2025年9月)

TanStack Start

ルーティングライブラリのTanStack Routerをベースとしたフレームワークがリリースされました。

TanStack QueryやTanStack Tableなど、すでにTanStackのライブラリにはお世話になっている場面が多く、そのエコシステム上でフルスタックフレームワークが使えるのは魅力的です。メタフレームワークとしてはNext.jsが大きな影響力を持っている中、新しい選択肢が登場するのは好ましい流れだと感じました。

Remix 3 発表 (2025年10月)

Remix 3 発表まとめ - React を捨て、Web標準で新しい世界へ

Remix 3では、Remix 2から大きく方向転換してReactに依存しないフレームワークになることが発表されて話題となりました。

Build on Web APIs という方針を打ち出しており、Web標準を重視する姿勢を見せています。

以下はRemix 3のルート定義の例で、Web標準のRequest/ResponseAPIのみで構成されています。

// Remix 3: Web標準のRequest/Responseだけでルートを定義
// Reactに依存せず、任意のテンプレートエンジンやUIライブラリを使える
import { type Route } from "remix";

export async function loader({ request }: Route.LoaderArgs) {
  const url = new URL(request.url);             // Web標準のURL API
  const q = url.searchParams.get("q");
  const users = await searchUsers(q);
  return Response.json({ users });              // Web標準のResponse API
}

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();    // Web標準のFormData API
  const name = formData.get("name");
  await createUser({ name });
  return Response.redirect("/users");           // Web標準のリダイレクト
}

実験的なフレームワークであり、業務ですぐに採用する可能性はまだ低いですが、TanStack Startと同様、Next.jsと異なるアプローチが生まれるのは良い流れだと思いました。

Vite+ 発表 (2025年10月)

Vite+ | The Unified Toolchain for the Web

Viteのエコシステムに、formatter、linterなどが加わった統合的な開発ツールが発表されました。

ViteやVitestはフロントエンド開発において急速にシェアを拡大しており、カケハシでも標準的な技術スタックとなっています。社内ではformatter、linterに関してはBiomeを導入していることが多いですが、比較的移行しやすい領域だと考えているので、開発体験が良ければ切り替えてみたいです。

現在は2026年初頭の公開プレビューに向けてEarly Accessプログラムが提供されているということで、公開が楽しみです。

企業の動き

VercelによるNuxtLabsの買収 (2025年7月)

NuxtLabs is joining Vercel

Next.jsの開発元であるVercelが、Nuxtの開発元であるNuxtLabsを買収しました。

VercelはVue/Nuxtのエコシステムまで取り込むことで、プラットフォームとしての存在感がさらに増しています。開発体験の向上が期待できる反面、特定企業にエコシステムが集中しすぎるリスクもあり、今後の動向を注視したいと思います。

React Foundationの設立 (2025年10月)

Introducing the React Foundation - React Blog

Meta社はReactプロジェクトをLinux Foundation傘下の「React Foundation」へ移管しました。

特定企業への依存リスクが解消され、Reactの長期的な安定性が増したと言えます。Reactを業務で使っている身としては、Reactコミュニティやエコシステムの安定性は非常に重要であり、Foundation化は歓迎すべきニュースだと感じました。

AnthropicによるBun買収 (2025年12月)

AnthropicがJavaScriptランタイムのBunを買収 - Publickey

Claude Code開発元のAnthropicがBunを買収しました。

Bunは高速なJavaScriptランタイムなどを含むオールインワンの開発ツールです。社内でも度々話題になっており、テスト実行の高速化のため実験的にBunを導入する動きなども見られました。カケハシではClaude Codeを積極的に活用しているため、今回の買収が中長期的にClaudeのプラットフォームの性能向上につながれば嬉しいです。