Honoをフロントエンドで使う 3つのやり方

LINEヤフー × Deno Land Inc. Meetup
2025-02-17 Yusuke Wada

Transcript

1. 
   :VTVLF
   8BEB )POPΛϑϩϯτΤϯυͰ࢖͏
   ͭͷ΍Γํ -*/&Ϡϑʔ
   ʷ
   %FOP
   -BOE
   *OD
   .FFUVQ
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. ࠓ೔͸
   ʮ)POPΛϑϩϯτΤϯυʹ࢖͏ʯ
   ͜ͱʹ͍ͭͯ࿩͠·͢
4. ˎ஫ҙࣄ߲ w ࠓճ͸ಛఆͷϥϯλΠϜʹݶͬͨ࿩Ͱ͸͋Γ·ͤΜ
   w ڞ௨෦෼ͷ࿩Λ͠·͕͢ɺ͋ΔϥϯλΠϜͰ͸ಈ͔ͳ͍͔΋͠Ε·ͤΜ
   w ʮ%FOPͰ͸ಈ͔ͳ͍ʯ΋͋Δ͔΋͠Ε·ͤΜ
   w ޙ΄ͲରԠ͢ΔՄೳੑ͕͋Δ
   w ߟ͑ํ͸ಉ͡Ͱ͢
5. ϑϩϯτΤϯυͱ͸ Ϣʔβʔ͕γεςϜͱ௚઀৮ΕΔͱ͜Ζ ˓)5.-ɺը૾ɺ$44ɺΞηοτɺΠϯλϥΫγϣϯ
   ʷ+40/ɺ9.-ɺ(SBQI2-
   FUD
6. )POP͸ݩʑόοΫΤϯυΛ໨తʹ࡞ΒΕͨ w ύϥϝʔλ͔ΒσʔλΛऔಘ͠ +40/Ͱฦ͢
   w ΦϦδϯʹΞΫηε͠ϨεϙϯεΛ ฦ͢ϦόʔεϓϩΩγ
   w ϔομɺ63-ͷݕূ
   w ύεΛݩʹϦμϨΫτͤ͞Δ
   w FUD
7. )POP͸ϑϩϯτΤϯυʹ΋࢖͑Δ 
   )POPࣗମ͕ϑϩϯτΤϯυ Λఏڙ͢Δ 
   )POPͷ্ʹϑϩϯτΤϯυ ϑϨʔϜϫʔΫ ΛͷͤΔ 
   ϑϩϯτΤϯυ ϑϨʔϜ ϫʔΫ ͷதͰ)POPΛ࢖͏
8. )POPΛϑϩϯτΤϯυͰ࢖͏ͭͷํ๏Λ঺հ  )POPࣗମ͕ϑϩϯτΤϯυΛఏڙ͢Δ
   wαʔόʔαΠυϨϯμϦϯά
   
   IPOPKTY
   
   IUNM
   ϔϧύʔ
   3FBDU
   FUD
   wΫϥΠΞϯτ΋ؚΉ
   
   IPOPKTYEPN
   
   )POP9
   FUD
    )POPͷ্ʹϑϩϯτΤϯυϑϨʔϜϫʔΫΛͷͤΔ
   w IPOPSFBDUSPVUFSBEBQUFS
    ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ)POPΛ࢖͏
   w /FYUKT
   
   7FSDFM
   "EBQUFS
9. 
   )POPࣗମ͕
   ϑϩϯτΤϯυΛఏڙ͢Δ
10. αʔόʔαΠυϨϯμϦϯά )POPͷΞϓϦ͕)5.-ΛϨϯμϦϯά͢Δ
11. ௚઀)5.-Λग़ྗ͢Ε͹͍͍ จࣈྻϦςϥϧͰ)5.-Λॻ͘
12. +49͕࢖͑Δ )POPͰ͸ςϯϓϨʔτΤϯδϯͷ୅ΘΓʹαʔόʔαΠυ+49Λ࢖͏  UTDPO fi HKTPOͰAIPOPKTYAΛࢦఆ
     ֦ுࢠΛUTYʹม͑Δ UTDPO fi HKTPO
13. IPOPKTY 3FBDUͱಉ͡Α͏ͳ+49͕ॻ͚Δ
    +49ΛDIUNMʹ౉͚ͩ͢ͰαʔόʔαΠυϨϯμϦϯά͞ΕΔ
14. IUNMϔϧύʔ ʮIUNMϦςϥϧʯΛ࢖͑ͯม਺ͷจࣈྻ͕Τεέʔϓ͞ΕΔ
    ʮMJUIUNM
    74$PEF֦ுʯͳͲ࢖͏ͱγϯλοΫεϋΠϥΠτ͕͖͘
15. 3FBDU౳΋࢖͑Δ 3FBDUΛΠϯετʔϧ͠UTDPO fi HKTPOΛద੾ʹઃఆ͢Δ
    SFOEFS5P3FBEBCMF4USFBNʹ+49౉͢ͱ3FBCMF4USFBN͕ͱΕΔ
16. DTFU3FOEFSFS
    
    DSFOEFS DTFU3FOEFSFSͰϨϯμϥʔΛઃఆՄೳ
    ίϯςϯπΛ΋Βͬͯ3FTQPOTFΛฦ͢
    DSFOEFSͰίϯςϯπΛ౉͢
    ྫ
    +49λά
