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

リアクティブを知る1歩

Aipa
October 10, 2023

 リアクティブを知る1歩

「v-okinawa Meetup #6 LT大会」でLTした内容です。

https://v-okinawa.connpass.com/event/289444/

Aipa

October 10, 2023
Tweet

More Decks by Aipa

Other Decks in Technology

Transcript

  1. ϦΞΫςΟϒΛ஌Δา
    WPLJOBXB
    BJQBDPNNBOEFS!ಹ೼

    View full-size slide

  2. ࣗݾ঺հ
    w ΞΠύʔୂ௕ͱ͍͍·͢ !BJQBDPNNBOEFS

    w ͏ͪͳʔΜͪΎͰ͢
    w $#DMPVEגࣜձࣾͰಇ͍͍ͯ·͢
    w ෺ྲྀۀքͰΠϊϕʔγϣϯىͨͯ͘͜͠೔ʑؤு͍ͬͯ·͢
    w 7VF/VYUͰྼԽͨ͠7νϡʔόʔʹͳͬͨΓɺ7VF/VYU
    ͰίʔϧηϯλʔΈ͍ͨͳ෦ॺ޲͚ͷ8FCΞϓϦ࡞ͬͨΓͯ͠·͢

    View full-size slide

  3. એ఻ᶃ'MVUUFSΠϕϯτ΍Γ·͢ʂʢʣ
    IUUQT
    fl
    VUUFSPLJOBXBDPOOQBTTDPNFWFOU

    View full-size slide

  4. એ఻ᶄϋοΧʔζνϟϯϓϧʔ΍Γ·͢ʂ
    ʢʣ
    IUUQTIBDLFSTDIBNQMPPPSH

    View full-size slide

  5. એ఻ᶄϋοΧʔζνϟϯϓϧʔ΍Γ·͢ʂ
    ʢʣ
    IUUQTIBDLFSTDIBNQMPPPSH

    View full-size slide

  6. ࠓ೔ͷࢀՃऀશһͰ͍ͧ͘ʂԠื͍ͯͩ͘͠͞
    པΉɻ͓ئ͍͠·͢
    ք۾Ͱ༗໊ͳʮશһͰߦͧ͘ʂʯͷྫ

    View full-size slide

  7. ࠓ೔࿩͢͜ͱ

    View full-size slide

  8. 7VFͷϦΞΫςΟϒγεςϜʹ͍ͭͯ
    ֶͼ͍ͨ

    View full-size slide

  9. ϲ݄͙Β͍7VF Y
    Λ࢖ͬͯΈͨࠓͷؾ࣋ͪ
    w υΩϡϝϯτ͸͍͍ײ͡ͳͷͰɺಡΊ͹࢖͏෼ʹ͸໰୊ͳ͍
    w ΨοπϦཧղ͍ͯ͠Δ͔ʁͱ໰ΘΕΔͱͦ͏Ͱ͸ͳ͍
    w ৭ʑϋϚͬͨࣄ৅
    w #VJMEJO͞Ε͍ͯΔVTF)PHF΍VTF'VHBͰݺͼग़ͨ͠஋͕ϦΞΫςΟϒͩͬͨΓͦ͏
    ͡Όͳ͔ͬͨΓ
    w XBUDI͕ಈ͔ͳ͍ɺͳͥʁˠΨνϟΨνϟ৭ʑఆٛΛม͑ͨΒಈ͍ͨΓɺಈ͔ͳ͔ͬͨ
    Γɺ5"3*5"3*
    w DPNQVUFE͕ʢҙਤͤͣʣউखʹಈ͘ɺͳͥʁˠԼ૚ͷͲ͔͜ʹϦΞΫςΟϒม਺͕͍
    Δ

    View full-size slide

  10. υΩϡϝϯτΛಡΊ͹Θ͔Δ͕ɺͦΖ
    ͦΖ7VFͷؾ࣋ͪ΋ೝ্ࣝͨ͠Ͱ։ൃ
    ͯ͠Έͨ͞

    View full-size slide

  11. ͱ͍͏Θ͚Ͱ࣮૷Λཧղ͢ΔͨΊͷ
    ๯ݥʹͰΔ
    ʘΩϛʹ͖Ίͨʂʗ
    ʘűƅŜŧœř!!ʗ

    View full-size slide

  12. DIJCJWVF
    IUUQTHJUIVCDPN6CVHFFFJDIJCJWVF

    View full-size slide

  13. ͜Μͳը໘Λࣸܦͯ͠࡞ͬͨ

    View full-size slide

  14. Θ͔ͬͨ͜ͱ

    View full-size slide

  15. ϦΞΫςΟϒม਺ͷఆٛˠ஋͕ߋ৽͞ΕΔͱը
    ໘͕ߋ৽͢ΔྲྀΕͰઆ໌͢Δ
    ొ৔ਓ෺ͨͪ
    SFBDUJWFม਺
    (FUUFS
    4FUUFS
    $PNQPOFOU
    3FOEFSFS
    5SBDL
    5SBDLJOH

    5SJHHFS
    UBSHFU.BQ
    BDUJWF&
    ff
    FDU
    %FQ
    %FQFOEFODZ

    5BSHFUPCKFDU
    \DPVOU^

    View full-size slide

  16. ͜͜Ͱྗਚ͖Δ

    View full-size slide

  17. ࣸܦͨ͠಺༰Λจষʹ͢Δͱ
    w λʔήοτϦΞΫςΟϒʹ͍ͨ͠ΦϒδΣΫτ
    w ϦΞΫςΟϒม਺λʔήοτΛॳظ஋ʹϦΞΫςΟϒΦϒδΣΫτΛ૊ΈཱͯΔɻHFUUFSͱ
    TFUUFSΛ࣋ͭ
    w HFUUFS࣮ߦ࣌ʹ͸USBDLʢޙड़ʣɺTFUUFS࣌ʹ͸USJHHFSʢޙड़ʣΛ࣮ߦ͢Δ
    w UBSHFU.BQ8FBL.BQʢΦϒδΣΫτΛ,FZʹ͢Δ͜ͱ͕Ͱ͖Δ.BQʣɻϦΞΫςΟϒΦϒ
    δΣΫτΛLFZʹ%FQBDUJWF&
    ff
    FDU<>ʢޙड़ʣΛอ࣋͢Δ
    w 3FBDUJWF&
    ff
    FDUؔ਺Λొ࿥ɾ࣮ߦ͢Δɻ࣮ߦ࣌ʹBDUJWF&
    ff
    FDUʹ3FBDUJWF&
    ff
    FDUࣗ਎ΛೖΕΔ
    w BDUJWF&
    ff
    FDUݱࡏ࣮ߦதͷͳʹ͔ʢॲཧʣ
    w %FQBDUJWF&
    ff
    FDUΛෳ਺อ࣋͢Δ.BQ

    View full-size slide

  18. ਤΛ͓आΓ͢Δͱ
    w λʔήοτϦΞΫςΟϒʹ͍ͨ͠ΦϒδΣΫτ
    w ϦΞΫςΟϒม਺λʔήοτΛॳظ஋ʹϦΞΫςΟϒΦϒδΣΫτΛ૊ΈཱͯΔɻHFUUFSͱ
    TFUUFSΛ࣋ͭ
    w HFUUFS࣮ߦ࣌ʹ͸USBDLʢޙड़ʣɺTFUUFS࣌ʹ͸USJHHFSʢޙड़ʣΛ࣮ߦ͢Δ
    w UBSHFU.BQ8FBL.BQʢΦϒδΣΫτΛ,FZʹ͢Δ͜ͱ͕Ͱ͖Δ.BQʣɻϦΞΫςΟϒΦϒ
    δΣΫτΛLFZʹ%FQBDUJWF&
    ff
    FDU<>ʢޙड़ʣΛอ࣋͢Δ
    w 3FBDUJWF&
    ff
    FDUؔ਺Λొ࿥ɾ࣮ߦ͢Δɻ࣮ߦ࣌ʹBDUJWF&
    ff
    FDUʹ3FBDUJWF&
    ff
    FDUࣗ਎ΛೖΕΔ
    w BDUJWF&
    ff
    FDUݱࡏ࣮ߦதͷͳʹ͔ʢॲཧʣ
    w %FQBDUJWF&
    ff
    FDUΛෳ਺อ࣋͢Δ.BQ
    https://github.com/Ubugeeei/chibivue/blob/main/books/japanese/007_minimum_reactive.md

    View full-size slide

  19. ࣸܦͨ͠಺༰Λจষʹ͢Δͱͦͷ̎
    $PNQPOFOU࡞੒࣌
    w DPNQPOFOUΛSFOEFS͢Δؔ਺ΛVQEBUF$PNQPOFOUͱ͢Δ
    w VQEBUF$PNQPOFOUΛ3FBDUJWF&
    ff
    FDU΁ొ࿥͓ͯ͘͠
    w 3FBDUJWF&
    ff
    FDUSVO͢ΔˠVQEBUF$PNQPOFOU͕࣮ߦ͞ΕΔ
    w VQEBUF$PNQPOFOU͢ΔͱSFG͕ఆٛ͞ΕΔˠͦͷޙʹSFOEFSؔ਺Ͱ஋͕ಡ
    ΈऔΒΕΔˠHFUUFS͕ಈ͘
    w BDUJWF&
    ff
    FDU͕VQEBUF$PNPQOFOUͷ··HFUUFS͕ಈ͘ˠUSBDL͕࣮ߦ͞Ε
    ͯɺUBSHFU.BQʹSFBDUJWFΦϒδΣΫτΛLFZʹVQEBUF$PNQPOFOU͕ొ࿥
    ͞ΕΔ

    View full-size slide

  20. ࣸܦͨ͠಺༰Λจষʹ͢Δͱͦͷ̏
    3FOEFS࣌
    w JODSFNFOU͕ಈ͘ˠSFBDUJWFม਺ͷTFUUFS͕ಈ͘
    w TFUUFS͸SFBDUJWFPCKFDUΛLFZʹUBSHFU.BQ͔ΒBDUJWF&
    ff
    FDUΛొ࿥
    ͞ΕͯΔ෼औΓग़͢
    w ͦΕͧΕॱ൪ʹ࣮ߦ͢ΔˠVQEBUF$PNQPOFOU͕ొ࿥͞Ε͍ͯΔͷ
    Ͱ࣮ߦ͞ΕΔˠը໘Λߋ৽͢Δ

    View full-size slide

  21. ਤΛ͓आΓ͢Δͱ
    w JODSFNFOU͕ಈ͘ˠSFBDUJWFม਺ͷTFUUFS͕ಈ͘
    w TFUUFS͸SFBDUJWFPCKFDUΛLFZʹUBSHFU.BQ͔ΒBDUJWF&
    ff
    FDUΛొ࿥
    ͞ΕͯΔ෼औΓग़͢
    w ͦΕͧΕॱ൪ʹ࣮ߦ͢ΔˠVQEBUF$PNQPOFOU͕ొ࿥͞Ε͍ͯΔͷ
    Ͱ࣮ߦ͞ΕΔˠը໘Λߋ৽͢Δ
    https://github.com/Ubugeeei/chibivue/blob/main/books/japanese/007_minimum_reactive.md

    View full-size slide

  22. ࡶײ
    • Կ΋Θ͔ΒΜ


    • Ҿ͖ଓ͖chibivueʹ͸͓ੈ࿩ʹͳΓ·͢

    View full-size slide