2024年TC39 Stage 3+Babel/SWC対応JavaScript Decorators。@decorator class構文+TypeScript互換+Method/Class/Field/Accessor対応+ES2025標準化見込み搭載。
JavaScript Decorators Stage 3は2024年Babel 7.24+/SWC/TypeScript 5.0+の対応により Production採用可能となったJavaScript Decorators Stage 3提案で、@decorator 構文で Class/Method/Field/Accessor をElegantに拡張する仕組み。TypeScript Decorators(2014年〜2022年のExperimental)・Stage 1/2 Decorators との非互換 Breaking Change を経た最終形で、TC39最終調整段階(Stage 3)+主要 Toolchain の対応が完了。Java/C# の Annotation・Python の @decorator に類似した宣言的なメタプログラミング機能で、Logging・Caching・Validation・Dependency Injection・State Management・Routing 等のCross-cutting Concerns を綺麗に分離可能。NestJS・Angular・MobX 等のFrameworks が長年Experimental Decorators 採用してきたが、Stage 3 標準化で互換性問題が解決される見込み。ES2025-2026 で正式採用予定で、Vue 3.4+/Lit/Ember.js等のWeb Frameworkも Stage 3対応進行中。
@MyDecorator でClass/Method/Field/Accessor修飾(value, context) => newValue Pure Function型addInitializer() で初期化フック@A @B method()#private にも適用可能experimentalDecorators: false でStage 3使用| 項目 | Decorators Stage 3 | TypeScript Experimental Decorators | Stage 2 Decorators | Java/C# Annotations |
|---|
| 構文 | @decorator | @decorator | @decorator | @Annotation |
| Reflect Metadata | × (削除) | ○ | ○ | ○ |
| Pure Function | ○ | × Class extends | × | × |
| Context Object | ○ 詳細metadata | △ | ○ | × |
| Field Decorators | ○ | × Field setterのみ | ○ | × |
| Composition | ○ | ○ | ○ | ○ |
| TC39 Stage | Stage 3 | (TypeScript固有) | (廃止) | (Java/C# 標準) |
| Production使用 | Babel/SWC/TS 5.0+ | TypeScript 4.x | (廃止) | (Java VM/CLR) |
// Method Decorator(Logging)
function logged<T extends (...args: any[]) => any>(
target: T,
context: ClassMethodDecoratorContext
) {
return function (this: any, ...args: any[]) {
console.log(`Calling ${String(context.name)} with`, args);
const result = target.apply(this, args);
console.log(`${String(context.name)} returned`, result);
return result;
};
}
class UserService {
@logged
greet(name: string) {
return `Hello, ${name}!`;
}
}
// Field Decorator(Validation)
function validate(predicate: (v: any) => boolean) {
return function <T>(target: undefined, context: ClassFieldDecoratorContext<T, any>) {
return function (initialValue: any) {
if (!predicate(initialValue)) {
throw new Error(`Invalid value for ${String(context.name)}`);
}
return initialValue;
};
};
}
class Form {
@validate((v: string) => v.length > 0)
username = "";
}
@babel/plugin-proposal-decoratorsexperimentalDecorators: false でStage 3 Decorators使用JavaScript Decoratorsは Web開発者向けの先進機能で、jisaku.com Web Frontend では限定的な活用範囲。jisaku.com の現状(Next.js 16+TypeScript+Tailwind CSS 4)でDecorators採用するメリットは限定的で、Server Components・Hooks ベースの React 19パラダイムでは Decorator 出番が少ない。一方、 NestJS Backend・Angular Frontend・MobX 状態管理・Class-based Domain Model 等の用途では Stage 3 Decorators が強力。jisaku.com API(Hono on Bun)で NestJS 風のDecorator Pattern(@Controller/@Get/@Post等)を採用すれば、Routing/Validation/Auth が宣言的に記述可能。一方、HonoはNestJSと異なる Function-based 設計で、jisaku.com API との適合性は低い。Vue 3 Class Component採用プロジェクトでは Stage 3 Decoratorsへの移行が現実的選択肢。TypeScript 5.0以降で experimentalDecorators: false(デフォルト)でStage 3使用、true設定で従来Experimental継続可能。Production採用前にBabel/SWC設定確認+TypeScript Compiler 互換性検証が必要。チーム学習コスト 1-2 週間、過去のExperimental Decorators経験者は移行容易。
TypeScript Experimental Decoratorsとの違い: Experimental(2014-2022)はTC39 Stage 1ベースで Reflect Metadata等独自拡張、Stage 3はPure Function+Context Object設計。Breaking Change多く、Migration Guideに従って段階移行。 Java/C# Annotationsとの違い: Java/C#は静的型情報追加+Compile-time Code Generation、JavaScript Decoratorsは Runtime での Function-based 修飾。表面的には類似だが実装哲学異なる。
Q1: 既存 TypeScript Experimental Decorators から Stage 3 へ移行できる？
A: 可能だがBreaking Change多。@Decorator(arg) を @decorator factory function に書き換え、Reflect Metadata 削除、Class extends パターン廃止。Migration Toolは現状ないため手動移行、規模次第で1-4週間の工数。
Q2: Reflect Metadata は使える？ A: Stage 3 では公式廃止、独自実装で代替可能。NestJS/Angular等のFrameworkでReflect Metadata 依存箇所多いため、移行前に各 Framework の Stage 3 対応状況確認必須。Angular 19+ は Stage 3 対応で Reflect Metadata削減を進める。
Q3: Browser Native 対応はいつ？ A: 未定、TC39 Stage 4(ES2025-2026)後にChrome/Firefox/Safari の対応開始、Native実装は2027-2028年予想。それまではBabel/SWC/TypeScript Compiler でTranspile必要、Production問題なし。