TypeScriptでDXを上げろ！ Hono編

2025-07-14 / Zenncafe#3 日比谷

Transcript

1. 
   
   ;FOODBGF
   ೔ൺ୩ 5ZQF4DSJQUͰ%9Λ্͛Ζʂ
   )POPฤ :VTVLF
   8BEB
2. .F w :VTVLF
   8BEB
   w 8FC
   GSBNFXPSL
   EFWFMPQFS
   w 4FOJPS
   %FWFMPQFS
   "EWPDBUF
   !$MPVE fl BSF
   w #PLFUF
   DPGPVOEFS
   w $SFBUPS
   PG
   )POP
   w IUUQTHJUIVCDPNZVTVLFCF 
3. ࠓ೔ͷςʔϚ
   5ZQF4DSJQU 
4. 5ZQF4DSJQUͱ%9 w 5ZQF4DSJQU͸%FWFMPQFS
   &YQFSJFODF ։ൃऀମݧ
   Λ޲্ͤ͞Δ
   w ΤσΟλͷิ׬
   w ࣮ߦલʹΤϥʔʹؾͮ͘
   w υΩϡϝϯτ͕ͳͯ͘΋ʮͳΜͱͳ͘ʯઌ͕ಡΊΔ 
5. ྫ
   
   ϔομʔ໊ͷิ׬ 
6. )POPͱ5ZQF4DSJQU w ࠷ॳ͸+BWB4DSJQUͰ࡞ΒΕ͍͕ͯͨɺૣʑʹ5ZQF4DSJQU΁Ҡߦ
   w %9͕༏Ε͍ͯΔେ͖ͳཁҼʹ5ZQF4DSJQUͷܕαϙʔτΛڍ͍͛ͯΔ 
7. ܕʹ·ͭΘΔ֤τϐοΫΛ঺հ͠·͢ w DSFRQBSBN ͷিܸ
   w #JOEJOHT7BSJBCMFT
   w 31$ͷ஀ੜ
   w )POP
   31$ʹ͍ͭͯ
   w $MJFOU͸1SPYZʹܕΛ͚͍ͭͯΔ
   w 7BMJEBUPSͷઃܭ
   w ܕͷύϑΥʔϚϯε໰୊ 
8. DSFRQBSBNͷিܸ 
9. DSFRQBSBNͷিܸ w 13
   ʮ"EEFE
   UZQF
   UP
   DSFRQBSBN
   LFZʯͰಋೖ͞Εͨ
   w ύεύϥϝʔλͷΩʔ͕จࣈྻϦςϥϧܕʹͳΔ 
10. DSFRQBSBN
    ʹܕ͕ͭ͘  QPTUTDPNNFOUT QPTU*E
    
    
    DPNNFOU*E
    
    
11. ࣮૷
    
    DSFRQBSBN 
12. 
13. #JOEJOHT7BSJBCMFT 
14. #JOEJOHT7BSJBCMFT w #JOEJOHT
    
    $MPVE fl BSFɺ"84
    -BNCBEB
    FUDͷ؀ڥґଘͷม਺΍ΦϒδΣ Ϋτͷܕ
    w 7BSJBCMFT
    
    DTFUDHFUͰઃఆɾऔಘՄೳͳ஋ͷܕ 
15. ྫ
    
    #JOEJOHT7BSJBCMFT 
16. ྫ
    
    DFOWʹܕ͕ͭ͘ 
17. 5JQT
    
    $MPVEGMBSFͷ#JOEJOHT w AXSBOHMFS
    UZQFTAίϚϯυͰXSBOHMFSKTPODʹఆٛͨ͠#JOEJOHT ͔Βܕੜ੒ͯ͠XPSLFSDPO fi HVSBUJPOEUTΛ࡞ͬͯ͘ΕΔ 
18. 31$ͷ஀ੜ 
19. 31$ͷ஀ੜ w αʔόʔ͕͋ͬͯΫϥΠΞϯτ͕઀ଓ͢Δ৔߹ͷ࿩
    w ࠷ॳ͸U31$
    .JEEMFXBSFΛ࡞͍ͬͯͨ
    w )POPಠࣗͷ31$΋࡞ΕΔͷͰ͸ͳ͍͔ʁ
    w αʔόʔαΠυ͔ΒܕΛڞ༗
    w ΫϥΠΞϯτΛ৽ͭͬͯ͘͘͠ܕΛཧղ͢Δ 
20. U31$ w αʔόʔαΠυͰ"1*Λఆٛ
    w "1*ఆٛ ϝιουҾ਺ฦΓ஋ Λ5ZQF4DSJQUͷܕͰڞ༗
    w ΫϥΠΞϯταΠυͰܕΛಡΈࠐΉͱΫϥΠΞϯτͰܕ͕ޮ͘ 
21. U31$
    
    αʔόʔαΠυ IFMMPͱ͍͏ΤϯυϙΠϯτ͕
    RVFSZʹ{ name: string, age: number}Λ
    ظ଴͍ͯ͠Δ 
