2026年のJavaScriptについて知っておくべきこと

2026年のJavaScriptについて知っておくべきこと

私たちは以前にもCSSに関する同様の記事を書きましたが、JavaScriptも同様に注目に値します！特にJavaScriptはバージョン管理をよりうまく行えるようになっています。言語自体の新機能に加え、JavaScriptの実践にはランタイム、フレームワーク、ライブラリ、ツールなども含まれます。早速見ていきましょう。おそらくもうスクロールダウンしていることでしょう。

言語の新機能

JavaScriptは年次リリースを行っており、これは非常に良いアプローチだと思います！

ECMAScript 2025

最新のバージョンはECMAScript 2025で、2025年6月にリリースされました。このバージョンの仕様全体はこちらで確認できます。

Iterator Helpers

イテレータに.map(), .filter(), .take(), .drop()のようなメソッドが直接追加され、遅延評価が可能になりました。フロントエンド中心の開発者である私にとっては、少し難解に感じます。配列のmapは既に使えますが、何がそんなにすごいのでしょうか？しかし、パフォーマンスの側面は理解できます。

const result = array
  .map(x => x * 2)      // メモリ上に新しい配列を作成
  .filter(x => x > 10)  // ...再度作成
  .slice(0, 3);         // ...再度作成

これは特に配列が非常に大きく、処理が「重い」場合、「遅く」「メモリを大量に消費する」ことになります。新しい洗練された方法は以下のようになります。

const result = Iterator.from(array)
  .map(x => x * 2)
  .filter(x => x > 10)
  .take(3)
  .toArray(); // 新しい配列は作成されず、3つで計算が停止

さらに良い点として、Iterator.from()はイテラブルなものであれば何にでも機能します。配列だけでなく、Set、Map、ジェネレータなどにも適用できるため、これらすべてに同じ便利な関数セットを使用できます。

Set Methods

JavaScriptのSetは、各要素が一意であることが保証された配列のようなもので、かなり便利です。これは新しいことではありませんが、2つのSetがある場合、それらの共通部分や差分などを返すメソッドが利用できるようになりました。

const youKnow  = new Set(["JS", "Python", "CSS", "SQL"]);
const jobNeeds  = new Set(["JS", "TypeScript", "Python"]);

// 仕事で必要とされるスキルで、あなたが既に持っているもの
youKnow.intersection(jobNeeds); // → Set {"JS", "Python"}

// 全てのスキルを結合 — あなたのフルスタック + 仕事のニーズ
youKnow.union(jobNeeds); // → Set {"JS", "Python", "CSS", "SQL", "TypeScript"}

// 仕事で必要とされるスキルで、あなたが持っていないもの（スキルギャップ）
jobNeeds.difference(youKnow); // → Set {"TypeScript"}

// 仕事では必要とされない、あなたが持っているスキル
youKnow.difference(jobNeeds); // → Set {"CSS", "SQL"}

// どちらか一方のセットにのみ存在するスキル
youKnow.symmetricDifference(jobNeeds); // → Set {"CSS", "SQL", "TypeScript"}

// 仕事の要件はすべて、あなたが知っていることの部分集合か？
jobNeeds.isSubsetOf(youKnow); // → false

// あなたは全てのスキルを持っており、さらにそれ以上か？
youKnow.isSupersetOf(jobNeeds); // → false

// あなたと仕事の間に全く共通点はないか？
youKnow.isDisjointFrom(jobNeeds); // → false

非常に便利だと思います。Claude Codeはインタラクティブなデモの作成を楽しみました。

RegEx Updates

状況を説明しましょう。ユーザーが検索語を入力するページ内検索機能を構築しているとします。これを正規表現検索として実装したいとします。ユーザーが入力する一部の文字は正規表現の「特殊」文字であるため、危険が伴います。例えば、$は文字列の末尾にマッチしますが、ユーザーが$9と検索した場合、正規表現にそのまま渡すと問題が発生します。修正のためにエスケープする必要がある文字は、使用している正規表現の実装に依存します。

そこで！15年間の道のりを経て、RegExp.escape()が登場しました。

const query = userInput; // 例: "$5.00 (off!)"

// ❌ BEFORE — 正規表現の特殊文字があると壊れる
const badRe  = new RegExp(query, "g");

