Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ryo
October 21, 2022

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

Qiita Night 2022/10/21

ryo

October 21, 2022
Tweet

More Decks by ryo

Other Decks in Technology

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