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

Qiita Night 2022/10/21

Transcript

1. 3FTVNBCMFͳ+BWB4DSJQUϑϨʔϜϫʔΫ
   2XJLΛֶͿ
   2JJUB/JHIUʙϑϩϯτΤϯυʙ
   

   View Slide

2. !,BXBNBUB3ZP
   👨💻&OHJOFFS!-"13"4JOD
   🔥ݩফ๷࢜
   ❤ 5ZQF4DSJQU 7VF %FOP 3FBDU
   🏄ݒਨ ݸਓ։ൃ
   

   View Slide

3. ࠓ೔࿩͢͜ͱ💬
   

   View Slide

4. ɾ2XJLͱ͸Կ͔ʁ
   ɾ3FTVNBCMFͱ͸Կ͔ʁ
   ˞⚠ࣗ෼΋2XJLɺ3FTVNBCMFʹ͍ͭͯษڧதͷ਎ͳͷͰෆਖ਼֬ͳ৘ใ͕͋
   Δ͔΋஌Ε·ͤΜɻԿ͔͋Ε͹5XJUUFSͰڭ͑ͯ΋Β͑Δͱخ͍͠Ͱ͢🙇
   

   View Slide

5. 2XJLͱ͸Կʁ
   

   View Slide

6. View Slide

7. RXJL
   CVJMEFSJP͕։ൃ͍ͯ͠Δ+BWB4DSJQUϑϨʔϜϫʔΫ˞
   ʹϕʔλ൛͕ϦϦʔε
   ˞ϑϨʔϜϫʔΫΑΓϥΠϒϥϦͰ͸ʁͱ͍͏ํ΋͍Δ͔΋Ͱ͕͢ɺ
   ຊϓϨθϯͰ͸%PDVNFOUʹهࡌͷ͋ΔϑϨʔϜϫʔΫʹ౷Ұ͠·͢
   

   View Slide

8. RXJL
   "OHVMBS (JO *POJDͳͲͷஶ໊ͳ։ൃऀ͕։ൃʹؔ༩
   .JãLP)FWFSZ .BOV"MNFJEB "EBN#SBEMFZ
   

   View Slide

9. RXJL
   3FBDUϥΠΫʹ+49Ͱ
   ίϯϙʔωϯτΛهड़
   

   View Slide

10. RXJL
    ΞϓϦέʔγϣϯͷن໛ʹΑͬͯॳظϩʔυͷ
    +4ͷαΠζ͕มΘΒͳ͍ॳͷ0
    ϑϨʔϜϫʔΫ
    https://www.builder.io/blog/hydration-is-pure-overhead
    

    View Slide

11. RXJL
    443࣌ͷ)ZESBUJPOΛͳ͘͠ɺ3FTVNBCMFͰϦΞΫςΟϒΛ୲อ
    https://www.builder.io/blog/hydration-is-pure-overhead
    

    View Slide

12. ͳΜ͔ੌͦ͏
    Ͱ΋ɺ3FTVNBCMF͕શવΘ͔ΒΜ😇
    

    View Slide

13. ͬ͘͟Γཧղ͢Δ3FTVNBCMF
    

    View Slide

14. 3FTVNBCMF
    )ZESBUJPOͷ໰୊Λվળͨ͠΋ͷ
    

    View Slide

15. ͦ΋ͦ΋)ZESBUJPOͱ͸ʁ🤔
    

    View Slide

16. 443΍44(ʹͯαʔόʔαΠυͰϨϯμϦϯά͞Εͨ
    )5.-ʹରͯ͠ΠϕϯτϦεφΛొ࿥͠ɺ
    ϖʔδΛϦΞΫςΟϒʹ͢Δ·ͰͷҰ࿈ͷॲཧͷ͜ͱɻ
    https://www.builder.io/blog/hydration-is-pure-overhead
    

    View Slide

17. ͜ΕͷԿ͕໰୊ʁ🤔
    

    View Slide

18. ద੾ͳՕॴʹద੾ͳΠϕϯτϦεφΛొ࿥͢ΔͨΊʹ͸ɺ
    ΫϥΠΞϯτͰ΋ϨϯμϦϯάʢ7%0.ʣΛߦ͍ΞϓϦέʔγϣϯ
    ͱϑϨʔϜϫʔΫͷঢ়ଶΛ෮ݩ͢Δඞཁ͕͋Δɻ
    

    View Slide

19. طʹҰ౓αʔόʔαΠυͰ)5.-Խ͞Ε͍ͯΔίϯϙʔωϯτͷ
    +4Λ࠶౓μ΢ϯϩʔυ͠ɺύʔε࣮ߦ͢Δඞཁ͕͋Δɻ
    Φʔόʔϔου
    ద੾ͳՕॴʹద੾ͳΠϕϯτϦεφΛొ࿥͢ΔͨΊʹ͸ɺ
    ΫϥΠΞϯτͰ΋ϨϯμϦϯάʢ7%0.ʣΛߦ͍ΞϓϦέʔγϣϯ
    ͱϑϨʔϜϫʔΫͷঢ়ଶΛ෮ݩ͢Δඞཁ͕͋Δɻ
    

    View Slide

20. Ͳ͏ղফ͢Δ 🤔
    

    View Slide

21. w )ZESBUJPOͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ
    

    View Slide

22. w )ZESBUJPOͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ
    3FBDUͷ4FMFDUJWF)ZESBUJPO
    

    View Slide