// ✅ ES2025 — 1つのメソッドで問題解決
const goodRe = new RegExp(RegExp.escape(query), "g");

ここでも、Claude Codeが素晴らしいデモを作成しました。

また、「フラグ」が正規表現内でどのように機能するかの更新もありました。「i」フラグ（大文字小文字を区別しない）は非常に一般的です。正規表現全体を大文字小文字を区別しないようにするには、末尾に/iを付けます。しかし、正規表現の一部だけを大文字小文字を区別しないようにしたい場合はどうでしょうか？これで、グループを括弧で囲み、先頭にフラグを追加できるようになりました。

// 以前の方法 — 大文字小文字の区別を混在させることはできなかった
/[a-z]+@[A-Z]+/i  // 'i'フラグはすべてに適用される

// ES2025 — グループごとにインラインモディファイア
/(?i:[a-z.]+)@(?-i:[A-Z]+)\.(?i:com|org)/
//^^^^ 大文字小文字を区別しない部分
//             ^^^^^ 大文字小文字を区別する部分
//                           ^^^ 大文字小文字を区別しない部分

Promise Update

非同期プログラミングのフローモデル（Promise）にPromise.try()が追加され、エラーハンドリングが簡素化されました。関数は同期的にエラーを発生させることも、非同期的にエラーを発生させることもありますが、これまでは別々に処理する必要がありました。しかし、これからはまとめて扱えます。

// 非同期または同期的にエラーを発生させる可能性のある関数
function loadUser(id) {
  if (!id) throw new Error("No ID");          // 同期的な例外
  return fetch(`/api/users/${id}`);           // 非同期
}

// ❌ BEFORE — 2つの別々のエラーパス
let p;
try {
  p = loadUser(id);                           // ここで同期的な例外をキャッチ…
} catch (e) { handleError(e); }
p?.catch(e => handleError(e));                // …ここで非同期的なrejectをキャッチ

// ✅ ES2025 — ワンライナー、1つの.catch()
Promise.try(() => loadUser(id))
  .then(user  => render(user))
  .catch(err  => showError(err));             // 両方をキャッチ

ここでも、Claude Codeが作成したデモがこの概念を驚くほどうまく実証しています。

Import Attributes

Import attributesは個人的に大好きな機能です。JSONデータを取得してパースする手間なく、JSONデータとしてインポートできるという考え方が気に入っています。

import data from "./file.json" with { type: 'json' }

withの部分とその後のオブジェクトが「import attributes」と呼ばれ、さらにいくつかの機能があります。

JSONインポートはコードを数行節約でき、見た目も良いですが、Jake ArchibaldがImporting vs fetching JSONで指摘しているように、いくつかの顕著な欠点があります。大きな欠点の一つは、インポートが失敗すると「モジュールグラフ全体がダウンする」ことです。これは非常にまずいです。動的なimport()を使用すればcatchできますが…

try {
  const { default: data } = await import(url, {
    with: { type: 'json' },
  });
} catch (error) {
  // フォールバックロジック
}

しかし、JSONをfetchした場合に得られるデータほど良くはないため、まだ少し微妙です。Jakeは、インポートされたデータは「ページのライフサイクル全体でモジュールグラフ内に存在し続ける」のに対し、fetch後のデータはガベージコレクションの対象となる可能性があると述べています。いずれにせよ、慎重に扱いましょう。

JSONだけでなく、import attributesでCSSもインポートできるようになります。

import componentStyles from "./component.css" with { type: "css" };

これはA Nice Vanilla App Architecture Using Web Components and CSS Module Scriptsで詳しく説明しています。CSSをJavaScriptコンポーネントの隣のフォルダに置けるCSSファイルに保てるのが気に入っています。

import sheet from './styles.css' with { type: 'css' };

class MyComponent extends HTMLElement {
  constructor() {
    super(); 
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.adoptedStyleSheets = [sheet];
  }
  
