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