Resumable な JavaScript フレームワーク Qwik を学ぶ / qwik-resumable

Qiita Night 2022/10/21

Transcript

1. 3FTVNBCMF
   ͳ
   +BWB4DSJQU
   ϑϨʔϜϫʔΫ
   2XJL
   ΛֶͿ 
   2JJUB
   /JHIU
   ʙ
   ϑϩϯτΤϯυ
   ʙ
2. 
   
   
   
   
   !,BXBNBUB3ZP
   👨💻
   &OHJOFFS
   !-"13"4
   JOD
   🔥
   ݩফ๷࢜
   ❤
   5ZQF4DSJQU
   
   7VF
   
   %FOP
   3FBDU
   🏄
   ݒਨ
   ݸਓ։ൃ
3. ࠓ೔࿩͢͜ͱ
   💬
   
4. ɾ2XJLͱ͸Կ͔ʁ
   ɾ3FTVNBCMFͱ͸Կ͔ʁ ˞⚠
   ࣗ෼΋2XJLɺ3FTVNBCMFʹ͍ͭͯษڧதͷ਎ͳͷͰෆਖ਼֬ͳ৘ใ͕͋ Δ͔΋஌Ε·ͤΜɻԿ͔͋Ε͹5XJUUFSͰڭ͑ͯ΋Β͑Δͱخ͍͠Ͱ͢
   🙇
5. 2XJLͱ͸Կʁ
7. RXJL CVJMEFSJP
   ͕։ൃ͍ͯ͠Δ
   +BWB4DSJQU
   ϑϨʔϜϫʔΫ
   ˞
   
   ʹϕʔλ൛͕ϦϦʔε ˞
   ϑϨʔϜϫʔΫΑΓϥΠϒϥϦͰ͸ʁͱ͍͏ํ΋͍Δ͔΋Ͱ͕͢ɺ ຊϓϨθϯͰ͸%PDVNFOUʹهࡌͷ͋ΔϑϨʔϜϫʔΫʹ౷Ұ͠·͢
8. RXJL "OHVMBS
   (JO
   *POJDͳͲͷஶ໊ͳ։ൃऀ͕։ൃʹؔ༩ .JãLP
   )FWFSZ .BOV
   "MNFJEB "EBN
   #SBEMFZ
9. RXJL 3FBDU
   ϥΠΫʹ
   +49
   Ͱ
   ίϯϙʔωϯτΛهड़
10. RXJL ΞϓϦέʔγϣϯͷن໛ʹΑͬͯॳظϩʔυͷ
    +4ͷαΠζ͕มΘΒͳ͍ॳͷ
    0 
    ϑϨʔϜϫʔΫ https://www.builder.io/blog/hydration-is-pure-overhead
11. RXJL 443࣌ͷ)ZESBUJPOΛͳ͘͠ɺ3FTVNBCMF
    ͰϦΞΫςΟϒΛ୲อ https://www.builder.io/blog/hydration-is-pure-overhead
12. ͳΜ͔ੌͦ͏
    
    Ͱ΋ɺ3FTVNBCMF
    ͕શવΘ͔ΒΜ
    😇
13. ͬ͘͟Γཧղ͢Δ3FTVNBCMF
14. 3FTVNBCMF
    
    )ZESBUJPOͷ໰୊Λվળͨ͠΋ͷ
15. ͦ΋ͦ΋
    )ZESBUJPO
    ͱ͸ʁ🤔
16. 443΍44(ʹͯαʔόʔαΠυͰϨϯμϦϯά͞Εͨ )5.-ʹରͯ͠
    ΠϕϯτϦεφΛొ࿥͠ɺ
    ϖʔδΛϦΞΫςΟϒʹ͢Δ·ͰͷҰ࿈ͷॲཧͷ͜ͱɻ https://www.builder.io/blog/hydration-is-pure-overhead
