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

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

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