22. U31$
    
    ΫϥΠΞϯταΠυ AIFMMPRVFSZA͕ύεͱͯ͠ੜ͑Δ
    {name:string; age:number}͕
    Ҿ਺Ͱ͋Δ͜ͱ͕Θ͔Δ 
23. )POPಠࣗͷ31$Λ࡞Εͳ͍͔ w 13
    ʮUSQD
    BEBQUFSʯͷίϝϯτͰ ఏҊ͞Εͨ
    w ʮU31$Ͱ͸ͳ͘ɺ)POP༻ʹωΠςΟϒ ͷ1SPYZΫϥΠΞϯτΛ࡞੒͢Δํ͕ྑ ͍ͷͰ͸ͳ͍͔ʁͦͷํ͕ͣͬͱγϯϓ ϧͰ৴པੑ͕ߴ͍ͱࢥ͏ʯ  W
     Ͱ31$ػೳ͕ಋೖ
24. )POP
    31$ʹ͍ͭͯ 
25. )POPͷ31$ಛ௃ w ൚༻తͳόϦσʔλɺGFUDIϥούʔͷΫϥΠΞϯτ AIDA ΛAIPOPA͕ఏڙ
    w ;PEɺ7BMJCPUɺ"SL5ZQFͳͲόϦσʔγϣϯϥΠϒϥϦͰεΩʔϚఆٛ
    w όϦσʔγϣϯର৅
    ΫΤϦɺϑΥʔϜϘσΟɺ+40/ϘσΟɺϔομ
    FUD
    w Ϩεϙϯε͸ADKTPO AΛฦ͚ͩ͢
    w )POPΦϒδΣΫτͷܕΛڞ༗ͯ͠ΫϥΠΞϯτͷδΣωϦΫεʹ౉͢
    w ύεͱϦΫΤετ߲໨͕ิ׬͞ΕΔ
    w ฦ͖ͬͯͨ3FTQPOTFͱ+40/ϘσΟʹܕ͕͍͍ͭͯΔ 
26. "1*ͷྫ  (&5
    IFMMP OBNF)POP { message: “Hello Hono” } όϦσʔτ
    ⭕
    IFMMP OBNF)POP
    ❌
    IFMMP
    ❌
    IFMMP BHF
27. 
    εΩʔϚΛఆٛ͢Δ TFSWFSUT { name: string} Λظ଴͢Δɾݕূ͢Δ 
28. 
    όϦσʔλʹ౉͢ TFSWFSUT ྫ
    
    ⭕
    IFMMP OBNF)POP
    ❌
    IFMMP
    ❌
    IFMMP BHF 
29. 
    όϦσʔτͨ͠஋Λऔಘ͢Δ TFSWFSUT IFMMP OBNF)POP
    ͷ৔߹
    { name: “Hono” } ͕ೖΔ 
30. 
    ϨεϙϯεΛฦ͢ TFSWFSUT { message: string } ͕ฦΓ஋ͷܕͩͱఆٛ͞ΕΔ 
31. 
    αʔόͷܕΛFYQPSU͢Δ TFSWFSUT )POPΠϯελϯεͷܕΛऔΔ
    BQQHFU ͸ܕ͖ͭͷ)POPΠϯελ͢Λฦ͢ 
32. 
    AID AͷδΣωϦΫεʹαʔόͷܕΛ౉͢ DMJFOUUT 
33. 
    ύεͱҾ਺ʹܕ͕ͭ͘ DMJFOUUT (&5
    IFMMP OBNF)POP
    Λ͍ͯ͠Δ 
34. 
    ASFTKTPO Aʹ݁Ռʹܕ͕ͭ͘ DMJFOUUT { message: string } ͷܕ͕ͭ͘ 
35. εΩʔϚͷมߋΛͨ͠ΒܕΤϥʔ͕ग़Δ 
36. )POPΠϯελϯεͷฦΓ஋ͷܕ͕"1*Λද͢ (&5
    AIFMMPA
    ΫΤϦύϥϜʹOBNFΛظ଴͢Δ +40/Ϩεϙϯε
    ελʔςε
    
    { message: string } 
37. $MJFOU͸1SPYZʹܕΛ͚͍ͭͯΔ 
38. +BWB4DSJQUͷA1SPYZA w +BWB4DSJQUͷ1SPYZ͸ɺΦϒδΣΫτʹର͢Δૢ࡞ʢϓϩύςΟΞΫηεɺؔ ਺ݺͼग़͠ͳͲʣΛԣऔΓͯ͠ɺΧελϜͷಈ࡞ΛఆٛͰ͖Δ࢓૊Έ ྫ͑͹ύεͱϝιουΛνΣʔϯͰදݱͰ͖Δ ࣮૷ྫ 
39. ύεɺϝιουɺύϥϝʔλɺϨεϙϯεʹܕΛ͚͍ͭͯΔ Ϩεϙϯε ύεɾϝιου ύϥϝʔλ 
40. ݁Ռ ύε ϝιου ύϥϝʔλ Ϩεϙϯε 💡͋͘·ͰAGFUDIAͷϥούʔ ͳͷͰϨεϙϯε͸3FTQPOTF ΦϒδΣΫτ 
41. όϦσʔλͷઃܭ 
42. όϦσʔλͷઃܭ w AIPOPWBMJEBUPSA͸ബ͍
    w ϛυϧ΢ΣΞʹͳ͍ͬͯΔ
    w όϦσʔγϣϯϩδοΫΛ࣋ͨͳ͍
    w ର৅ͷ஋ΛόϦσʔγϣϯؔ਺ʹ౉͚ͩ͢
    w ܕఆٛ 