17. ͜ΕͷԿ͕໰୊ʁ🤔
18. ద੾ͳՕॴʹద੾ͳΠϕϯτϦεφΛొ࿥͢ΔͨΊʹ͸ɺ
    ΫϥΠΞϯτͰ΋ϨϯμϦϯάʢ7%0.ʣΛߦ͍ΞϓϦέʔγϣϯ ͱϑϨʔϜϫʔΫͷঢ়ଶΛ෮ݩ͢Δඞཁ͕͋Δɻ
19. طʹҰ౓αʔόʔαΠυͰ)5.-Խ͞Ε͍ͯΔίϯϙʔωϯτͷ +4Λ࠶౓μ΢ϯϩʔυ͠ɺύʔε
    
    ࣮ߦ͢Δඞཁ͕͋Δɻ Φʔόʔϔου ద੾ͳՕॴʹద੾ͳΠϕϯτϦεφΛొ࿥͢ΔͨΊʹ͸ɺ
    ΫϥΠΞϯτͰ΋ϨϯμϦϯάʢ7%0.ʣΛߦ͍ΞϓϦέʔγϣϯ ͱϑϨʔϜϫʔΫͷঢ়ଶΛ෮ݩ͢Δඞཁ͕͋Δɻ
20. Ͳ͏ղফ͢Δ
    
    🤔
21. w )ZESBUJPO
    ͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ
22. w )ZESBUJPO
    ͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ 3FBDU
    ͷ4FMFDUJWF
    )ZESBUJPO
    
23. w )ZESBUJPO
    ͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ "TUSP
    'SFTIͷ
    *TMBOET
    "SDIJUFDUVSF
24. w )ZESBUJPO
    ͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ 2XJLͷ3FTVNBCMF
25. )5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δͱ͸ʁ🤔
26. Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
27. ίϯϙʔωϯτ΍ϦΞΫςΟϒͷର৅Λ
    )5.-ίϝϯτͰϚʔΩϯά Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
28. ಺෦ߏ଄ΛશͯଐੑͰهड़
    DMJDLͷϋϯυϥ͸ɺ஗ԆಡΈࠐΈ͢Δ+4ϑΝΠϧΛࢦఆ Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
29. ΞϓϦέʔγϣϯ΍ϑϨʔϜϫʔΫͷঢ়ଶ΋ɺ
    γϦΞϥΠζͯ͠TDSJQUͰهड़ Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
30. งғؾ͸ཧղ͕ͨ͠ɺɺ
    ࣮ࡍʹಈ͘΍ͭΛݟͯΈ͍ͨ
    👀
31. https://qwik-sample-app.pages.dev/
32. https://qwik-sample-app.pages.dev/ 2XJLͷಈ࡞֬ೝͷҝʹ࡞ͬͨɺ
    (JU)VC
    ͷ૲Λࢥ͍ͷ··ʹੜ΍ͤΔδϣʔΫΞϓϦ🪴
33. https://qwik-sample-app.pages.dev/ ଞϑϨʔϜϫʔΫͱͷಈ࡞Λݕূ͢ΔͨΊɺ
    ಉ಺༰Ͱ/FYUKT൛΋࡞੒ https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ https://qwik-sample-app.pages.dev/ ※ Vercel΁ͷσϓϩΠ ※ Cloud fl are Pages ΁ͷσϓϩΠ WT
34. https://qwik-sample-app.pages.dev/ ϩʔυ͢Δ+4ͷαΠζࠩΛ
    Θ͔Γ΍͘͢͢ΔͨΊɺ
    ૲ίϯϙʔωϯτͰແବʹσΧΠ OPEF@NPEVMFΛ஫ೖ
35. https://qwik-sample-app.pages.dev/ ॳظϩʔυ͢Δ+4ͷαΠζൺֱ /FYUKT 2XJL https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ https://qwik-sample-app.pages.dev/ ※ Vercel΁ͷσϓϩΠ ※ Cloud fl are Pages ΁ͷσϓϩΠ /FYUʹൺ΂Δͱͱͯ΋খ͍͞
36. https://qwik-sample-app.pages.dev/ https://qiita-lt-sandbox-next-kawamataryo.vercel.app/ https://qwik-sample-app.pages.dev/ ※ Vercel΁ͷσϓϩΠ ※ Cloud fl are Pages ΁ͷσϓϩΠ .PVTF
    IPWFSͰ௥Ճϩʔυ
    ॏ͍OPEF@NPEVMF͸͜͜ʹؚ·ΕΔ มԽͳ͠ ௥Ճϩʔυ͢Δ+4ͷαΠζൺֱ /FYUKT 2XJL
