Stage 3 Decorators でできること / できないこと / TSKaigi 2026

追記: 発表時点で気がついてなかったけど 3 日前に Stage 2.7 になってました. Stage 2.7 Decorators をよろしくお願いします

- https://github.com/tc39/proposals/commit/cd2396f40e8bcfc76162bcc2d3340024f236bfe0
- https://github.com/tc39/proposals/commit/2af05ca9c714f06520e302c48fe262aa454b16f2

Transcript

1. susisu 2026-05-22 TSKaigi 2026 Stage 3 Decorators Ͱ Ͱ͖Δ͜ͱ / Ͱ͖ͳ͍͜ͱ
2. ‣ id:susisu / @susisu / @susisu2413 ‣ גࣜձࣾ͸ͯͳ
 Web ΞϓϦέʔγϣϯΤϯδχΞ / γχΞ ΤϯδχΞ ͜Μʹͪ͸
3. ࠷ۙྑ͔ͬͨ͜ͱ
4. ࠷ۙྑ͔ͬͨ͜ͱ
5. "Stage 3 Decorators"
6. Stage 3 Decorators ‣ TypeScript Ͱ͸ඪ४ԽҎલͷσίϨʔλ͕࣮ݧతʹ࣮૷͞Ε࢖ΘΕ͖ͯͨ ‣ --experimentalDecorators, --emitDecoratorMetadata, re fl ect-metadata
7. Stage 3 Decorators ‣ TypeScript Ͱ͸ඪ४ԽҎલͷσίϨʔλ͕࣮ݧతʹ࣮૷͞Ε࢖ΘΕ͖ͯͨ ‣ --experimentalDecorators, --emitDecoratorMetadata, re fl ect-metadata ‣ TC39 Ͱඪ४Խ͕ਐΊΒΕɺத৺తͳ࢓༷͕ Stage 3 ʹͳͬͨ ‣ Decorators, Decorator Metadata
8. Stage 3 Decorators ‣ TypeScript Ͱ͸ඪ४ԽҎલͷσίϨʔλ͕࣮ݧతʹ࣮૷͞Ε࢖ΘΕ͖ͯͨ ‣ --experimentalDecorators, --emitDecoratorMetadata, re fl ect-metadata ‣ TC39 Ͱඪ४Խ͕ਐΊΒΕɺத৺తͳ࢓༷͕ Stage 3 ʹͳͬͨ ‣ Decorators, Decorator Metadata ‣ TypeScript ʹ΋ 5.0 / 5.2 Ͱ Stage 3 ͷ࢓༷͕࣮૷͞Εͨ
9. Stage 3 Decorators ‣ TypeScript Ͱ͸ඪ४ԽҎલͷσίϨʔλ͕࣮ݧతʹ࣮૷͞Ε࢖ΘΕ͖ͯͨ ‣ --experimentalDecorators, --emitDecoratorMetadata, re fl ect-metadata ‣ TC39 Ͱඪ४Խ͕ਐΊΒΕɺத৺తͳ࢓༷͕ Stage 3 ʹͳͬͨ (2022 ʙ 2023) ‣ Decorators, Decorator Metadata ‣ TypeScript ʹ΋ 5.0 / 5.2 Ͱ Stage 3 ͷ࢓༷͕࣮૷͞Εͨ (2023) ‣ͦΕ͔Β໿ 3 ೥͕ܦա
10. Stage 3 Decorators ʹ·ͭΘΔٙ໰ ‣ ͦ΋ͦ΋σίϨʔλͬͯԿʁ
11. Stage 3 Decorators ʹ·ͭΘΔٙ໰ ‣ ͦ΋ͦ΋σίϨʔλͬͯԿʁ ‣ --experimentalDecorators ͔ΒͲ͏มΘͬͨͷʁ
12. Stage 3 Decorators ʹ·ͭΘΔٙ໰ ‣ ͦ΋ͦ΋σίϨʔλͬͯԿʁ ‣ --experimentalDecorators ͔ΒͲ͏มΘͬͨͷʁ ‣ ࢓༷΍ΤίγεςϜ͸ࠓͲ͏͍͏ঢ়گʁ
13. Stage 3 Decorators ʹ·ͭΘΔٙ໰ ‣ ͦ΋ͦ΋σίϨʔλͬͯԿʁ ‣ --experimentalDecorators ͔ΒͲ͏มΘͬͨͷʁ ‣ ࢓༷΍ΤίγεςϜ͸ࠓͲ͏͍͏ঢ়گʁ ‣ ͿͬͪΌ͚໾ʹཱͭͷʁ
14. Q1. ͦ΋ͦ΋σίϨʔλͬͯԿʁ
15. ͦ΋ͦ΋σίϨʔλͬͯԿʁ ‣ class ͷػೳΛ֦ு / ϝλσʔλΛ෇༩͢ΔͨΊͷػೳ ‣ ͪΐ͏Ͳؔ਺ʹର͢Δߴ֊ؔ਺ͷΑ͏ͳ໾ׂ @decorate class MyClass { @decorate accessor myField: number = 0; @decorate myMethod(): void { /* ... */ } } ͍ͭ͜Β
16. ྫ: ϩά / τϨʔε ‣ ڭՊॻతͳϢʔεέʔε ‣ ϝιουΛϥοϓͯ͠ϩά / τϨʔε৘ใΛه࿥͢Δ class MyClass { @log myMethod(): void { /* ... */ } } const myInstance = new MyClass(); myInstance.myMethod(); // → myMethod called
17. ྫ: ϩά / τϨʔε ‣ ڭՊॻతͳϢʔεέʔε ‣ ϝιουΛϥοϓͯ͠ϩά / τϨʔε৘ใΛه࿥͢Δ function log<This, Args extends any[], Return>( target: (this: This, ...args: Args) => Return, context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>, ): ((this: This, ...args: Args) => Return) | void { return function (this, ...args) { console.log(`${String(context.name)} called`); return target.call(this, ...args); }; } ؔ਺Λड͚औͬͯ ؔ਺Λฦ͢
18. ྫ: DI ‣ InversifyJS, TSyringe, TypeDI, NestJS ͳͲ ‣ ϑΟʔϧυ΍Ҿ਺ʹ஋Λ஫ೖ͢ΔͨΊͷϝλσʔλΛ෇༩͢Δ // --experimentalDecorators, --emitDecoratorMetadata @injectable() class MyApp { constructor(@inject("Clock") clock: Clock) { /* ... */ } } // ... const myApp = container.get("MyApp");
19. ྫ: ORM / (de)serialization ‣ TypeORM, class-transformer ͳͲ ‣ ֤ϑΟʔϧυΛΤϯίʔυ / σίʔυ͢ΔͨΊͷϝλσʔλΛ෇༩͢Δ // --experimentalDecorators, --emitDecoratorMetadata @Entity() export class User { @PrimaryGeneratedColumn("uuid") id!: string; @Column() name!: string; @CreateDateColumn() createdAt!: Date; }
20. ྫ: ϧʔςΟϯάఆٛ ‣ NestJS ͳͲ ‣ HTTP ϦΫΤετͱϝιουΛ݁ͼ͚ͭΔϝλσʔλΛ෇༩͢Δ // --experimentalDecorators, --emitDecoratorMetadata @Controller("users") export class UsersController { @Get() findAll(@Req() request: Request): string { /* ... */ } }
21. ྫ: Observable ‣ MobX ͳͲ ‣ ΫϥεͷϑΟʔϧυ͕มԽͨ࣌͠ʹ௨஌͢Δ class Checkbox { @observable accessor checked = false; @action toggle(): void { this.checked = !this.checked; } }
22. Q2. --experimentalDecorators ͔Β Ͳ͏มΘͬͨͷʁ
23. --experimentalDecorators ͱ஥ؒͨͪ ‣ --experimentalDecorators ‣ ࣮ݧతͳσίϨʔλΛ༗ޮԽ ‣ re fl ect-metadata ‣ ࣮ݧతͳσίϨʔλͱ૊Έ߹ΘͤͯϝλσʔλΛѻ͏ύοέʔδ ‣ --emitDecoratorMetadata ‣ re fl ect-metadata Λ࢖ͬͯίϯύΠϧ࣌ͷܕ৘ใΛϝλσʔλͱͯ͠෇༩
24. Stage 3 Decorators ͷ࢓༷ ‣ Decorators ‣ ֓Ͷ --experimentalDecorators ʹରԠ ‣ σίϨʔλຊମ ‣ Decorator Metadata ‣ ֓Ͷ re fl ect-metadata ʹରԠ ‣ σίϨʔλΛ࢖ͬͯΫϥεʹϝλσʔλΛ෇༩ ‣ (--emitDecoratorMetadata ͸ʁ)
25. ओͳมԽ఺ ‣ ྑ͍ͱ͜Ζ ‣ Class fi elds (public / private / static) ͷαϙʔτ ‣ Auto-accessors ͷ௥Ճ ‣ ඪ४ػೳ͚ͩͰϝλσʔλΛ෇༩Ͱ͖ΔΑ͏ʹͳͬͨ ‣ ྑ͘ͳ͍ͱ͜Ζʁ ‣ ࣗ༝౓͕௿Լͨ͠ ‣ Ҿ਺σίϨʔλ͕ະαϙʔτ ‣ --emitDecoratorMetadata ͕ඇରԠ
26. Class fi elds ͷαϙʔτ ‣ ES2022 Ͱ class fi elds (public / private / static) ͕௥Ճ͞Εͨ ‣ TypeScript ͷ public / private म০ࢠ͡Όͳ͍ํͰ͢ class MyClass { foo: number = 1; #bar: number = 2; static baz: number = 3; static #qux: number = 4; }
27. Class fi elds ͷαϙʔτ ‣ --experimentalDecorators Ͱ͸ class fi elds ʹର͢Δαϙʔτ͕ऑ͔ͬͨ ‣ private ͸׬શඇରԠɺstatic Λ۠ผͰ͖ͳ͍ɺॳظԽϩδοΫʹ৮Εͳ͍ // --experimentalDecorators function fieldDecorator<Target>( target: Target, key: string | symbol ): void { // ... } private fi eld ͸ key Ͱ͸ࢀরͰ͖ͳ͍ ϝλσʔλΛ෇༩͢Δ͘Β͍͔͠Ͱ͖ͳ͍
28. Class fi elds ͷαϙʔτ ‣ Stage 3 Decorators Ͱ͸ class fi elds Λαϙʔτ ‣ private ΍ static Λ໰୊ͳ͘ѻ͑ΔɺॳظԽϩδοΫʹ৮ΕΔɺ function fieldDecorator<This, Value>( target: undefined, context: ClassFieldDecoratorContext<This, Value>, ): ((this: This, initialValue: Value) => Value) | void { // ... } ໭Γ஋Λฦ͢ͱॳظԽϩδοΫΛΧελϚΠζͰ͖Δ context ͷϝιου / ϑϥάͰ
 private fi elds ΋ѻ͑Δ͠
 private / static ͷ۠ผ΋Ͱ͖Δ
29. Auto-accessors ͷ௥Ճ ‣ --experimentalDecorators Ͱ͸ϑΟʔϧυͷಡΈॻ͖Λѻ͏ͷ͕൥ࡶͩͬͨ ‣ ࣗ໌ͳ getter / setter Λॻ͘ඞཁ͕͋Δ // --experimentalDecorators class MyClass { private _field: number = 0; @log get field(): number { return this._field; } set field(value: number) { this._field = value; } } fi elds ʹର͢ΔσίϨʔλͰ͸
 ಡΈॻ͖Λѻ͑ͳ͍ͷͰ
 setter / getter Λ࢖͏
30. Auto-accessors ͷ௥Ճ ‣ Auto-accessor ͷ௥ՃʹΑͬͯɺ͜ͷύλʔϯͷهड़͕؆୯ʹͳͬͨ ‣ private fi eld ͱͦͷ getter / setter Λੜ੒ͯ͘͠ΕΔΑ͏ͳΠϝʔδ class MyClass { @log accessor field: number = 0; } Auto-accessor ʹର͢ΔσίϨʔλͰ͸
 ಡΈॻ͖Λѻ͑Δ
31. ඪ४ػೳͰϝλσʔλΛ෇༩ ‣ --experimentalDecorators ࣗମʹ͸ϝλσʔλΛ෇༩͢Δ࢓૊Έ͕ͳ͍ ‣ ୅ΘΓʹ re fl ect-metadata ύοέʔδΛཔΔ͜ͱʹͳ͍ͬͯͨ // --experimentalDecorators import "reflect-metadata"; function fieldDecorator<Target>( target: Target, key: string | symbol ): void { Reflect.defineMetadata("foo", 42, target, key); }
32. ඪ४ػೳͰϝλσʔλΛ෇༩ ‣ Decorator Metadata Ͱ͸ context / Symbol.metadata Λ࢖ͬͯ
 ϝλσʔλΛಡΈॻ͖Ͱ͖ΔΑ͏ʹͳͬͨ function fieldDecorator<This, Value>( target: undefined, context: ClassFieldDecoratorContext<This, Value>, ): void { context.metadata["foo"] = 42; }
33. ࣗ༝౓ͷ௿Լ ‣ --experimentalDecorators ͸͔ͳΓࣗ༝౓͕ߴ͔ͬͨ ‣ prototype ΍ property descriptor Λ৮ͬͯ class ͷܗΛมߋͰ͖Δ // --experimentalDecorators function methodDecorator<Target, Args extends any[], Return>( target: Target, key: string | symbol, descriptor: TypedPropertyDescriptor<(this: Target, ...args: Args) => Return>, ): TypedPropertyDescriptor<(this: Target, ...args: Args) => Return> | void { // ... } prototype
34. ࣗ༝౓ͷ௿Լ ‣ Stage 3 Decorators Ͱ͸جຊతʹ͸௚઀ͷର৅͔͠৮Εͳ͘ͳͬͨ ‣ ୅ΘΓʹΫϥεͷܗ͕੩తʹܾ·ΓɺΤϯδϯͷ࠷దԽʹ༏͘͠ͳͬͨ function methodDecorator<This, Args extends any[], Return>( target: (this: This, ...args: Args) => Return, context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>, ): ((this: This, ...args: Args) => Return) | void { // ... } ௚઀ͷର৅
35. Ҿ਺σίϨʔλͷະαϙʔτ ‣ --experimentalDecorators ʹ͋ͬͨҾ਺σίϨʔλ͸ະαϙʔτ ‣ Ҿ਺ʹରͯ͠ݸผʹϝλσʔλΛ෇༩Ͱ͖ͳ͍ // --experimentalDecorators @injectable() class MyApp { constructor(@inject("Clock") clock: Clock) { /* ... */ } } ͜Ε
36. Ҿ਺σίϨʔλͷະαϙʔτ ‣ ຊ࣭తʹ͸ඞཁͰ͸ͳ͍͸ͣ ‣ ಉ͡ϝλσʔλ͸ class ࣗମ΍ϝιου΁ͷσίϨʔλͰ΋෇༩Ͱ͖Δ @injectable() @inject(["Clock"]) class MyApp { constructor(clock: Clock) { /* ... */ } }
37. --emitDecoratorMetadata ඇରԠ ‣ ίϯύΠϧ࣌ͷܕ৘ใΛϝλσʔλͱͯ͠෇༩͢Δػೳ ‣ DI ΍ ORM ͳͲͰ࢖ΘΕ͖ͯͨ ‣ ݩʑ TypeScript ݻ༗ͷػೳͰɺඪ४Խ͸શ͘͞Ε͍ͯͳ͍ ‣ Stage 3 Decorators / Decorator Metadata ΁ͷରԠ΋ߦΘΕ͍ͯͳ͍ ‣ ݱࡏͰ͸ TypeScript ࣗମ͕ඇඪ४΍ܕΛݩʹͨ͠ίʔυੜ੒Λࢤ޲͍ͯ͠ ͳ͍ ‣ ݩʑޓ׵ੑʹ΋೉͕͋Δ
38. มԽ఺·ͱΊ ‣ ྑ͍ͱ͜Ζ ‣ Class fi elds (public / private / static) ͷαϙʔτ ‣ Auto-accessors ͷ௥Ճ ‣ ඪ४ػೳ͚ͩͰϝλσʔλΛ෇༩Ͱ͖ΔΑ͏ʹͳͬͨ ‣ ྑ͘ͳ͍ͱ͸Ұ֓ʹ͸ݴ͑ͳ͍ͱ͜Ζ ‣ ࣗ༝౓͸௿Լ͕ͨ͠ɺTS Ͱ͸ͨͿΜࠔΒͳ͍͠࠷దԽʹ΋༏͍͠ ‣ Ҿ਺σίϨʔλ͸ະαϙʔτ͕ͩɺຊ࣭తʹ͸Ͱ͖Δ͜ͱ͸ݮ͍ͬͯͳ͍ ‣ --emitDecoratorMetadata ͸ඇରԠ͕ͩɺඇޓ׵ͷ೰Έ΋ͳ͘ͳΔ
39. Q3. ࢓༷΍ΤίγεςϜ͸ࠓͲ͏͍͏ঢ়گʁ
40. ࢓༷΍ΤίγεςϜ͸ࠓͲ͏͍͏ঢ়گʁ ‣ ҰݴͰݴ͏ͱ: ΍΍ݫ͍͠
41. ࢓༷ ‣ Decorators / Decorator Metadata ͸ݱࡏ Stage 3 ‣ ׬ྃ͸ Stage 4 ‣ ݱ࣌఺Ͱ͸ Test262 (ޓ׵ੑςετ) ͕ະ׬੒ ‣ Stage 4 ʹਐΉͨΊʹ͸ Test262 Λ௨ա͢Δޓ׵࣮૷͕ෳ਺ඞཁ ‣ ςετέʔεͱ࢓༷ͷهड़ͷໃ६΋ࢦఠ͞Ε͍ͯͯɺ΋͏গ͔͔͠Γͦ͏
42. ࣮૷ ‣ tsc, babel, esbuild, swc ͳͲͷτϥϯεύΠϥ͸ Stage 3 ͷ࢓༷Λ࣮૷ࡁΈ ‣ oxc ͸·ͩ (Test262 ଴ͪ) ‣ V8, SpiderMonkey, JSC ͳͲͷΤϯδϯ͸ະ࣮૷ ‣ ਖ਼֬ʹ͸ V8 ΍ SpiderMonkey Ͱ͸࣮૷͸ਐΜͰ͍ΔΑ͏͕ͩະग़ՙ ‣ धཁ͕ݶఆతͳ͜ͱɺͦ΋ͦ΋ Test262 ͕ະ׬੒ͳ͜ͱͱɺͦΕʹΑͬͯ ग़ՙ͢ΔϦεΫ͕ߴ͍͜ͱͳͲ͕͋Γ༷ࢠݟதͬΆ͍
43. ϥΠϒϥϦ / ϑϨʔϜϫʔΫ ‣ Stage 3 Decorators ΁ͷҠߦΛ׬ྃͨ͠ϥΠϒϥϦ͸ग़͖͍ͯͯΔ ‣ MobX ͳͲ ‣ ҰํͰੲ͔Β͋Δ΋ͷͷଟ͘͸ --experimentalDecorators ͔ΒະҠߦ ‣ InversifyJS, TSyringe, TypeDI, TypeORM, NestJS, etc. ‣ Ҿ਺σίϨʔλͱ --emitDecoratorMetadata ͕ͳ͍͜ͱɺͦΕʹΑͬͯ
 ΠϯλʔϑΣʔε͕มΘͬͯ͠·͏͜ͱ͕ओͳཧ༝ͱͯ͠ڍ͛ΒΕΔ
44. Ҿ਺ʹର͢ΔσίϨʔλ ‣ ࢓༷ࣗମ͸ఏҊதͰɺݱࡏ Stage 1 ‣ ҎԼͷΑ͏ͳҙݟ΋͋Γঢ়گ͸ݫ͍͠ ‣ σίϨʔλͷͨΊ͚ͩʹ class Λ࢖͏ͱ͍͏࿪ΜͩઃܭΛආ͚ΔͨΊɺ
 ؔ਺σίϨʔλ (ಉ͘͡ Stage 1) ͱҰॹʹਐΊΔ΂͖ ‣ ؔ਺σίϨʔλ͸ͦΕ͸ͦΕͰ͙͢ʹ͸࿩͕·ͱ·Γͦ͏ʹͳ͍ ‣ ͦ΋ͦ΋ຊ࣭తʹඞཁͳͷ͔ʁ
45. --emitDecoratorMetadata ‣ ݱࡏͷ TypeScript ͷํ਑ (ܕΛݩʹίʔυੜ੒͠ͳ͍) ʹ൓͢ΔͨΊɺ࣮૷͞ ΕΔՄೳੑ͸ඇৗʹ๡͍͠ ‣ ʮٕज़తʹෆՄೳͰ͸ͳ͍͕ɺ·࣮ͣ૷͠ͳ͍ʯͱ໌ݴ͞Ε͍ͯΔ ‣ tsc Ҏ֎ͷτϥϯεύΠϥ / type stripping ΋޿͘࢖ΘΕΔΑ͏ʹͳ͍ͬͯΔ ͕ɺͦΕΒͰαϙʔτ͞ΕΔݟࠐΈ΋ͳ͍
46. ·ͱΊΔͱ ‣ Decorators / Decorator Metadata ͕ Stage 4 ʹਐΉͨΊʹ͸ Test262 Λ͸͡Ί ٞ࿦ͷऩଋͱޓ׵࣮૷͕ඞཁ ‣ τϥϯεύΠϥͷ࣮૷͸ਐΜ͕ͩɺΤϯδϯͷ࣮૷͸·༷ͩࢠݟத ‣ ϥΠϒϥϦ / ϑϨʔϜϫʔΫͷҠߦ͸ɺओʹҾ਺σίϨʔλ΍
 --emitDecoratorMetadata ͕ͳ͍͜ͱΛཧ༝ʹਐΜͰ͍ͳ͍ ‣ Ҿ਺σίϨʔλͷ࢓༷͸ͦ͏؆୯ʹ͸ਐ·ͳͦ͞͏ͩ͠ɺ
 --emitDecoratorMetadata ͸଴͍ͬͯͯ΋དྷͳ͍ ‣ τϥϯεύΠϥ͕͋Ε͹࢖͑Δ͕ɺશମతʹ͸΋͏গ͕࣌ؒ͠ඞཁ͔
47. Q4. ͿͬͪΌ͚໾ʹཱͭͷʁ
48. ͿͬͪΌ͚໾ʹཱͭͷʁ ‣ ͍͔ͭ͘ͷϢʔεέʔεʹ͍ͭͯɺҎԼͷೋͭͷ؍఺ͰݟͯΈ·͠ΐ͏ ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔
49. ྫ: ϩά / τϨʔε ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → Yes (class ࢖༻͕ଥ౰ͳΒ) class MyClass { @log myMethod(): void { /* ... */ } } const myInstance = new MyClass(); myInstance.myMethod(); // → myMethod called
50. ྫ: όϦσʔγϣϯ / ܖ໿ʹΑΔઃܭ ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → Yes (class ࢖༻͕ଥ౰ͳΒ) class Stack<T> { // ... @pre(function (this, _value) { return this.size < this.capacity; }) @post(function (this, _result, value) { return this.size > 0 && this.#items[this.size - 1] === value; }) push(value: T): void { /* ... */ } // ... }
51. ྫ: this ͷ bind ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → Yes (class ࢖༻͕ଥ౰ͳΒ) class MyClass { value: number = 42; method(): void { console.log(this.value); } } const myInstance = new MyClass(); const fn = myInstance.method; fn(); // => ランタイムエラー
52. ྫ: this ͷ bind ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → Yes (class ࢖༻͕ଥ౰ͳΒ) class MyClass { value: number = 42; @bound method(): void { console.log(this.value); } } const myInstance = new MyClass(); const fn = myInstance.method; fn(); // => 42
53. ྫ: DI ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes (࣮૷͸ଘࡏ͢Δ) ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No @injectable("MyApp") class MyApp { @inject("Clock") clock!: Clock; } // ... const myApp = container.get("MyApp"); Ҿ਺σίϨʔλ͸࢖͑ͳ͍ͷͰ
 ϑΟʔϧυʹ஫ೖ͢ΔͳͲ
54. ྫ: DI ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes? (࣮૷͸ଘࡏ͢Δ) ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No ‣ ૉ๿ʹίϯετϥΫλ஫ೖͰࡁΉέʔε΋͋Δ ‣ ͦ΋ͦ΋ DI ʹ class ͕ඞਢ͔ͱ͍͏ͱͦ͏Ͱ΋ͳ͍ ‣ ͦ΋ͦ΋ DI ͕ৗʹඞਢ͔ͱ͍͏ͱͦ͏Ͱ΋ͳ͍ (vi.mock() Ͱे෼ͱ͔)
55. ྫ: ORM / (de)serialization ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes (هड़͸૿͑Δ) ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No @Entity() export class User { @PrimaryGeneratedColumn("uuid") id!: string; @Column("text") name!: string; @CreateDateColumn() createdAt!: Date; } --emitDecoratorMetadata ͕ͳ͍ͷͰ
 खͰܕΛࢦఆ͢ΔͳͲ
56. ྫ: ORM / (de)serialization ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes (هड़͸૿͑Δ) ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No ‣ ͦ΋ͦ΋શવ strict ͡Όͳ͍͚Ͳɺࠓߋ΍Γ͍ͨʁ @Entity() export class User { @PrimaryGeneratedColumn("uuid") id!: string; // ... } const user = new User(); user.id; // : string, === undefined
57. ྫ: ORM / (de)serialization ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes? (هड़͸૿͑Δ͕) ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No ‣ ͦ΋ͦ΋શવ strict ͡Όͳ͍͚Ͳɺࠓߋ΍Γ͍ͨʁ ‣ ҆શͳ୅ସखஈ΋͍͘ΒͰ΋͋Δ ‣ Prisma, Drizzle, etc. ‣ Zod, Valibot, etc.
58. ྫ: ϧʔςΟϯάఆٛ ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No @Controller("users") export class UsersController { @Get() findAll(context: Context, request: Request): Response { /* ... */ } } Ҿ਺σίϨʔλ͸࢖͑ͳ͍ͷͰ
 ݻఆͷҾ਺ʹ͢ΔͳͲ
59. ྫ: ϧʔςΟϯάఆٛ ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No ‣ Express ͷࠒ͔Β Hono ʹࢸΔ·Ͱ class Λલఏͱ্ͤͣख͍͍ͬͯ͘Δ έʔε͸ଟ͍ Ҿ਺σίϨʔλ͸࢖͑ͳ͍ͷͰ
 ݻఆͷҾ਺ʹ͢ΔͳͲ
60. ྫ: Observable ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No (޷ΈʹΑΔ) class Checkbox { @observable accessor checked = false; @action toggle(): void { this.checked = !this.checked; } }
61. ྫ: Observable ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No (޷ΈʹΑΔ) ‣ jotai ͳͲ class Λ࢖Θͳ͍ϥΠϒϥϦ΋͋Δ ‣ ͦ΋ͦ΋ MobX ࣗମ΋ class / σίϨʔλΛ࢖Θͳ͍ํ๏Λ༻ҙ͍ͯ͠Δ
62. ྫ: Web Components ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No @customElement("my-element") class MyElement extends HTMLElement { // ... }
63. ྫ: Web Components ‣ (1) ݱ࣌఺ͷ࢓༷Ͱ࢖͑Δ΋ͷ͕Ͱ͖Δ͔ → Yes ‣ (2) ຊ౰ʹσίϨʔλΛ࢖͏ඞཁ͕͋Δ͔ → No ‣ ↓ ͱൺ΂ͯಛผخ͍͜͠ͱ͕͋Δ͔ͱ͍͏ͱʁ class MyElement extends HTMLElement { // ... } customElements.define("my-element", MyElement);
64. ·ͱΊ
65. ·ͱΊ ‣ Q. ͦ΋ͦ΋σίϨʔλͬͯԿʁ ‣ A. ΫϥεͷػೳΛ֦ுͨ͠ΓϝλσʔλΛ෇༩ͨ͠Γ͢Δ΍ͭɻؔ਺ʹ͓ ͚Δߴ֊ؔ਺ʹ૬౰ ‣ Q. --experimentalDecorators ͔ΒͲ͏มΘͬͨͷʁ ‣ A. class fi elds ͷαϙʔτͳͲجຊతʹ͸ਖ਼౷ਐԽͰɺ࠷దԽʹ΋༏͘͠ ͳͬͨɻͨͩ͠Ҿ਺σίϨʔλ΍ --emitDecoratorMetadata ͸ඇରԠ
66. ·ͱΊ ‣ Q. ࢓༷΍ΤίγεςϜ͸ࠓͲ͏͍͏ঢ়گʁ ‣ A. ΍΍ݫ͍͠ɻτϥϯεύΠϥܦ༝Ͱ࢖͑͸͢Δ͕ɺΤίγεςϜʹे෼ ૊Έࠐ·ΕΔ·Ͱʹ͸΋͏গ͕͔͔࣌ؒ͠Γͦ͏ ‣ Q. ͿͬͪΌ͚໾ʹཱͭͷʁ ‣ A. ଟ͘ͷϢʔεέʔε͸࣮૷ / ࠶ݱࣗମ͸ՄೳͰɺclass ͷ࢖༻͕ଥ౰ͳΒ ͳ͘΋ͳ͍ɻݱ୅ج४ͰݟΔͱඍົͳέʔε΋͋ΔͷͰ஫ҙ ‣ (ͳΜΒ͔໘ന͍࢖͍ํ͕͋ͬͨΒγΣΞ͍ͯͩ͘͠͞)
67. Appendix
68. ࢀߟจݙ (1/4) ‣ ֤࢓༷ͷఏҊ ‣ https://github.com/tc39/proposal-decorators ‣ https://github.com/tc39/proposal-decorator-metadata ‣ https://github.com/tc39/proposal-class-method-parameter-decorators ‣ https://github.com/tc39/proposal-function-and-object-literal-element- decorators
69. ࢀߟจݙ (2/4) ‣ https://github.com/tc39/notes ‣ TC39 ͷٞࣄ࿥ ‣ https://github.com/tc39/proposals ͷ README ʹؔ࿈͢Δٞࣄ࿥΁ͷϦϯ Ϋ͕͋ΔͷͰɺͦ͜Λى఺ʹಡΉͷ͕͓͢͢Ί ‣ https://github.com/tc39/test262/pull/4103 ‣ Test262 ΁ͷ Decorators / Decorator Metadata ͷ௥Ճ ‣ https://github.com/tc39/proposal-decorators/issues/476 ‣ ༗ࢤʹΑΔ࣮૷ঢ়گͷτϥοΩϯά
70. ࢀߟจݙ (3/4) ‣ ֤ϥΠϒϥϦ / ϑϨʔϜϫʔΫͷରԠঢ়گ ‣ https://github.com/microsoft/tsyringe/issues/225 ‣ https://github.com/inversify/InversifyJS/issues/1507 ‣ https://github.com/typestack/typedi/issues/1178 ‣ https://github.com/typeorm/typeorm/issues/9862 ‣ https://github.com/nestjs/nest/issues/11414 ‣ https://github.com/microsoft/TypeScript/issues/57533 ‣ Stage 3 Decorators Ͱͷ --emitDecoratorMetadata αϙʔτͷཁ๬
71. ࢀߟจݙ (4/4) ‣ ʮECMAScript Decorators ͷมભͱ࠷ऴతͳ࢓༷ʯ ‣ https://zenn.dev/pixiv/articles/ab9a7d7f654a79 ‣ ʮStage 3 Decorators ͷ͜ͱΛࢥ͍ग़࣌͢ʹಡΉهࣄʯ ‣ https://susisu.hatenablog.com/entry/2026/02/26/135056
72. ࣌ܥྻ (࢓༷ଆ) ‣ 2014 ~ 2015 ͝Ζ ࠷ॳظͷఏҊ ‣ (ឯ༨ۂં) ‣ 2022-03 Decorators ͕ Stage 3 ʹ ‣ 2023-05 Decorator Metadata ͕ Stage 3 ʹ
73. ࣌ܥྻ (TypeScript ଆ) ‣ 2015-06 TypeScript 1.5 ‣ --experimentalDecorators, --emitDecoratorMetadata ‣ 2022-11 TypeScript 4.9 ‣ Auto-accessors (Decorators ͷҰ෦) ‣ 2023-03 TypeScript 5.0 ‣ Decorators ‣ 2023-08 TypeScript 5.2 ‣ Decorator Metadata