Frontend Weekly 2025-05-30
Chrome 137のCSS `if()`関数とWebAssembly JSPI、Angular 20のSignals API安定化、Remixの新方向性、日本郵便デジタルアドレス、Google CEOのAI Mode外部トラフィック約束について
- # Remixの新たな方向性について
- # 日本郵便がデジタルアドレスを発表
- # Google CEO、AI Modeからの外部トラフィックを約束
- # Chrome 137リリース
- # CSS if()関数
- # CSS reading-flow/reading-order
- # WebAssembly JavaScript Promise Integration (JSPI)
- # Blob URL Partitioning
- # Angular 20リリース
- # Signals APIの安定化
- # Zoneless変更検知の開発者プレビュー
- # 実験的なResource APIとhttpResource
- # Chrome DevToolsとの統合
Remixの新たな方向性について
日付:2025年5月26日
Remix v3に向けた新たな方向性を発表。React Router v7への統合完了を受けて、Preactベースの軽量フレームワークとして再構築される。Reactへの依存から脱却しPreactをフォークして使用し、LLM向けに最適化されたコードとドキュメント設計を採用する。
新しいアーキテクチャでは、ブラウザネイティブAPIを基盤とした開発、外部依存を極力排除した自律的なエコシステムを構築する。単一目的で交換可能な抽象化を採用したモジュラー設計でありながら、最終的には単一パッケージとして配布される。Reach UIの復活も予定されている。
React Router v7がShopify、X.com、GitHub、ChatGPTなどで採用され安定基盤となったことで、Remixは従来のパラダイムから解放され、より実験的で革新的な方向に進むことが可能になったと述べている。
日本郵便がデジタルアドレスを発表
日付:2025年5月26日
日本郵便が住所を7桁の英数字で表現する新サービス「デジタルアドレス」を開始。ゆうIDに登録した住所を7桁の英数字に変換し、住所入力の簡略化や利便性向上を実現する。引っ越し時でも同じデジタルアドレスを継続使用でき、住所変更の手続きが簡素化される。プライバシーに配慮した設計で、デジタルアドレスから名前や住所の逆引き検索は不可能。
現在は郵便局アプリのゆうパック送り状作成機能で利用可能だが、あて名としてデジタルアドレスのみでの郵便物送付は不可で、従来通り郵便番号・住所・氏名の記載が必要。将来的には様々な産業分野での活用を目指している。
同時に事業者向けの「郵便番号・デジタルアドレスAPI」を無料提供開始。郵便番号やデジタルアドレスから住所情報を取得可能で、漢字・カナ・ローマ字表記に対応。最新の郵便番号データと連携し、フリーワード検索も実装。
出展:
Google CEO、AI Modeからの外部トラフィックを約束
日付:2025年5月29日
GoogleのSundar Pichai CEOがThe Vergeのインタビューで、AI ModeおよびAI Overviewがウェブへトラフィックを送ることを製品の方向性として非常に重視していると明言。パブリッシャーの懸念に対し、AI機能がより幅広い情報源への送客を促進し、質の高い参照トラフィックを提供すると強調した。
出展:AI Mode/AI Overviewはウェブトラフィックを送る、Google CEOが約束
Chrome 137リリース
日付:2025年5月27日
Chrome 137が安定版としてリリース。CSS if()
関数による条件値表現の簡素化、CSS reading-flow
・reading-order
プロパティでのタブ順序制御、WebAssembly JavaScript Promise Integration(JSPI)が主要な新機能。その他、Selection API拡張、SVG transform
属性対応、システムアクセントカラー対応、Ed25519暗号化アルゴリズム追加など多数の機能改善。
出展:
CSS if()
関数
条件値を簡潔に表現する新機能。セミコロンで区切られた条件ー値ペアを順次評価し、最初に真となる条件の値を返す。
div {
color: var(--color);
background-color: if(style(--color: white): black; else: white);
}
.dark { --color: black; }
.light { --color: white; }
CSS reading-flow
/reading-order
FlexやGridレイアウトでのタブ順序とアクセシビリティツールのフォーカス順序を制御。DOM順序と視覚的順序の不整合を解決。
.grid-container {
reading-flow: grid-rows;
}
.item {
reading-order: 2;
}
WebAssembly JavaScript Promise Integration (JSPI)
WebAssemblyアプリケーションがJavaScript Promiseと統合。WebAssemblyコードが非同期API呼び出し時に中断され、完了時にPromiseが履行される。同期的なC/C++コードから非同期Web APIへの透過的なアクセスを実現。
// C言語でのFibonacci計算(Promise経由で加算)
long promiseFib(long x) {
if (x == 0) return 0;
if (x == 1) return 1;
return promiseAdd(promiseFib(x - 1), promiseFib(x - 2));
}
// JavaScriptのPromiseを呼び出し
EM_ASYNC_JS(long, promiseAdd, (long x, long y), {
return Promise.resolve(x + y);
});
出展:WebAssembly JavaScript Promise Integration (JSPI) enters origin trial
Blob URL Partitioning
Storage Partitioningの継続でBlob URLアクセスをStorage Key(トップレベルサイト、フレームorigin)で分割。プライバシー保護を強化。
次のようにサイトAで生成されたBlob URLに、別のサイトのiframe内からアクセスできなくなった。 このような利用をしている場合、Storage Access APIなどを利用する検討が必要。
// サイトA (a.com) がBlob URLを作成
const blob = new Blob(['データ'], {type: 'text/plain'});
const blobUrl = URL.createObjectURL(blob);
// サイトB (b.com) のiframeでは同じBlob URLにアクセス不可
Angular 20リリース
日付:2025年5月30日
Angular 20が正式リリース。Signals APIの安定化、zoneless変更検知の開発者プレビュー、インクリメンタルハイドレーションの安定化が主要な変更点。開発者体験の向上と公式マスコットの検討も開始。
Signals APIの安定化
effect
、linkedSignal
、toSignal
が安定版に昇格。Angular 16で導入されたSignals APIがより成熟。
import { signal, computed, effect } from '@angular/core';
@Component({
template: `{{ fullName() }}`
})
export class UserComponent {
firstName = signal('John');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
}
Zoneless変更検知の開発者プレビュー
Zone.jsなしでの変更検知が開発者プレビューに昇格。SSRでのエラーハンドリングも改善。
import { provideZonelessChangeDetection, provideBrowserGlobalErrorListeners } from '@angular/core';
bootstrapApplication(AppComponent, {
providers: [
provideZonelessChangeDetection(),
provideBrowserGlobalErrorListeners()
]
});
実験的なResource APIとhttpResource
非同期状態管理のためのResource APIとHTTPリクエスト向けのhttpResourceが実験的機能として追加。
const userResource = httpResource<User>(() =>
`https://api.example.com/users/${this.userId()}`
);
// テンプレートで直接使用
@Component({
template: `{{ userResource.value() | json }}`
})
export class UserProfile {}
Chrome DevToolsとの統合
Angular固有のプロファイリング情報がChrome DevToolsのPerformanceパネルに直接表示される機能を追加。
// DevToolsでAngularプロファイリングを有効化
ng.enableProfiling()