23. w )ZESBUJPOͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ
    "TUSP 'SFTIͷ*TMBOET"SDIJUFDUVSF
    

    View Slide

24. w )ZESBUJPOͷ࣮ߦΛඇಉظԽ͠஗Ԇͤ͞Δ
    w )ZESBUJPOΛߦ͏෦෼Λݶఆͯ͠෼཭͢Δ
    w )ZESBUJPOΛߦΘͣ)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δ
    2XJLͷ3FTVNBCMF
    

    View Slide

25. )5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δͱ͸ʁ🤔
    

    View Slide

26. Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
    

    View Slide

27. ίϯϙʔωϯτ΍ϦΞΫςΟϒͷର৅Λ
    )5.-ίϝϯτͰϚʔΩϯά
    Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
    

    View Slide

28. ಺෦ߏ଄ΛશͯଐੑͰهड़
    DMJDLͷϋϯυϥ͸ɺ஗ԆಡΈࠐΈ͢Δ+4ϑΝΠϧΛࢦఆ
    Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
    

    View Slide

29. ΞϓϦέʔγϣϯ΍ϑϨʔϜϫʔΫͷঢ়ଶ΋ɺ
    γϦΞϥΠζͯ͠TDSJQUͰهड़
    Χ΢ϯλʔίϯϙʔωϯτͷ443ϨϯμϦϯά݁Ռ
    

    View Slide

30. งғؾ͸ཧղ͕ͨ͠ɺɺ
    ࣮ࡍʹಈ͘΍ͭΛݟͯΈ͍ͨ👀
    

    View Slide

31. https://qwik-sample-app.pages.dev/
    

    View Slide

32. https://qwik-sample-app.pages.dev/
    2XJLͷಈ࡞֬ೝͷҝʹ࡞ͬͨɺ
    (JU)VCͷ૲Λࢥ͍ͷ··ʹੜ΍ͤΔδϣʔΫΞϓϦ🪴
    

    View Slide

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
    

    View Slide

34. https://qwik-sample-app.pages.dev/
    ϩʔυ͢Δ+4ͷαΠζࠩΛ
    Θ͔Γ΍͘͢͢ΔͨΊɺ
    ૲ίϯϙʔωϯτͰແବʹσΧΠ
    OPEF@NPEVMFΛ஫ೖ
    

    View Slide

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ʹൺ΂Δͱͱͯ΋খ͍͞
    

    View Slide

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 ΁ͷσϓϩΠ
    .PVTFIPWFSͰ௥Ճϩʔυ
    ॏ͍OPEF@NPEVMF͸͜͜ʹؚ·ΕΔ
    มԽͳ͠
    ௥Ճϩʔυ͢Δ+4ͷαΠζൺֱ
    /FYUKT 2XJL
    

    View Slide

37. ·ͱΊ
    

    View Slide

38. ɾ2XJL͸3FTVNBCMFΛίϯηϓτʹ࡞ΒΕͨ
    ৽͍͠+BWBT4DSJQUϑϨʔϜϫʔΫ
    ɾ3FTVNBCMF͸)ZESBUJPOͷ໰୊Λɺ)5.-΁ͷঢ়ଶͷγϦ
    ΞϥΠζͱ஗ԆϩʔυͰղܾ͠Α͏ͱ͢ΔΞϓϩʔν
    ɾ 3FTVNBCMFͷΑ͏ʹ)ZESBUJPOΛۃྗͳ͘͢ͱ͍͏ߟ͑͸
    ࠓޙॏཁʹͳΓͦ͏
    

    View Slide

39. ɾ2XJL͸3FTVNBCMFΛίϯηϓτʹ࡞ΒΕͨ
    ৽͍͠+BWBT4DSJQUϑϨʔϜϫʔΫ
    ɾ3FTVNBCMF͸)ZESBUJPOͷ໰୊Λɺ)5.-΁ͷঢ়ଶͷγϦ
    ΞϥΠζͱ஗ԆϩʔυͰղܾ͠Α͏ͱ͢ΔΞϓϩʔν
    ɾ 3FTVNBCMFͷΑ͏ʹ)ZESBUJPOΛۃྗͳ͘͢ͱ͍͏ߟ͑͸
    ࠓޙॏཁʹͳΓͦ͏
    7VFKTͰ΋2XJLΛࢀߟʹ3FTVNBCMFͷ֓೦ΛऔΓೖΕΔΒ͍͠
    ʢ7VF'FT&WBO:PVΩʔϊʔτΑΓʣ
    

    View Slide

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)ZESBUJPOJO+BWB4DSJQU'SBNFXPSLTJTTP$IBMMFOHJOH
    w IUUQTEFWUPUIJTJTMFBSOJOHXIZF
    ff i
    DJFOUIZESBUJPOJOKBWBTDSJQUGSBNFXPSLTJTTP
    DIBMMFOHJOHDB
    w 2XJL"OPIZESBUJPOJOTUBOUPOQFSTPOBMJ[FEXFCBQQMJDBUJPO
    w IUUQTXXXUIJTEPUDPCMPHRXJLBOPIZESBUJPOJOTUBOUPOQFSTPOBMJ[FEXFCBQQMJDBUJPO
    w )ZESBUJPOJT1VSF0WFSIFBE
    w IUUQTXXXCVJMEFSJPCMPHIZESBUJPOJTQVSFPWFSIFBE
    

    View Slide

41. 8F"SF)JSJOH
    

    View Slide

42. બߟ՝୊΋ެ։த💯
    

    View Slide