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ʙϑϩϯτΤϯυʙ

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

  3. ࠓ೔࿩͢͜ͱ💬

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

  5. 2XJLͱ͸Կʁ

  6. None
  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ͷαΠζࠩΛ Θ͔Γ΍͘͢͢ΔͨΊɺ ૲ίϯϙʔωϯτͰແବʹσΧΠ [email protected]Λ஫ೖ

  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

    ΁ͷσϓϩΠ .PVTFIPWFSͰ௥Ճϩʔυ ॏ͍[email protected]͸͜͜ʹؚ·ΕΔ มԽͳ͠ ௥Ճϩʔυ͢Δ+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)ZESBUJPOJO+BWB4DSJQU'SBNFXPSLTJTTP$IBMMFOHJOH w IUUQTEFWUPUIJTJTMFBSOJOHXIZF ff i DJFOUIZESBUJPOJOKBWBTDSJQUGSBNFXPSLTJTTP DIBMMFOHJOHDB w 2XJL"OPIZESBUJPOJOTUBOUPOQFSTPOBMJ[FEXFCBQQMJDBUJPO w IUUQTXXXUIJTEPUDPCMPHRXJLBOPIZESBUJPOJOTUBOUPOQFSTPOBMJ[FEXFCBQQMJDBUJPO w )ZESBUJPOJT1VSF0WFSIFBE w IUUQTXXXCVJMEFSJPCMPHIZESBUJPOJTQVSFPWFSIFBE
  41. 8F"SF)JSJOH

  42. બߟ՝୊΋ެ։த💯