  ...

---

これはES2025のすべてではありません。多くの記事がこれに特化して書かれています。Matthew TysonによるInfoWorldのECMAScript 2025: The best new features in JavaScriptは非常に参考になりました。例えば、Float16Arrayに関する情報が含まれていますが、これは私の専門外ですが、精度とメモリ使用量のトレードオフに関するもので、それが有用な場面があります。

ECMAScript 2026 (2026年半ばリリース予定)

まだ2026年の初めですが、例年通り年央にECMAScriptのリリースが期待されます。すでにStage 4に入っており、おそらくリリースされるであろう機能を紹介します。

Temporal API

間違いなく、しばらくの間JavaScriptに登場した最もエキサイティングで有用な機能です。「JavaScriptでの日付と時刻の扱いは、ライブラリ不要で、もう大丈夫」と要約できます。長らく、Momentのような大規模で優れたライブラリがそのギャップを埋めていましたが、開発者はパフォーマンスとDXのどちらかを選択する必要がありました。

現在、Safariが唯一サポートしていないブラウザですが、対応が進んでおり、TP（Technical Preview）に入っているので、もうすぐです。

特定のタイムゾーンで時刻を取得することが、ライブラリなしで非常に簡単になりました。

const now = Temporal.Now.zonedDateTimeISO("America/New_York");
// プログラムによる日付
console.log(now.toString());

// より読みやすく…
console.log(now.toLocaleString());

TC39会議で、現在のタイムゾーンでの次回の会議時間を表示するためにDevToolsコンソールで実行できるコードを見つけました。

Temporal.ZonedDateTime.from('2026-03-10T10:00[America/New_York]')
  .withTimeZone(Temporal.Now.timeZoneId()) // あなたのタイムゾーン
  .toLocaleString();

これはクールです。

Temporalには数百万の機能がありますが、以前は非常に面倒だったものをいくつか紹介します。

例えば、1月末の最終日に「1ヶ月追加」すると、おかしな結果が得られました。

const date = new Date(2026, 0, 31); // 1月31日
date.setMonth(date.getMonth() + 1); // "1ヶ月追加"
console.log(date.toDateString()); // Sun Mar 03 2026 ❌ 😬

しかし、素晴らしいTemporal APIを使えば、問題なく処理できます。

const jan31 = Temporal.PlainDate.from("2026-01-31");
const feb = jan31.add({ months: 1 });
console.log(feb.toString()); // 2026-02-28 ✅

また、比較も…正しく行えるようになりました。

const a = Temporal.Duration.from({ hours: 25 });
const b = Temporal.Duration.from({ days: 1 });

const cmp = Temporal.Duration.compare(a, b, { relativeTo: Temporal.Now.plainDateISO() });
console.log(cmp); // 1  (25h > 1 day) ✅

Explicit Resource Management

非同期関数とawaitで使用する新しいusingキーワードにより、リソースのクリーンアップが保証されます。ランタイムは、変数がスコープを外れるときに[Symbol.dispose]()（または[Symbol.asyncDispose]()）が呼び出されることを保証します。

class FileHandle {
  constructor(path) {
    this.path = path;
    console.log(`Opened ${path}`);
  }

  async write(data) {
    // ...データを書き込む
  }

