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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ💬

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

2XJLͱ͸Կʁ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

RXJL 3FBDUϥΠΫʹ+49Ͱ ίϯϙʔωϯτΛهड़

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ͬ͘͟Γཧղ͢Δ3FTVNBCMF

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ͦ΋ͦ΋)ZESBUJPOͱ͸ʁ🤔

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

͜ΕͷԿ͕໰୊ʁ🤔

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Ͳ͏ղফ͢Δ 🤔

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

)5.-ʹঢ়ଶΛγϦΞϥΠζ͢Δͱ͸ʁ🤔

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

·ͱΊ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

ࢀߟࢿྉ 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