JavaScript Decorators Stage 3とは？（ジャバスクリプトデコレーターステージスリー）意味・特徴をわかりやすく解説

Q: JavaScript Decorators Stage 3とは？

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対応進行中。

主な特徴・仕組み

@decorator構文: @MyDecorator でClass/Method/Field/Accessor修飾
5つの Decorator 種類: Class/Method/Field/Accessor/Setter Decorator
Decorator Functions: (value, context) => newValue Pure Function型
Context Object: kind/name/access/static/private 等のメタ情報
Initializer: Field Decorator の addInitializer() で初期化フック
Class Method置換: Method Decorator で関数を別関数に置換可能
Composition: 複数 Decorator のチェーン適用、@A @B method()
Static Decorators: Static Method/Field にも適用可能
Private Decorators: Privateフィールド #private にも適用可能
TypeScript統合: TypeScript 5.0+ で experimentalDecorators: false でStage 3使用
Browser Native: 未対応、Babel/SWC/TypeScript Compiler でTranspile必要

スペック比較表

項目	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&lt;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 &lt;T>(target: undefined, context: ClassFieldDecoratorContext&lt;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 7.24+: 2024年Stage 3 Decorators 公式対応、@babel/plugin-proposal-decorators
SWC 1.10+: 2024年Stage 3対応、Next.js 15/Vercel等で利用可能
TypeScript 5.0+: experimentalDecorators: false でStage 3 Decorators使用
Vue 3.4+: Class Component で Stage 3対応進行中
Angular 19+: 2024年Stage 3 Decorators対応開始(従来 Experimental)
競合機種: TypeScript Experimental Decorators(レガシー)、Stage 2 Decorators(廃止)、Custom Higher-Order Functions

自作PCでの選び方・注意点

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経験者は移行容易。

よくある質問（FAQ）

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問題なし。

まとめ

JavaScript Decorators Stage 3 = 2024年Production採用可能
Class/Method/Field/Accessor/Setter Decorators 5種類
Pure Function + Context Object 設計、Reflect Metadata削除
Babel 7.24+/SWC 1.10+/TypeScript 5.0+ 全Toolchain対応
ES2025-2026 標準化見込み、NestJS/Angular/Vue/Lit対応進行中

JavaScript Decorators Stage 3（ジャバスクリプトデコレーターステージスリー）

概要