17. IPOPKTYͷ໘ന͍ػೳ "TZOD
    $PNQPOFOUΛͦͷ··
    DIUNMͰϨϯμϦϯάͰ͖Δ
    4VTQFOTF͕αʔόʔαΠυͷ
    ࣮૷͚ͩͰಈ͘
    &SSPS#PVOEBSZ͕͋Δ 4VTQFOTFͷྫ
18. ΫϥΠϯτ΋ؚΉ )POPͰαʔόʔαΠυϨϯμϦϯά
    ͦΕʹΫϥΠϯτͷΠϯλϥΫγϣϯΛ଍͢
19. ΫϥΠΞϯτίϯϙʔωϯτͱ7JUF ΫϥΠΞϯτͰಈ͘ίϯϙʔωϯτΛϏϧυͭͭ͠)POPͰಈ͔͢ඞཁ͕͋Δ
    7JUFͱ!IPOPWJUFEFWTFSWFSΛ࢖͏ WJUFDPO fi HUT
    )POPΞϓϦΛࢦఆ͢Δͱ։ൃαʔόʔ্ཱ͕͕ͪΔ
20. αʔόʔ͔Βࢀর͍ͯ͠ΔΫϥΠΞϯτίʔυ΋Ϗϧυ͞ΕΔ
21. 41" "1*͕࡞ΕΔ AA
    w Ψϫͷ)5.-
    w +BWB4DSJQUͷϖʔδΛϚ΢ϯτ͢Δ
    w IPOPKTYEPN΍3FBDUΛ࢖͏
    ABQJA
    w "1*ΤϯυϙΠϯτ
22. TSDJOEFYUTY
23. TSDDMJFOUUTY
24. )POP9 443ͭͭ͠ΠϯλϥΫγϣϯΛ͚͍ͭͨ࣌ʹ࢖͑Δ
    7JUFͱ)POPΛ࢖ͬͨϝλϑϨʔϜϫʔΫ IUUQTHJUIVCDPNIPOPKTIPOPY
25. *TMBOET
    )ZESBUJPO *TMBOEίϯϙʔωϯτ͸443͞ΕɺΠϯλϥΫγϣϯ͕஫ೖ͞ΕΔ
26. *TMBOEίϯϙʔωϯτ BQQSPVUFTDPVOUFSUTY
27. ϧʔτఆٛ BQQSPVUFTJOEFYUTY
28. $PVOUFSίϯϙʔωϯτ ϨϯμϦϯά͞Εͨ)5.-ʹΫϥΠΞϯτͷΠϯλϥΫγϣϯ͕஫ೖ͞ ΕΔ
29. 
    )POPͷ্ʹ
    ϑϩϯτΤϯυϑϨʔϜϫʔΫΛͷͤΔ
30. )POPͷ্ʹϑϩϯτΤϯυϑϨʔϜϫʔΫΛͷͤΔ 8FC
    "1*ͷ3FRVFTU3FTQPOTFΛ࢖͍ͬͯͨΒͷͤΔ͜ͱ͕Ͱ͖Δ
    ϑϩϯτΤϯυΞϓϦΛ.JEEMFXBSFʹͯ͠)POPΞϓϦͰಈ͔͢
31. IPOPSFBDUSPVUFSBEBQUFS 3FBDU
    3PVUFSΛ)POPͷ্Ͱಈ͔ͨ͢ΊͷΞμϓλ
    7JUFͷϓϥάΠϯͱ֤ϓϥοτϑΥʔϜͰಈ͔ͨ͢Ίͷϋϯυϥͷηοτ WJUFDPO fi HUT
32. )POPΞϓϦ
    3FNJYΞϓϦͷॱͰ࣮ߦ͞ΕΔ
33. ͭͷخ͍͜͠ͱ  "1*Λੜ΍ͤΔ
     )POPͷ.JEEMFXBSF͕࢖͑Δ TFSWFSJOEFYUT ABQJA
    w "1*
    ABENJO A
    w #BTJDೝূϛυϧ΢ΣΞదԠ
34. ಺෦࣮૷͸γϯϓϧ
35. 
    ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ
    )POPΛ࢖͏
36. ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ)POPΛ࢖͏ ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͷʮ"1*ϧʔτʯͰ)POPΛಈ͔͢
    "1*ΛΫϥΠΞϯτ͔Βୟ͘
    31$ػೳ͕࢖͑Δ
37. /FYUKTͷதͰ࢖͏ 7FSDFM
    
    "EBQUFS
    BQJͷΩϟονΦʔϧʹஔ͘ BQQBQJ<<SPVUF>>SPVUFUT
38. 13$Λ࢖͏͜ͱ͕Ͱ͖Δ ΫϥΠΞϯτ͔Β"1*ͷఆٛΛ5ZQF4DSJQUͷܕͱͯ͠஌Δ͜ͱ͕Ͱ͖Δ
41. Ҏ্
    ·ͱΊ
42. ·ͱΊ )POPͰ΋ͭͷ΍ΓํͰϑϩϯτΤϯυΛ࡞Δ͜ͱ͕Ͱ͖Δ  )POPࣗମ͕ϑϩϯτΤϯυΛఏڙ͢Δ
    wαʔόʔαΠυϨϯμϦϯά
    wΫϥΠΞϯτ΋ؚΉ
     )POPͷ্ʹϑϩϯτΤϯυϑϨʔϜϫʔΫΛͷͤΔ
    w IPOPSFBDUSPVUFSBEBQUFS
     ϑϩϯτΤϯυϑϨʔϜϫʔΫͷதͰ)POPΛ࢖͏
    w /FYUKT
    
    7FSDFM
    "EBQUFS
43. ऴΘΓ