é«åºŠãªåã·ã¹ãã æ©èœãããã©ãŒãã³ã¹æé©åãå ç¢ã§ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³æ§ç¯æŠç¥ãæ·±ãæãäžããTypeScriptã®æªæ¥ãæ¢ããŸãã
TypeScript éåæªæ¥: æºãããªãåå®å šãžã®ããŒãããã
JavaScript ã®ã¹ãŒããŒã»ããã§ãã TypeScript ã¯ãJavaScript ã®ãã€ãããã¯ãªäžçã«éçåä»ãã远å ããããšã§ãããã³ããšã³ãããã³ããã¯ãšã³ãéçºã«é©åœããããããŸããããã®å ç¢ãªåã·ã¹ãã ã¯ããšã©ãŒãæ©æã«æ€åºããã³ãŒãã®ä¿å®æ§ãåäžãããéçºè ã®çç£æ§ãé«ããŸãã TypeScript ã¯é²åãç¶ããŠããããããã®é«åºŠãªæ©èœãšãã¹ããã©ã¯ãã£ã¹ãçè§£ããããšããé«å質ã§ã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§äžå¯æ¬ ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãTypeScript ã®é«åºŠãªæŠå¿µãããã©ãŒãã³ã¹æé©åãå°æ¥ã®æ¹åæ§ã«ã€ããŠæãäžããæºãããªãåå®å šæ§ãå®çŸããããã®ããŒãããããæäŸããŸãã
é«åºŠãªåã®å
stringãnumberãboolean ãªã©ã®åºæ¬åãè¶
ããŠãTypeScript ã¯ãéçºè
ãè€éãªããŒã¿æ§é ãšé¢ä¿ãæ£ç¢ºã«è¡šçŸã§ããããã«ããè±å¯ãªé«åºŠãªåãæäŸããŸãããããã®åãç¿åŸããããšã¯ãTypeScript ã®å¯èœæ§ãæå€§éã«åŒãåºãããã«äžå¯æ¬ ã§ãã
æ¡ä»¶ä»ãå: åã¬ãã«ã§ã®ããžãã¯
æ¡ä»¶ä»ãåã䜿çšãããšãJavaScript ã®äžé æŒç®åãšåæ§ã«ãæ¡ä»¶ã«åºã¥ããŠåãå®çŸ©ã§ããŸãããã®åŒ·åãªæ©èœã«ãããæè»ã§é©å¿æ§ã®é«ãåå®çŸ©ãäœæã§ããŸãã
äŸ:
type IsString<T> = T extends string ? true : false;
type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
説æ: IsString åã¯ãæ¡ä»¶ä»ãåã䜿çšããŠãç¹å®ã®å T ã string ãæ¡åŒµãããã©ããããã§ãã¯ããŸããæ¡åŒµããå Žåã¯ãå㯠true ã«è§£æ±ºãããŸãããã以å€ã®å Žåã¯ãfalse ã«è§£æ±ºãããŸãããã®äŸã¯ãæ¡ä»¶ä»ãåã䜿çšããŠåã¬ãã«ã®ããžãã¯ãäœæããæ¹æ³ã瀺ããŠããŸãã
ãŠãŒã¹ã±ãŒã¹: API ã¬ã¹ãã³ã¹ã®ã¹ããŒã¿ã¹ã³ãŒãã«åºã¥ããŠãåå®å šãªããŒã¿ãã§ãããå®è£ ããŸããããšãã°ãæåãŸãã¯ãšã©ãŒã®ã¹ããŒã¿ã¹ã«åºã¥ããŠããŸããŸãªããŒã¿åœ¢ç¶ã䜿çšããŸããããã«ãããAPI ã¬ã¹ãã³ã¹ã«åºã¥ããŠæ£ããããŒã¿åŠçãä¿èšŒãããŸãã
ãããå: ç°¡åãªåã®å€æ
ãããåã䜿çšãããšãæ¢åã®åããã®ããããã£ãå埩åŠçããããšã«ãããæ°ããåã«å€æã§ããŸããããã¯ããªããžã§ã¯ãåã®ããããã£ã倿ŽãããŠãŒãã£ãªãã£åãäœæããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸ:
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
type Person = {
name: string;
age: number;
};
type ReadonlyPerson = Readonly<Person>; // All properties are now readonly
説æ: Readonly åã¯ãç¹å®ã®åã®ãã¹ãŠã®ããããã£ã readonly ã«ããçµã¿èŸŒã¿ãããåã§ãã[K in keyof T] æ§æã¯ãå T ã®ããŒãå埩åŠçããreadonly ããŒã¯ãŒãã¯åããããã£ãäžå€ã«ããŸãã
ãŠãŒã¹ã±ãŒã¹: 颿°åããã°ã©ãã³ã°ãã©ãã€ã ã®äžå€ããŒã¿æ§é ãäœæããŸããããã«ãããç¶æ ã®èª€ã£ã倿Žãé²ããã¢ããªã±ãŒã·ã§ã³ã®ããŒã¿æŽåæ§ã確ä¿ã§ããŸãã
ãŠãŒãã£ãªãã£å: TypeScript ã®ã¹ã€ã¹ã¢ãŒããŒãã€ã
TypeScript ã¯ãäžè¬çãªåã®å€æãå®è¡ããäžé£ã®çµã¿èŸŒã¿ãŠãŒãã£ãªãã£åãæäŸããŸãããããã®åã¯ãã³ãŒããå€§å¹ ã«ç°¡çŽ åããåå®å šæ§ãåäžãããããšãã§ããŸãã
äžè¬çãªãŠãŒãã£ãªãã£å:
Partial<T>:Tã®ãã¹ãŠã®ããããã£ããªãã·ã§ã³ã«ããŸããRequired<T>:Tã®ãã¹ãŠã®ããããã£ãå¿ é ã«ããŸããReadonly<T>:Tã®ãã¹ãŠã®ããããã£ãèªã¿åãå°çšã«ããŸããPick<T, K>:Tããããããã£ã®ã»ããKãéžæããŠæ°ããåãäœæããŸããOmit<T, K>:Tããããããã£ã®ã»ããKãçç¥ããŠæ°ããåãäœæããŸããRecord<K, T>: ããŒKãšå€Tãæã€åãäœæããŸãã
äŸ:
type User = {
id: number;
name: string;
email?: string;
};
type RequiredUser = Required<User>; // email is now required
type UserWithoutEmail = Omit<User, 'email'>; // email is removed
ãŠãŒã¹ã±ãŒã¹: äžéšã®ãã£ãŒã«ãããªãã·ã§ã³ã®å Žåããããã©ãŒã ããŒã¿ã®åŠçãPartial<T> ã¯ããã©ãŒã ããŒã¿ãªããžã§ã¯ãã衚ãããã«äœ¿çšã§ããRequired<T> ã¯ããã©ãŒã ãéä¿¡ããåã«ãã¹ãŠã®å¿
é ãã£ãŒã«ããååšããããšã確èªããããã«äœ¿çšã§ããŸããããã¯ããã©ãŒã ã®èŠä»¶ãå ŽæãèŠå¶ã«ãã£ãŠç°ãªãå¯èœæ§ãããåœéçãªã³ã³ããã¹ãã§ç¹ã«åœ¹ç«ã¡ãŸãã
ãžã§ããªã¯ã¹: åå®å šæ§ãåããåå©çšå¯èœãªã³ãŒãã®äœæ
ãžã§ããªã¯ã¹ã䜿çšãããšãåå®å šæ§ãç¶æããªãããããŸããŸãªåã§åäœããã³ãŒããäœæã§ããŸããããã¯ãåå©çšå¯èœãªã³ã³ããŒãã³ããšã©ã€ãã©ãªãäœæããããã«äžå¯æ¬ ã§ãã
äŸ:
function identity<T>(arg: T): T {
return arg;
}
let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(42);
説æ: identity 颿°ã¯ãå T ã®åŒæ°ãåãåããåãå€ãè¿ããžã§ããªãã¯é¢æ°ã§ãã <T> æ§æã¯ãåãã©ã¡ãŒã¿ T ã宣èšããŸããããã¯ä»»æã®åã«ããããšãã§ããŸãã颿°ãåŒã³åºããšãã¯ãåãã©ã¡ãŒã¿ãæç€ºçã«æå®ããã (äŸ: identity<string>) ãTypeScript ã«åŒæ°ã®åã«åºã¥ããŠæšæž¬ãããããšãã§ããŸãã
ãŠãŒã¹ã±ãŒã¹: åå®å šæ§ã確ä¿ããªãããããŸããŸãªçš®é¡ã®ããŒã¿ãä¿æã§ããããªã³ã¯ããããªã¹ããããªãŒãªã©ã®åå©çšå¯èœãªããŒã¿æ§é ãäœæããŸããåœéç㪠e ã³ããŒã¹ãã©ãããã©ãŒã ãèããŠã¿ãŸãããããã±ãŒã«ã«åºã¥ããŠéè²šãæžåŒèšå®ãããžã§ããªãã¯é¢æ°ãäœæããåå°åã«é©åãªé貚èšå·ãšæžåŒèšå®ãé©çšããªãããæ°å€ã®åå®å šæ§ãç¶æã§ããŸãã
åæšè«: TypeScript ã«äœæ¥ãããã
TypeScript ã®åæšè«ã·ã¹ãã ã¯ã倿°ã®äœ¿ç𿹿³ã«åºã¥ããŠã倿°ãšåŒã®åãèªåçã«æšæž¬ããŸããããã«ãããæç€ºçãªå泚éã®å¿ èŠæ§ãæžããã³ãŒããããç°¡æœã«ãªããŸãã
äŸ:
let message = "hello"; // TypeScript ã¯ãmessage ãæååã§ããããšãæšæž¬ããŸã
let count = 42; // TypeScript ã¯ãcount ãæ°å€ã§ããããšãæšæž¬ããŸã
function add(a: number, b: number) {
return a + b; // TypeScript ã¯ãæ»ãå€ã®åãæ°å€ã§ããããšãæšæž¬ããŸã
}
説æ: äžã®äŸã§ã¯ãTypeScript ã¯ãmessageãcount ã®åãããã³ add ã®æ»ãå€ãããããã®åæå€ãšäœ¿ç𿹿³ã«åºã¥ããŠæšæž¬ããŸããããã«ãããæç€ºçãªå泚éã®å¿
èŠæ§ãæžããã³ãŒãã®å¯èªæ§ãåäžããŸãã
ãŠãŒã¹ã±ãŒã¹: è€éãªããŒã¿æ§é ãè¿ã API ã®æäœãTypeScript ã¯ãè¿ãããããŒã¿ã®åãæšæž¬ã§ãããããåãæç€ºçã«å®çŸ©ããããšãªããåå®å šæ§ãåããããããã£ã«ã¢ã¯ã»ã¹ã§ããŸããã°ããŒãã«æ°è±¡ API ãšå¯Ÿè©±ããã¢ããªã±ãŒã·ã§ã³ãæ³åããŠã¿ãŠãã ããã TypeScript ã¯ãæž©åºŠãæ¹¿åºŠã颚éã®åãèªåçã«æšæž¬ã§ãããããå°åã«é¢ä¿ãªãããŒã¿ã®æäœã容æã«ãªããŸãã
挞é²çåä»ã: TypeScript ãæ®µéçã«åãå ¥ãã
TypeScript ã¯ãæ¢åã® JavaScript ã³ãŒãããŒã¹ã« TypeScript ãæ®µéçã«å°å ¥ããããšããµããŒãããŠããŸããããã¯ãå®å šãªæžãæããå®çŸäžå¯èœãªå€§èŠæš¡ãªãããžã§ã¯ãã«ç¹ã«åœ¹ç«ã¡ãŸãã
挞é²çåä»ãã®ããã®æŠç¥:
- ã³ãŒãã®æãéèŠãªéšåããå§ããŸããé »ç¹ã«ä¿®æ£ãããã¢ãžã¥ãŒã«ãè€éãªããžãã¯ãå«ãã¢ãžã¥ãŒã«ã«çŠç¹ãåœãŠãŸãã
anyãæ§ããã«äœ¿çšããŸããanyã䜿çšãããšåãã§ãã¯ããã€ãã¹ã§ããŸãããTypeScript ã®ç®çãç¡å¹ã«ãããããæ³šæããŠäœ¿çšããå¿ èŠããããŸãã- 宣èšãã¡ã€ã« (
.d.ts) ãæŽ»çšããŸãã宣èšãã¡ã€ã«ã¯ãæ¢åã® JavaScript ã©ã€ãã©ãªãšã¢ãžã¥ãŒã«ã«åæ å ±ãæäŸããŸãã - äžè²«ããã³ãŒãã£ã³ã°ã¹ã¿ã€ã«ãæ¡çšããŸããåœåèŠåãšã³ãŒãæ§é ã®äžè²«æ§ã«ãããTypeScript ãžã®ç§»è¡ã容æã«ãªããŸãã
ãŠãŒã¹ã±ãŒã¹: TypeScript ãžã®å®å šãªç§»è¡ãå®çŸäžå¯èœãªãå€§èŠæš¡ãªã¬ã¬ã·ãŒ JavaScript ãããžã§ã¯ãã TypeScript ãåŸã ã«å°å ¥ããããšã§ãæ¢åã®ã³ãŒãããŒã¹ãäžæããããšãªããåå®å šæ§ã®ã¡ãªããã享åã§ããŸããããšãã°ãã¬ã¬ã·ãŒãã³ãã³ã°ã¢ããªã±ãŒã·ã§ã³ã䜿çšããŠããåœéçãªéèæ©é¢ã¯ãæãéèŠãªã¢ãžã¥ãŒã«ã« TypeScript ãåŸã ã«å°å ¥ããå®å šãªãªãŒããŒããŒã«ãå¿ èŠãšããã«ã·ã¹ãã ã®ä¿¡é Œæ§ãšä¿å®æ§ãåäžãããããšãã§ããŸãã
ããã©ãŒãã³ã¹ã®æé©å: å¹çç㪠TypeScript ã³ãŒãã®äœæ
TypeScript ã¯å€ãã®ã¡ãªãããæäŸããŸãããããã©ãŒãã³ã¹ã®ããã«ããã¯ãåé¿ããã«ã¯ãå¹ççãªã³ãŒããæžãããšãéèŠã§ãã TypeScript ã³ãŒããæé©åããããã®ãã³ããæ¬¡ã«ç€ºããŸãã
- äžèŠãªåã¢ãµãŒã·ã§ã³ãé¿ããŸããåã¢ãµãŒã·ã§ã³ã¯åãã§ãã¯ããã€ãã¹ããå®è¡æãšã©ãŒã«ã€ãªããå¯èœæ§ããããŸãã
- ãªããžã§ã¯ãåã«ã¯ãåãšã€ãªã¢ã¹ã®ä»£ããã«ã€ã³ã¿ãŒãã§ãŒã¹ã䜿çšããŸããã€ã³ã¿ãŒãã§ãŒã¹ã¯ãè€éãªãªããžã§ã¯ãåã®å Žåãåãšã€ãªã¢ã¹ãããäžè¬çã«ããã©ãŒãã³ã¹ãé«ããªããŸãã
anyã®äœ¿çšãæå°éã«æããŸããanyã䜿çšãããšåãã§ãã¯ãç¡å¹ã«ãªããå®è¡æãšã©ãŒãçºçããå¯èœæ§ããããŸãã- ãã«ãããã»ã¹ãæé©åããŸããå¢åã³ã³ãã€ã«ãšãã£ãã·ã³ã°ã䜿çšããŠããã«ãããã»ã¹ãé«éåããŸãã
- ã³ãŒãããããã¡ã€ãªã³ã°ããŸãããããã¡ã€ãªã³ã°ããŒã«ã䜿çšããŠãããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããããã«å¿ããŠã³ãŒããæé©åããŸãã
äŸ: type MyType = { a: number; b: string; } ã䜿çšãã代ããã«ãç¹ã«å€§èŠæš¡ã§è€éãªãªããžã§ã¯ãåãæ±ãå Žåã¯ãããã©ãŒãã³ã¹åäžã®ããã« interface MyType { a: number; b: string; } ãåªå
ããŸãã
ãŠãŒã¹ã±ãŒã¹: ãªã¢ã«ã¿ã€ã ããŒã¿åŠçãã°ã©ãã£ã«ã«ã¬ã³ããªã³ã°ãªã©ãé«ãããã©ãŒãã³ã¹ãå¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã TypeScript ã³ãŒããæé©åããããšã§ãã¢ããªã±ãŒã·ã§ã³ãã¹ã ãŒãºãã€å¹ççã«å®è¡ãããããã«ããŸãããªã¢ã«ã¿ã€ã ã§å€§éã®è²¡åããŒã¿ãåŠçããå¿ èŠãããã°ããŒãã«ãªååŒãã©ãããã©ãŒã ãèããŠã¿ãŸããããå¹çç㪠TypeScript ã³ãŒãã¯ããã©ãããã©ãŒã ãããã©ãŒãã³ã¹ã®åé¡ãªãã¯ãŒã¯ããŒããåŠçã§ããããšãä¿èšŒããããã«äžå¯æ¬ ã§ãããããã¡ã€ãªã³ã°ãšæé©åã«ãããããã«ããã¯ãç¹å®ããã·ã¹ãã ã®å šäœçãªããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
ãã¶ã€ã³ãã¿ãŒã³ãšã¢ãŒããã¯ãã£: ã¹ã±ãŒã©ãã«ãª TypeScript ã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯
確ç«ããããã¶ã€ã³ãã¿ãŒã³ãšã¢ãŒããã¯ãã£ã®ååãæ¡çšããããšã¯ãã¹ã±ãŒã©ãã«ã§ä¿å®æ§ã®é«ã TypeScript ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ããäž»ãªèæ ®äºé ãæ¬¡ã«ç€ºããŸãã
- ã¢ãžã¥ãŒã«æ§: ã¢ããªã±ãŒã·ã§ã³ããåå¥ã«éçºããã³ãã¹ãã§ãããå°ããç¬ç«ããã¢ãžã¥ãŒã«ã«åå²ããŸãã
- äŸåæ§æ³šå ¥: äŸåæ§æ³šå ¥ã䜿çšããŠãã¢ãžã¥ãŒã«éã®äŸåæ§ã管çãããã¹ãå¯èœæ§ãåäžãããŸãã
- SOLID åå: ãªããžã§ã¯ãæåèšèšã® SOLID ååã«åŸããæè»ã§ä¿å®æ§ã®é«ãã³ãŒããäœæããŸãã
- ãã€ã¯ããµãŒãã¹ã¢ãŒããã¯ãã£: å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã«ã¯ããã€ã¯ããµãŒãã¹ã¢ãŒããã¯ãã£ã®äœ¿çšãæ€èšããŠãã ããã
äŸ: Observer ãã¿ãŒã³ã䜿çšããŠãWeb ã¢ããªã±ãŒã·ã§ã³ã§ãªã¢ã«ã¿ã€ã æŽæ°ãå®è£ ããŸãããã®ãã¿ãŒã³ã䜿çšãããšããµããžã§ã¯ã (ããŒã¿ãœãŒã¹ãªã©) ããªãã¶ãŒã㌠(UI ã³ã³ããŒãã³ããªã©) ããåé¢ã§ããããããµããžã§ã¯ãã倿Žããã«ãªãã¶ãŒããŒã远å ãŸãã¯åé€ããããšã容æã«ãªããŸããã°ããŒãã«ã«åæ£ãããã¢ããªã±ãŒã·ã§ã³ã§ã¯ãObserver ãã¿ãŒã³ã䜿çšããŠãããŸããŸãªå°åã®ã¯ã©ã€ã¢ã³ãã«æŽæ°ãå¹ççã«äŒéã§ããŸãã
ãŠãŒã¹ã±ãŒã¹: æéã®çµéãšãšãã«ã¹ã±ãŒã©ãã«ã§ä¿å®å¯èœã§ããå¿ èŠããããå€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ããã¶ã€ã³ãã¿ãŒã³ãšã¢ãŒããã¯ãã£ã®ååã¯ãã³ãŒããæŽçããã¢ããªã±ãŒã·ã§ã³ã®æé·ã«åãããŠã³ãŒããé²åã§ããããã«ããããã®ãã¬ãŒã ã¯ãŒã¯ãæäŸããŸããããšãã°ãã°ããŒãã«ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ã¯ããã€ã¯ããµãŒãã¹ã¢ãŒããã¯ãã£ã®æ©æµãåããããšãã§ããããŸããŸãªæ©èœ (ãŠãŒã¶ãŒãããã¡ã€ã«ããã¥ãŒã¹ãã£ãŒããã¡ãã»ãŒãžã³ã°ãªã©) ãåå¥ã«éçºããã³ãããã€ã§ããŸããããã«ããããã©ãããã©ãŒã ã®ã¹ã±ãŒã©ããªãã£ãšå埩åãåäžããæ°ããæ©èœãšæŽæ°ãç°¡åã«è¿œå ã§ããããã«ãªããŸãã
TypeScript ã«ããåœéå (i18n) ããã³ããŒã«ã©ã€ãº (l10n)
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ã¢ããªã±ãŒã·ã§ã³ãéçºããå Žåãåœéå (i18n) ãšããŒã«ã©ã€ãº (l10n) ãèæ ®ããããšãäžå¯æ¬ ã§ãã TypeScript ã¯ãã¢ããªã±ãŒã·ã§ã³ãããŸããŸãªèšèªãæåã«å®¹æã«é©åãããããã«éèŠãªåœ¹å²ãæããããšãã§ããŸãã
- ããŒã«ã©ã€ãºã©ã€ãã©ãªã䜿çšããŸã:
i18nextãreact-intlãªã©ã®ã©ã€ãã©ãªã¯ã翻蚳ã®ç®¡çãããã±ãŒã«åºæã®èŠåã«åŸã£ãŠããŒã¿ã®æžåŒèšå®ãè¡ãããã®ããŒã«ãæäŸããŸãã - æååãå€éšåããŸã: ãã¹ãŠã®ãŠãŒã¶ãŒåãã®æååãå€éšãã¡ã€ã«ã«ä¿åãããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠåçã«ããŒãããŸãã
- æ¥ä»ãæ°å€ãããã³éè²šãæ£ããæžåŒèšå®ããŸã: ãã±ãŒã«åºæã®æžåŒèšå®é¢æ°ã䜿çšããŠãæ¥ä»ãæ°å€ãããã³é貚ãåå°åã«å¯ŸããŠæ£ãã衚瀺ãããããã«ããŸãã
- è€æ°åœ¢ãåŠçããŸã: èšèªã«ãã£ãŠè€æ°åœ¢ã®ã«ãŒã«ãç°ãªããŸããããŒã«ã©ã€ãºã©ã€ãã©ãªã䜿çšããŠãè€æ°åœ¢ãæ£ããåŠçããŸãã
- å³ããå·Š (RTL) èšèªããµããŒãããŸã: ã¢ããªã±ãŒã·ã§ã³ã®ã¬ã€ã¢ãŠãããã¢ã©ãã¢èªãããã©ã€èªãªã©ã® RTL èšèªã«æ£ããé©å¿ããããã«ããŸãã
äŸ: React ã¢ããªã±ãŒã·ã§ã³ã§ç¿»èš³ã管çããããã« i18next ã䜿çšããŸããåèšèªã®ç¿»èš³ãã¡ã€ã«ãå®çŸ©ãããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠåçã«ããŒãã§ããŸãã TypeScript ã䜿çšããŠã翻蚳ããŒãæ£ãã䜿çšããã翻蚳ãããæååãåå®å
šã§ããããšã確èªã§ããŸãã
// en.json
{
"greeting": "Hello, {{name}}!"
}
// fr.json
{
"greeting": "Bonjour, {{name}}!"
}
// Component.tsx
import i18next from 'i18next';
function MyComponent() {
const name = "World";
const greeting = i18next.t('greeting', { name });
return <div>{greeting}</div>;
}
ãŠãŒã¹ã±ãŒã¹: e ã³ããŒã¹ãã©ãããã©ãŒã ããœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ãããã³ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãã¿ãŒã²ãããšãããã®ä»ã®ã¢ããªã±ãŒã·ã§ã³ãåœéåãšããŒã«ã©ã€ãºã¯ãããŸããŸãªå°åã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«äžå¯æ¬ ã§ããããšãã°ãã°ããŒãã« e ã³ããŒã¹ãã©ãããã©ãŒã ã¯ã補åã®èª¬æãäŸ¡æ Œãæ¥ä»ããŠãŒã¶ãŒã®åžæããèšèªãšåœ¢åŒã§è¡šç€ºããå¿ èŠããããŸãã TypeScript ã䜿çšããŠãããŒã«ã©ã€ãºããã»ã¹ãåå®å šã§ããã翻蚳ãããæååãæ£ãã䜿çšãããŠããããšã確èªã§ããŸãã
TypeScript ã«ããã¢ã¯ã»ã·ããªã㣠(a11y)
ã¢ã¯ã»ã·ããªãã£ã¯ãWeb éçºã®éèŠãªåŽé¢ã§ãããã¢ããªã±ãŒã·ã§ã³ãé害ã®ãã人ã ã§ã䜿çšã§ããããã«ããŸãã TypeScript ã䜿çšãããšãåå®å šæ§ãšéçåæãæäŸããããšã§ãããã¢ã¯ã»ã¹ããããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
- ã»ãã³ãã£ã㯠HTML ã䜿çšããŸã:
<article>ã<nav>ã<aside>ãªã©ã®ã»ãã³ãã£ã㯠HTML èŠçŽ ã䜿çšããŠãã³ã³ãã³ããè«ççã«æ§é åããŸãã - ç»åã«ä»£æ¿ããã¹ããæäŸããŸã:
alt屿§ã䜿çšããŠãç»åã®èšè¿°ããã¹ããæäŸããŸãã - ARIA 屿§ã䜿çšããŸã: ARIA 屿§ã䜿çšããŠãèŠçŽ ã®åœ¹å²ãç¶æ ãããã³ããããã£ã«é¢ããè¿œå æ å ±ãæäŸããŸãã
- ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ããŸã: è²ã®ã³ã³ãã©ã¹ããã§ãã«ãŒã䜿çšããŠãããã¹ããèæ¯ã«å¯ŸããŠååãªã³ã³ãã©ã¹ããæã£ãŠããããšã確èªããŸãã
- ããŒããŒãããã²ãŒã·ã§ã³ãæäŸããŸã: ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ãèŠçŽ ã«ãããŒããŒãã䜿çšããŠã¢ã¯ã»ã¹ããã³æäœã§ããããšã確èªããŸãã
äŸ: TypeScript ã䜿çšããŠãç»åã® alt 屿§ã®äœ¿çšã匷å¶ããŸãã alt 屿§ããã¹ãŠã® <img> èŠçŽ ã«ååšããããšãèŠæ±ããåãå®çŸ©ã§ããŸãã
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
alt: string;
}
function MyImage(props: ImageProps) {
return <img {...props} />;
}
// Usage
<MyImage src="image.jpg" alt="Description of the image" /> // Correct
// <MyImage src="image.jpg" /> // Error: alt is required
ãŠãŒã¹ã±ãŒã¹: ãã¹ãŠã® Web ã¢ããªã±ãŒã·ã§ã³ãç¹ã«å€æ§ãªãªãŒãã£ãšã³ã¹ã䜿çšããã¢ããªã±ãŒã·ã§ã³ãã¢ã¯ã»ã·ããªãã£ã¯ãã¢ããªã±ãŒã·ã§ã³ããã¹ãŠã®ãŠãŒã¶ãŒ (èœåã«é¢ä¿ãªã) ã§äœ¿çšã§ããããã«ããããã«äžå¯æ¬ ã§ããããšãã°ãæ¿åºã® Web ãµã€ãã¯ãé害ã®ãã人ã ãã¢ã¯ã»ã¹ã§ããå¿ èŠããããŸãã TypeScript ã䜿çšããŠãã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ãé©çšããWeb ãµã€ãã誰ãã䜿çšã§ããããã«ããããšãã§ããŸãã
TypeScript ããŒãããã: æªæ¥ãèŠæ®ããŠ
TypeScript ã¯åžžã«é²åããŠãããæ°ããæ©èœãšæ¹åã宿çã«è¿œå ãããŠããŸãã TypeScript ããŒãããããææ°ã®ç¶æ ã«ä¿ã€ããšã¯ãææ°ã®é²æ©ã掻çšããæå 端ã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãã
äž»ãªéç¹åé:
- åæšè«ã®æ¹å: TypeScript ã¯ãæç€ºçãªå泚éã®å¿ èŠæ§ãæžããããã«ãåæšè«ã·ã¹ãã ãç¶ç¶çã«æ¹åããŠããŸãã
- 颿°åããã°ã©ãã³ã°ã®ããè¯ããµããŒã: TypeScript ã¯ãã«ãªãŒåãäžå€æ§ãªã©ã颿°åããã°ã©ãã³ã°ãã©ãã€ã ããµããŒãããããã®æ°æ©èœã远å ããŠããŸãã
- æ¡åŒµãããããŒã«: TypeScript ã¯ãIDE ã®çµ±åãšãããã°æ©èœã®åäžãå«ããããŒã«ãµããŒããæ¹åããŠããŸãã
- ããã©ãŒãã³ã¹ã®æé©å: TypeScript ã¯ãã³ã³ãã€ã©ãšã©ã³ã¿ã€ã ããã©ãŒãã³ã¹ã®æé©åã«åãçµãã§ããŸãã
çµè«: æºãããªãåå®å šæ§ã®ããã® TypeScript ã®æ¡çš
TypeScript ã¯ãå ç¢ã§ã¹ã±ãŒã©ãã«ã§ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åŒ·åãªããŒã«ãšããŠç»å ŽããŸããããã®é«åºŠãªæ©èœãç¿åŸãããã¹ããã©ã¯ãã£ã¹ãæ¡çšãããã®ããŒãããããææ°ã®ç¶æ ã«ä¿ã€ããšã§ãTypeScript ã®å¯èœæ§ãæå€§éã«åŒãåºããæºãããªãåå®å šæ§ãå®çŸã§ããŸããæ¡ä»¶ä»ãåããããåã䜿çšããè€éãªåã¬ãã«ã®ããžãã¯ã®äœæãããããã©ãŒãã³ã¹ã®æé©åãã°ããŒãã«ã¢ã¯ã»ã·ããªãã£ã®ç¢ºä¿ãŸã§ãTypeScript ã¯ã倿§ãªåœéçãªãªãŒãã£ãšã³ã¹ã®èŠæ±ã«å¿ããé«å質ãªãœãããŠã§ã¢ãäœæããåãéçºè ã«äžããŸãã TypeScript ãæ¡çšããŠãåå®å šã§ä¿¡é Œæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ã®æªæ¥ãæ§ç¯ããŸãããã