37. ·ͱΊ
38. ɾ2XJL
    ͸
    3FTVNBCMF
    Λίϯηϓτʹ࡞ΒΕͨ
    
    
    
    
    ৽͍͠+BWBT4DSJQUϑϨʔϜϫʔΫ
    ɾ3FTVNBCMF
    ͸
    )ZESBUJPO
    ͷ໰୊Λɺ)5.-΁ͷঢ়ଶͷγϦ ΞϥΠζͱ஗ԆϩʔυͰղܾ͠Α͏ͱ͢ΔΞϓϩʔν
    ɾ 3FTVNBCMF
    ͷΑ͏ʹ)ZESBUJPOΛۃྗͳ͘͢ͱ͍͏ߟ͑͸ ࠓޙॏཁʹͳΓͦ͏
39. ɾ2XJL
    ͸
    3FTVNBCMF
    Λίϯηϓτʹ࡞ΒΕͨ
    
    
    
    
    ৽͍͠+BWBT4DSJQUϑϨʔϜϫʔΫ
    ɾ3FTVNBCMF
    ͸
    )ZESBUJPO
    ͷ໰୊Λɺ)5.-΁ͷঢ়ଶͷγϦ ΞϥΠζͱ஗ԆϩʔυͰղܾ͠Α͏ͱ͢ΔΞϓϩʔν
    ɾ 3FTVNBCMF
    ͷΑ͏ʹ)ZESBUJPOΛۃྗͳ͘͢ͱ͍͏ߟ͑͸ ࠓޙॏཁʹͳΓͦ͏ 7VFKT
    Ͱ΋2XJLΛࢀߟʹ3FTVNBCMFͷ֓೦ΛऔΓೖΕΔΒ͍͠
    ʢ7VF
    'FT
    
    &WBO
    :PV
    ΩʔϊʔτΑΓʣ
40. ࢀߟࢿྉ w 2XJL
    %PDVNFOU
    w IUUQTRXJLCVJMEFSJP
    w 2XJLͱ͍͏ϑϨʔϜϫʔΫʹ͍ͭͯ
    w IUUQTMFBMPHIBUFCMPKQFOUSZ
    w ϦδϡʔϜՄೳͳ+BWBTDSJQUϑϨʔϜϫʔΫ2XJLͱ͸
    w IUUQTXXXJOGPRDPNKQOFXTRXJLKBWBTDSJQUGSBNFXPSL
    w 2XJL
    $JUZ
    Ͱ࡞ΔϒϩάΞϓϦ
    w IUUQT[FOOEFWB[VLJB[VTBBSUJDMFTCMPHBQQCVJMUXJUIRXJLDJUZ
    w 8IZ
    & ffi DJFOU
    )ZESBUJPO
    JO
    +BWB4DSJQU
    'SBNFXPSLT
    JT
    TP
    $IBMMFOHJOH
    w IUUQTEFWUPUIJTJTMFBSOJOHXIZF ff i DJFOUIZESBUJPOJOKBWBTDSJQUGSBNFXPSLTJTTP DIBMMFOHJOHDB
    w 2XJL
    "
    OPIZESBUJPO
    JOTUBOUPO
    QFSTPOBMJ[FE
    XFC
    BQQMJDBUJPO
    w IUUQTXXXUIJTEPUDPCMPHRXJLBOPIZESBUJPOJOTUBOUPOQFSTPOBMJ[FEXFCBQQMJDBUJPO
    w )ZESBUJPO
    JT
    1VSF
    0WFSIFBE
    w IUUQTXXXCVJMEFSJPCMPHIZESBUJPOJTQVSFPWFSIFBE
41. 8F
    "SF
    )JSJOH
    
42. બߟ՝୊΋ެ։த
    
    💯