  async [Symbol.asyncDispose]() {
    await someFlushOperation();
    console.log(`Flushed and closed ${this.path}`);
  }
}

async function saveData() {
  await using file = new FileHandle("output.txt");
  await file.write("hello world");
  // fileはエラーが発生した場合でも、ここで自動的にフラッシュとクローズが行われる
}

usingキーワードは単一のリソースには便利ですが、クリーンアップが必要な複数のリソースのためにDisposableStackも利用できるようになりました。

async function runJob() {
  await using stack = new AsyncDisposableStack();

  const db = stack.use(await openDatabase());
  const file = stack.use(new FileHandle("output.txt"));
  const tmpDir = stack.defer(async () => removeTempDir("/tmp/job"));

  // 作業を行う…
  await file.write(await db.query("SELECT * FROM jobs"));

  // 3つすべてがここで、逆順にクリーンアップされる。何か例外が発生した場合でも
}

Array.fromAsync / Iterator Sequencing

Array.fromAsyncは2024年に最初にリリースされましたが、仕様上の問題があったため、ECMAScript 2026でようやく仕様に採択されたようです。非同期イテレータをウォークする際に、yieldされた各値をawaitし、結果を通常の配列に収集します。これがない場合、手動でループしてpushする必要がありました。

async function* fetchNumbers() {
  yield 1;
  await new Promise(r => setTimeout(r, 100)); // 非同期遅延をシミュレート
  yield 2;
  await new Promise(r => setTimeout(r, 100));
  yield 3;
}

const numbers = await Array.fromAsync(fetchNumbers());
console.log(numbers); // [1, 2, 3]

これは、ページネーションのように、非同期関数をループ処理する関数呼び出しをawaitする場合に最も役立つでしょう。yieldの代わりに、すべてが解決されるまで待機するPromiseの配列を渡すこともできます。

ページネーションといえば、Iterator.concatは、イテレートしている各要素を遅延評価できる新しい機能です。そのため、すべてを事前に配列に展開してイテレートするのではなく、これはイテレーションを継続できますが、早期に終了した場合、配列を早期に埋めるために使用されたメモリを節約できます。

const page1 = [{ id: 1 }, { id: 2 }][Symbol.iterator]();
const page2 = [{ id: 3 }, { id: 4 }][Symbol.iterator]();
const page3 = [{ id: 5 }, { id: 6 }][Symbol.iterator]();

for (const item of Iterator.concat(page1, page2, page3)) {
  process(item); // 全ページを遅延評価でストリームする
}

Error.isError()

これにより、値が本物のErrorオブジェクトであるかどうかを確実に知ることができます。単にそれらしく見えるオブジェクトではなく。Web Workerやiframeのような異なる「レルム」からエラーを受け取る可能性のある中央エラー報告サービスのような状況で役立ちます。

Math.sumPrecise

console.log(0.1 + 0.2);の結果が0.30000000000000004という奇妙な値になるのを見たことがあるでしょう。理由は長くなります。console.log(Math.sumPrecise([0.1, 0.2]));を試してみてください（現時点でサポートされているFirefoxで）と、結果は…全く同じです。

しかし、それでも何らかの用途があるようです🤷‍♀️

Base64 / Hex Encoding

これらのためのシンプルで直接的なメソッド呼び出しが利用可能になったのはクールです。

const val = "Frontend Masters!";
const textEnc = new TextEncoder();
const bytes = textEnc.encode(val);
console.log(bytes.toBase64());
// 'RnJvbnRlbmQgTWFzdGVycyE='
console.log(bytes.toHex());
// '46726f6e74656e64204d61737465727321'

ここでも、Claude Codeが非常に魅力的なデモで実演しています。

フレームワークの新機能

React Ecosystem

React 19が2024年12月にリリースされました。現在は19.2ですが、React 20に関する公開情報はあまりありません。

しかし、React 19は、いわゆる「RSC」（React Server Components）、React Compiler、そしてServer Actionsといった大きなリリースでした。要約すると以下の通りです。

• RSC: Nodeサーバーが関与する場合、クライアントサイドのJavaScriptバンドルに含まれるはずだったコンポーネントの一部をサーバー側で処理し、必要なデータのみを返すことができます。
• Server Actions: Nodeサーバーが利用可能な場合、サーバー専用の関数を呼び出すことができます。フォーム処理が典型的な例です。
• Compiler: パフォーマンス最適化は、従来は開発者が手動で行う必要がありました。useMemoのエキスパートですか？私も違います。このコンパイラでReactコードをビルド前に処理することで、これらの最適化を自動で行うことができます。ビルドの複雑さが少し増しますが、パフォーマンスは向上します。

もちろん、他にも多くの小さな変更がありますが、大まかにはこれらの機能が存在することを知っておくべきです。React Native 0.83もリリースされましたが、私はあまり詳しくありません。しかし、10年間の開発を経て、ついに1.0が「発表」されたことは、関係者全員にとって良いことでしょう。その発表へのリンクは見つかりませんが、React Universe Confでのステージ上での叫び声だったと思います。

焼きたてのサーバーベースのReactテクノロジーは、昨年、非常に深刻なセキュリティ脆弱性に連続してさらされ、多くの人々を不安にさせました。

Vue Ecosystem

Vue 3.5は安定しており、Vue 3.6がアルファ版となり、大幅なパフォーマンス改善（「SolidやSvelte 5に匹敵」）を目指すオプトイン機能であるVapor Modeが導入されました。

私たちは2024年のVueエコシステム全体の概要をまとめましたが、Vueの外部者としては、2025/2026年の状況を理解するのは少し難しいです。明らかに、Evan Youが中心人物ですが、彼はVoidZero（「JavaScript Tooling Company」）を運営しており、現在はVite+を開発しています。これはVite自体、フォーマット、リンティング、テストなど、多数の主要プロジェクトを含んでいます。これらはVue固有のものではなく、これらすべてが進行中である中でVue自体に集中するのは難しいだろうと想像します🤷‍♀️。

おそらく、主要なVueメタフレームワークはNuxtで、v4に移行しました。Nuxt自体の「管理者」はNuxtLabsで、これはVercelに買収されました。VercelがNuxtを「所有」しているわけではありませんが…そうなのですか？メタフレームワークが理論的に持続可能な基盤を持つことは良いことだと感じる一方で、VoidZeroが自社言語のメタフレームワークを除いて、JavaScriptツールチェーンのほぼすべてのステップを持っているのは奇妙だと感じます。PiniaはVueの主要な状態管理ライブラリのようですが、v3に移行し、Vue 2のサポートを終了しました。

Svelte Ecosystem

Svelteはv5で順調に進んでいます。これはSvelteの世界における大きなアップデートで、「Runes API」と呼ばれるものがリアクティビティの仕組みを完全に変更し、より「きめ細かく」なり、効率的で高速になりました。正直なところ、SvelteやSvelteKitについてはあまり知りませんが、これらもVercelの一部であり、ユーザーには非常に愛されています。

JavaScript Runtimes

最も主要なランタイムは明らかにブラウザに組み込まれているものです。しかし、自分で選択して実行できるランタイムとしては、Nodeが依然として支配的であり、2つの興味深い競合が存在します。DenoやBunがNodeの代替となりうる場合について解説しました。最近では、これらすべてがTypeScriptをネイティブでサポートし、ブラウザJavaScript APIとの互換性が向上するなど、収束が進んでいます。

Node.js

Nodeにおけるおそらく最大のニュースは、TypeScriptファイルをネイティブで実行できるようになったことです。つまり：

node my-script.ts

これはNode 22.18.0以降、--experimental-strip-typesフラグなしで動作します。ただし、依然として型は削除されるため、TypeScriptコードの実際の問題を警告する助けにはなりません。

Nodeランドからの最大のニュースは、セキュリティ、パフォーマンス、ブラウザJavaScript APIとの連携といった、シンプルだが重要な基盤となる部分の改善です。

個人的には、Nodeの進歩に満足しています。プロジェクトでNodeの組み込みテストランナーに切り替えた経験があり、依存関係を減らせて良かったと感じています。Nodeのパーミッションモデルの取り組みを称賛しており、信頼できないコード状況での使用感が向上しています。

Bun

Bunのメジャーリリースは1.3で、開発サーバーの実行に関する多くのDX機能が追加されました。bunをHTMLファイルに向けるだけで、フル機能の開発サーバーを実行できるのは非常に満足感があります。

bun './**/*.html'

これは処理とバンドルもすべて行うため、この文脈ではBunはViteの代替となり得ます。

Bunにとっておそらく最大のニュースは、Anthropic（例: Claude）がBunを買収したことです。Bunにとっては、安定した資金力のあるホームを得られたため、良いニュースだと考えられます。

一般的に、人々は速度のためにBunを選択します。npmからのインストールは非常に高速で、全体的にパフォーマンスが良いです。ただし、安定性の代償を伴う場合があります。

Deno

Denoはv2になって久しく、私の知る限り、完全なNode.js互換性を持ち、3つの中で最も安定しています。また、パッケージのnpm:指定子のおかげで、npm互換性も完全に備えています。

一般的に、人々はDenoを安定性とセキュリティファーストのアーキテクチャのために選択します。彼らは明確に述べています：

Denoはデフォルトでセキュアです。明示的に有効にしない限り、Denoで実行されるプログラムは、ファイルシステムアクセス、ネットワーク接続、環境アクセスなどの機密APIにアクセスできません。コマンドラインフラグまたは実行時のパーミッションプロンプトを使用して、これらのリソースへのアクセスを明示的に許可する必要があります。これはNodeとの大きな違いであり、Nodeでは依存関係は自動的にすべてのシステムI/Oへのフルアクセスを許可されるため、プロジェクトに隠れた脆弱性を導入する可能性があります。

これは良い設計です。

Build Tools

Vite

Viteは、JavaScriptエコシステムで主要なビルドツールになりました。適切なタイミングで適切な場所にいたのでしょう！Vueと同じ開発者によって生み出されましたが、Viteはほぼすべてのフロントエンドプロジェクトで使用できるビルドツールです。ローカル開発では、コードの変更された小さな部分のみを更新することで動作し、完全なバンドルを必要としないアプローチを支持しており、必要に応じて本番レベルのバンドルも行います。

Viteは最近v8になりました。これは、サードパーティのバンドルツールRollupに依存するのではなく、自社開発のバンドラーであるRolldownを使用するようになったという点で重要な変更です。これは、Viteがより「統一されたツールチェーン」になるための最近の取り組みと一致しています。彼らはツール（パーサーなど）を製品間で共有できるため、全体がより予測可能になります。彼らはそのツールチェーン全体をVite+と呼んでおり、Viteの洗練された開発サーバー、フォーマット、リンティング、型チェック、テスト、タスク実行、モノレポサポート、パッケージングが含まれます。これはかなりの量です！

さらに、「デプロイメントプラットフォーム」であるVoidで一歩進んでいます。これはCloudflareのサービスを利用してホスティング、データストレージ、クラウド関数などを提供します。

データベース、KVストレージ、オブジェクトストレージ、AI推論、認証、キュー、cronジョブ。すべて組み込み。必要なものをインポートし、不要なものはスキップします。

現在、ほとんどすべてのフレームワークがViteを使用しています：Astro、SolidStart、SvelteKit、Nuxtなど。例外はNext.jsで、webpackを使用しており、Turbopackに移行中です（次のセクションを参照）。しかし、CloudflareによってNext.jsがViteにAIポートされた例も見られますが、これは物議を醸す動きでした。

Turbopack

TurbopackはVercelのバンドラーで、Next.js v16以降、デフォルトのバンドラーになりました。TurbopackはRustベースのプロジェクトで、以前のNext.jsバージョンでのwebpackよりも5〜10倍高速なリフレッシュが期待されています。現時点ではTurbopackはNext.js固有のものだと考えられます。

webpack

webpackは依然として広く使用されており、2026年の開発計画には、さまざまなローダーの必要性を減らすための多くのアイデアや簡素化が含まれています。webpackは一般的に複雑すぎると感じられているため、歓迎すべきアップデートです。

TypeScript

TypeScriptはv6になりました。2026年半ばにはv7がリリースされる予定で、新しいGoベースのコンパイラに移行する大規模なリリースになるでしょう。v6の主な目的は、その変更に備えるためのハウスキーピングです。Bytesニュースレターには良い簡単な要約がありました。

Strictモードがデフォルトでtrueになり、moduleはesnextにデフォルト設定され、targetは現在の年次ES仕様（現在はes2025）に浮動し、typesはデフォルトで空の配列になり、node_modules/@types内のすべてを検索しなくなりました。最後の変更だけでも多くのプロジェクトで問題が発生する可能性がありますが、20〜50％の速度向上が期待できます。

v7の準備をすることをお勧めします。VS CodeやPlaywrightの使用例で見られる約10倍の速度向上は、ほぼ間違いなく必要になるでしょう。

注目すべきは、TypeScriptがGitHubで#1の言語になり、前年比66％の成長を遂げていることです。

Types in JavaScript?

数年前、JavaScriptに直接型を追加するという議論がありました。これにより、コンパイラなしでTypeScriptの利点の一部が得られる可能性があります。しかし、これにはあまり動きがなく、TypeScriptができることを完全に置き換える可能性は低いでしょう。

AI

ここに挿入するのに最も適した場所かもしれませんが、TypeScriptの人気は、開発者が実際に使用しているものと、LLMが学習できるオープンソースの利用可能性の両方において非常に高く、AIは今日、特にTypeScriptのコードを書くのが非常に得意です。開発者の92％が何らかの程度でAIを使ってコードを書いていると言われており、これは驚異的な成長であり、現在開発における最大の話題です。

Testing

Jest、Jasmine、Mochaなどの主要なJavaScriptテストフレームワークは依然として存在し、テストの大部分を担っています。しかし、特にViteの人気が非常に高まるにつれて、そのテストフレームワークであるVitestが注目を集めています。Jest互換性があるため、テストの移行は一般的に簡単で、はるかに高速です（そして見た目も良いと思います）。Vitestには「ブラウザモード」もあり、実際のブラウザでテストを実行できます。これはコンポーネントのテストに非常に重要です。これは通常、Playwrightと組み合わせて行われます。Playwrightも人気が急上昇しているようで、独自の「エンドツーエンド」テストを実行でき、PuppeterやCypressよりも人気が高まっているようです（少なくとも私にはそう見えます）。

Meta Frameworks

Next.js

Next.jsはv16になり、Turbopackがデフォルトになった最初のリリースです。個人的にはその前進を好みますが、移行が難しかったため、自分のプロジェクトでは無効にしました。しかし、ロギングとエラーの改善は目覚ましい進歩です。このバージョンのNextは、React CompilerとReact Server Componentsを自動的に使用しており、理論的には全体的なパフォーマンス向上につながりますが、結果はより複雑で混在しています。

Next.jsでAIを多用する場合、MCPサーバーが利用可能になったことは注目に値します。これにより、フックアップすればAIがサイトの作業をはるかに賢く行えるようになります。

React 19も搭載しており、これは<ViewTransition>のサポートを意味します。これはここで取り上げました。

Remix / React Router

かつて（数年前）RemixはShopifyに「買収」されました。v2になり、Remix v3となるはずだったものが、実際にはReact Router v7になると発表されました。Remix v3は依然として存在しますが、活発に開発中です。大きな点は、Reactがもはやその一部ではなくなることです。

代わりに、私たちはウェブにより近い感覚を持つ独自のコンポーネントモデルを構築しています。

イベントRemix Jamが開催され、詳細が議論されました。非常に興味がある場合は、そちらをご覧ください。

TanStack

Remixの混乱から生じた影響の一部は、TanStackユニバースに恩恵をもたらした可能性があります。これは、非常に人気のあるルーターを含むツールのコレクションです。そして、以前のRemixのように、そのルーターはフレームワークにまで成長しました。

Adam RackisによるTanStackの世界に関する多くのコンテンツがあります。

Astro

Astroは何年も順調に進んでおり、勢いは衰えていません。今年、Cloudflareに買収されました。これは一般的に良いことのように思えます。優れたフロントエンドフレームワークで強力なビジネスモデルを構築するのは非常に困難であり、その答えは、大手ホスティングプロバイダーとの提携のようです。すでに奇妙なWordPressクローンを構築するために使用されています。

デフォルトで静的なサイトを構築したいが、モダンなJavaScriptフレームワークのコンポーネントベースのアーキテクチャを使用し、より動的な動作を簡単にオプトインできるようにしたい場合、Astroは標準であり、私に言わせれば非常に優れた選択肢です。

Astroの最新リリースは6.0で、開発中のランタイムのカスタマイズ、コンテンツセキュリティポリシー、実験的な高速コンパイラなどの成熟した機能が追加されました。これはすぐに6.1リリースでフォローアップされ、多くの小さな設定改善などが追加され、優れたフレームワークであることへの献身を示しています。

npm

npmランドでは、あまり多くのことは起こっていないようです。Microsoft/GitHubが買収してから6年が経過し、順調に運営されているようです。GitHub自体は稼働時間の問題に苦労しています。

npmでより問題なのは、サプライチェーンインシデントです。s1ngularityのように、認証情報/トークン/設定ファイルを盗み、GitHub上で公開しました😳。次に、悪意のあるパッケージアップデートが出回り、暗号通貨取引を悪意のあるウォレットにリダイレクトする可能性があったdebug/chalkがありました。そして、自己複製型の認証情報窃盗の悪質なものだったShai-Huludワーム（すみません、ワーム、複数形）があり、2.0バージョンはユーザーのホームディレクトリのすべてのファイルを上書き/削除しました。これは796のnpmパッケージ、2000万ダウンロード以上に影響したため…驚異的です。セキュリティの観点からは、npmにとって昨年はあまり良い年ではありませんでした。

深刻な本番環境アプリでnpmを使用している場合は、Socketのようなツールをチェックして保護を検討する価値があるかもしれません。

何を学ぶべきか？

永遠の答えは、これらの仕組みの基本的なスキルを学ぶことが、ツールやフレームワークなどの変化に関わらず役立つということです。そして、AIがコード作成を支援してくれるほど、実際に何をしているのかを理解し、計画、指導、形成、テスト、アーキテクト、そしてコードがどのように作成されても良いセンスを適用できる人々が、より必要になると言えます。

Frontend Mastersにサインアップすることが、それらの基本的なスキルへの近道です。