$30 off During Our Annual Pro Sale. View Details »

ユーザーが編集中の状態管理について考えよう

Ryusou
September 15, 2021
6.2k

 ユーザーが編集中の状態管理について考えよう

フロントエンドLT会 - vol.4 #frontendltのスライドです

Ryusou

September 15, 2021
Tweet

Transcript

  1. ɹʮϥΫεϑϩϯτΤϯυ-5ձWPMʯɹΓΎʔͦ͏
    Ϣʔβʔ͕lฤूதzͷঢ়ଶ؅ཧ
    ʹ͍ͭͯߟ͑Α͏

    View Slide

  2. ΓΎʔͦ͏!SZVTPV@NULI
    w ֶߍͷઌੜ΍ͬͯ·ͨ͠ʂ
    w גࣜձࣾNJDSP$.4'SPOUFOE&OHJOFFS%FWSFM
    ɹɹ3FBDUɾ5ZQF4DSJQU͕޷͖ɻࠓ೔͸NJDSP$.4։ൃʹ·ͭΘΔ࿩Λ͠·͢
    w ΠϕϯτΛӡӦ͍ͯ͠·͢✊
    +BNTUBDLษڧձʮδϟϜδϟϜʂʂ+BNTUBDLʯ ࡛ۄݝ+BWB4DSJQUษڧձʮ4BJUBNBKTʯ

    View Slide

  3. ͍͖ͳΓͰ͕͢ɾɾɾ

    View Slide

  4. ͜Μͳܦݧ͋Γ·ͤΜ͔ʁʁʁ
    ࡞੒தͩͬͨจষ͕ফ͑ͯ
    ͍ͯΔͳ͋ɻŷŬŒŷŬŒ
    ϑΥʔϜೖྗதͰɺผλϒҠͬ
    ͨΒফ͑ͯΔΜ͚ͩͲʜʂʂ
    ͏ʔΜɺೖྗதͷେࣄͳ
    σʔλอଘ๨ΕͪΌͬͨ

    View Slide

  5. ฤूதͷঢ়ଶͬͯʜʁ
    $SFBUF 6QEBUF %FMFUF
    FY
    ϒϩάΛॻ͘8ΞϓϦέʔγϣϯ
    هࣄΛ࡞੒ʂอଘPSެ։
    ϘλϯΛԡ͢
    هࣄΛߋ৽ʂอଘPSߋ৽
    ϘλϯΛԡ͢
    هࣄΛ࡟আʂ࡟আϘλϯ
    Λԡ͢

    View Slide

  6. ฤूதͷঢ়ଶͬͯʜʁ
    $SFBUF 6QEBUF %FMFUF
    FY
    ϒϩάΛॻ͘8ΞϓϦέʔγϣϯ
    هࣄΛ࡞੒ʂอଘPSެ։
    ϘλϯΛԡ͢
    هࣄΛߋ৽ʂอଘPSߋ৽
    ϘλϯΛԡ͢
    هࣄΛ࡟আʂ࡟আϘλϯ
    Λԡ͢
    ͜ͷؒͷঢ়ଶΛͲ͏σβΠϯ͢Δ͔͕େࣄͱ͍͏࿩

    View Slide

  7. NJDSP$.4ͷࣄྫ
    "1*εΩʔϚઃఆը໘
    NJDSP$.4ͱ͸
    )FBEMFTT$.4
    "1*ϕʔε
    εΩʔϚΛࣗ༝ࣗࡏ
    ʹ࡞੒
    IUUQTNJDSPDNTJP

    View Slide

  8. NJDSP$.4ͷࣄྫ
    "1*εΩʔϚઃఆը໘

    View Slide

  9. NJDSP$.4ͷࣄྫ
    "1*εΩʔϚઃఆը໘
    ͲͷΑ͏ʹzฤूதzͰ͋Δ͔Λ఻͑Δ͔ʁ

    View Slide

  10. NJDSP$.4ͷࣄྫ
    ฤूதͰ͋Δ͜ͱΛೝ஌ͤͯ͋͛͞ΔσβΠϯ

    View Slide

  11. NJDSP$.4ͷࣄྫ
    ޡૢ࡞Λ๷͙ɹΞϥʔτɾμΠΞϩάɾϦϩʔυݕ஌

    View Slide

  12. NJDSP$.4ͷࣄྫ
    ࢖͍Ͳ͜ΖΛߟ͑Δ
    Ͱ͸ɺೖྗͷ͋Δը໘Ͱ͸શ࣮ͯ૷ͨ͠Βྑ͍ͷͰ͸ʜʁ
    ࢥߟఀࢭͨ͠ΓΎʔͦ͏͘Μ

    View Slide

  13. NJDSP$.4ͷࣄྫ
    ࢖͍Ͳ͜ΖΛߟ͑Δ
    Ͱ͸ɺೖྗͷ͋Δը໘Ͱ͸શ࣮ͯ૷ͨ͠Βྑ͍ͷͰ͸ʜʁ
    ࢥߟఀࢭͨ͠ΓΎʔͦ͏͘Μ

    View Slide

  14. NJDSP$.4ͷࣄྫ
    ࢖͍Ͳ͜ΖΛߟ͑Δ
    ɾ΍Γ͗͢͸ྑ͘ͳ͍
    ɾΞϥʔτ͸Ϣʔβʔͷಈ࡞Λ੍ޚ͢Δ ͍ΘΏΔϞʔυ

    ɾεςʔλεόʔ͸Ϣʔβʹͱͬͯຊ࣭తͳ৘ใͰ͸ͳ͍έʔε΋͋Δɻ
    ˠϢʔβʔͷಈ࡞ΛࢭΊΔՁ஋ͷ͋Δ΋ͷͳͷ͔ʁ
    ˠϢʔβʔͷ৘ใΛࢧԉ͍ͯ͠Δ͔ʁ·ͨɺ๦͛ʹͳ͍ͬͯͳ͍͔
    ɹΛߟ͑Δ εςʔλεόʔͷେ͖͞ɺσβΠϯɺ৭ɺ࢖͍Ͳ͜Ζ
    ɻ

    View Slide

  15. ࣮૷ฤɿαϯϓϧ3FBDU
    VTF$POUFYUͰ؅ཧ͢Δ
    w 3FBDUͰ͸3FEVYʜFUDͳͲঢ়ଶ؅ཧͷબ୒ࢶ͕ଟ͍
    w ࠓճͷ࣮૷Ͱ͸VTF$POUFYUΛ࢖༻
    ɹVTF$POUFYU͚ͩͰΞϓϦέʔγϣϯͷঢ়ଶ؅ཧ͸ΦϨΦϨʹͳΓ͕ͪ
    ɹࠓճͷ͍࣮ܰ૷Λ3FEVYͱ͔ͷঢ়ଶ؅ཧʹؚΊͨ͘ͳ͍ɻ
    ˠ੍͍͔ͭ͘໿Λ΋͏͚࣮ͯ૷͢Δɹ

    View Slide

  16. VTF$POUFYUͷ࢖༻࣌ͷ੍໿
    $POUFYUΛ$PNQPOFOUʹFYQPSU͠ͳ͍
    ɾ$POUFYU͕$PNQPOFOUʹFYQPSU͞Εͨ࣌఺Ͱঢ়ଶ؅ཧ͕ൃੜ͢Δ
    ɾ)PPLT಺ʹ$POUFYUΛӅṭ ͳΜͳΒಉϑΝΠϧͰ΋ྑ͍͔΋

    ɹ
    $POUFYU )PPLT

    View Slide

  17. VTF)BT%JGG)PPLT
    $POUFYU͸ॳظ஋ͱߋ৽ܥͰ෼ׂ
    IBT%J
    ff

    TFU)BT%J
    ff

    ෆཁͳϨϯμϦϯάΛ๷͙
    $POUFYU

    View Slide

  18. VTF)BT%JGG)PPLT
    ΦϒδΣΫτͷൺֱ
    5ZQF4DSJQUEFFQEJWF
    ʮ౳ՁԋࢉࢠͷಉҰੑʯ

    View Slide

  19. VTF)BT%JGG)PPLT
    VTF&
    ff
    FDUͷΫϦʔϯΞοϓ
    ը໘ભҠ࣌ʹ͸4UBUFΛࣺͯΔ
    ϖʔδΛލ͍Ͱͷঢ়ଶ؅ཧ͸͠ͳ͍

    View Slide

  20. VTF)BT%JGG)PPLT
    $PNQPOFOUଆ
    IBT%J
    ff
    Ͱ6*ͷग़͠Θ͚ɺEJTBCMFEͷ੍ޚͳͲΛߦ͏ɻ
    )PPLTͷ஋ͷΈΛ࢖͏ɻ$POUFYUʹ͍ͭͯ$PNQPOFOUଆ͸
    ஌Βͳ͍͜ͱ͕ॏཁ

    View Slide

  21. ·ͱΊ
    lϢʔβʔ͕ʮฤूதʯͷঢ়ଶ؅ཧ͸ॏཁ͚ͩͲɺຊےͰ͸ͳ͍ɻ
    ͦͷ͜ͱΛ೦಄ʹ͓͍ͯσβΠϯɾ࣮૷͢΂͠l
    #ZΓΎʔͦ͏

    View Slide

  22. ࢀߟʹ͍͍ͤͯͨͩͨ͞ຊɾαΠτ
    5IBOLTʂ
    ɾஶॻ
    ɹʰΦϒδΣΫτࢦ޲6*σβΠϯʱஶऀιγΦϝσΟΞגࣜձࣾɹ্໺ֶɺ౻Ҫ޾ଟ
    ɾαΠτ
    ɹʮ3FBDU$POUFYUΛFYQPSU͢Δͷ͸ΞϯνύλʔϯͰ͸ͳ͍͔ͱߟ͑ΔʯIUUQTCMPHTUJOJOLBSUJDMFTEPOPUFYQPSUSFBDUDPOUFYU
    ɹʮ$POUFYU"1*ͱVTF3FEVDFSͰDVTUPNIPPLΛ࡞Δ࣌ͷςϯϓϨʔτʯIUUQTCMPHPKJTBOJPDPOUFYUSFEVDFSDVTUPNIPPL
    ɹʮਖ਼͘͠࢖͏3FBDU$POUFYUʯIUUQT[FOOEFWZVUB@VSBBSUJDMFTSFBDUDPOUFYUBQJ
    ɹʮ౳ՁԋࢉࢠͷಉҰੑʯIUUQTUZQFTDSJQUKQHJUCPPLJPEFFQEJWFSFDBQFRVBMJUZ

    View Slide

  23. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ
    !SZVTPV@NULI
    ΓΎʔͦ͏

    View Slide