43. AIPOPWBMJEBUPSAΛૉͰ࢖͏ ΫΤϦύϥϝʔλͷ஋͕དྷΔ
    { name: “Hono” } ݕূͨ݁͠ՌΛฦ͢
    { name: “Hono” } ܕ͕ࣗಈతʹͭ͘
    { name: string } 
44. ;PE
    7BMJEBUPSͷ࣮૷ w AIPOPWBMJEBUPSAΛϥοϓ
    w όϦσʔγϣϯؔ਺Λ࣮૷
    w TDIFNBQBSTF
    ૬౰Λ࣮ߦ 
45. όϦσʔλϛυϧ΢ΣΞ w "SL5ZQF
    WBMJEBUPS
    w &GGFDU
    4DIFNB
    7BMJEBUPS
    w 4UBOEBSE
    4DIFNB
    7BMJEBUPS
    w 5ZQF#PY
    7BMJEBUPS
    w 5ZQJB
    7BMJEBUPS
    w VOLOPXOVUJM
    7BMJEBUPS
    w 7BMJCPU
    7BMJEBUPS
    w ;PE
    7BMJEBUPS 💡4UBOEBSE
    4DIFNBʹد͍ͤͯ͜͏ͱ͍͏࿩͕͋Δ 
46. ܕͷύϑΥʔϚϯε໰୊ 
47. ܕͷύϑΥʔϚϯε໰୊ w ܕఆ͕ٛෳࡶ
    w νΣʔϯ͢Δ͜ͱͰܕ͕ੵΈ্͕͍ͬͯ͘ 
48. ஗͘ͳΔ
    PS
    ܕΛࣦ͏ w ྫ
    w ϧʔτͷ਺͕ͩͱิ׬͕஗͍
    w ϧʔτͷ਺͕ͩͱܕΛࣦ͏ ͩͱBOZʹͳΔ 
49. ରࡦ w ܕఆٛΛγϯϓϧʹ͢Δ
    w ύϑΥʔϚϯεͷଌఆ
    w σόά͢Δ
    w UTHP΁ͷظ଴ 
50. ܕఆٛΛγϯϓϧʹ͢Δ w AUZQFTUTA
    w ෳࡶɾ৑௕ͩͬͨΓ͢Δ
    w  ߦ͋Δ 
51. ύϑΥʔϚϯεଌఆ w AUTD
    EJBHOPTUJDTA
    w $*Ͱଌఆ݁Ռ͕෼͔ΔΑ͏ʹͳ͍ͬͯΔ
    w 5PUBM
    UJNF͸͹Β͖͕ͭ͋Δ
    w *OTUBOUJOBUJPOTΛݟ͍ͯΔ 
52. σόά͢Δ w AUTD
    HFOFSBUF5SBDFA
    w ग़ྗͨ͠USBDFKTPOΛ$ISPNF ΍1FSGFUUPʹಡΈࠐ·ͤΔ 
53. UTHP΁ͷظ଴ w ίϯύΠϥ΍ΤσΟλଆͷύ ϑΥʔϚϯε্͕͕Ε͹͍͍ͱ ͍͏ൃ૝
    w AUTHPAͷ/BUJWF
    1SFWJFXͩͱ ݄ʹଌఆͯ͠ഒ଎͘ͳͬͨ 
54. ܕͷύϑΥʔϚϯε͸࠷ॏཁ՝୊ w ࠓ͸ϥϯλΠϜͷ࣮ߦΑΓ΋ܕ͕໰୊ʹͳΔ৔߹͕͋Δ
    w ͦ΋ͦ΋"1*Λม͑Δ͜ͱ΋͋Γ͏Δ
    w ؤுΓ·͢ 
55. ·ͱΊ 
56. ࠓ೔΍ͬͨ͜ͱ w DSFRQBSBN ͷিܸ
    w #JOEJOHT7BSJBCMFT
    w 31$ͷ஀ੜ
    w )POP
    31$ʹ͍ͭͯ
    w $MJFOU͸1SPYZʹܕΛ͚͍ͭͯΔ
    w 7BMJEBUPSͷઃܭ
    w ܕͷύϑΥʔϚϯε໰୊  )POP͸5ZQF4DSJQUΛ׆༻ͯ͠%9 Λ্͍͛ͯΔ
57. )POPΛࢀߟʹ
    5ZQF4DSJQUΛ׆༻ͯ͠Έ͍ͯͩ͘͞