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

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

Transcript

1. ɹʮϥΫε
   ϑϩϯτΤϯυ-5ձ
   
   WPMʯɹΓΎʔͦ͏ Ϣʔβʔ͕
   lฤूதz
   ͷঢ়ଶ؅ཧ ʹ͍ͭͯߟ͑Α͏
2. ΓΎʔͦ͏
   !SZVTPV@NULI w ֶߍͷઌੜ΍ͬͯ·ͨ͠ʂ
   w גࣜձࣾNJDSP$.4
   'SPOUFOE
   &OHJOFFS%FWSFM
   ɹɹ3FBDUɾ5ZQF4DSJQU͕޷͖ɻࠓ೔͸NJDSP$.4։ൃʹ·ͭΘΔ࿩Λ͠·͢
   w ΠϕϯτΛӡӦ͍ͯ͠·͢✊ +BNTUBDLษڧձ
   ʮδϟϜδϟϜʂʂ+BNTUBDLʯ ࡛ۄݝ+BWB4DSJQUษڧձʮ4BJUBNBKTʯ
3. ͍͖ͳΓͰ͕͢ɾɾɾ
4. ͜Μͳܦݧ͋Γ·ͤΜ͔ʁʁʁ ࡞੒தͩͬͨจষ͕ফ͑ͯ ͍ͯΔͳ͋ɻŷŬŒŷŬŒ ϑΥʔϜೖྗதͰɺผλϒҠͬ ͨΒফ͑ͯΔΜ͚ͩͲʜʂʂ ͏ʔΜɺೖྗதͷେࣄͳ σʔλอଘ๨ΕͪΌͬͨ
5. ฤूதͷঢ়ଶͬͯʜʁ $SFBUF 6QEBUF %FMFUF FY ϒϩάΛॻ͘8&#ΞϓϦέʔγϣϯ هࣄΛ࡞੒ʂอଘPSެ։ ϘλϯΛԡ͢ هࣄΛߋ৽ʂอଘPSߋ৽ ϘλϯΛԡ͢ هࣄΛ࡟আʂ࡟আϘλϯ Λԡ͢
6. ฤूதͷঢ়ଶͬͯʜʁ $SFBUF 6QEBUF %FMFUF FY ϒϩάΛॻ͘8&#ΞϓϦέʔγϣϯ هࣄΛ࡞੒ʂอଘPSެ։ ϘλϯΛԡ͢ هࣄΛߋ৽ʂอଘPSߋ৽ ϘλϯΛԡ͢ هࣄΛ࡟আʂ࡟আϘλϯ Λԡ͢ ͜ͷؒͷঢ়ଶΛͲ͏σβΠϯ͢Δ͔͕େࣄͱ͍͏࿩
7. NJDSP$.4ͷࣄྫ "1*εΩʔϚઃఆը໘ NJDSP$.4ͱ͸
    )FBEMFTT$.4
    "1*ϕʔε
    εΩʔϚΛࣗ༝ࣗࡏ ʹ࡞੒
    IUUQTNJDSPDNTJP
8. NJDSP$.4ͷࣄྫ "1*εΩʔϚઃఆը໘
9. NJDSP$.4ͷࣄྫ "1*εΩʔϚઃఆը໘ ͲͷΑ͏ʹzฤूதzͰ͋Δ͔Λ఻͑Δ͔ʁ
10. NJDSP$.4ͷࣄྫ ฤूதͰ͋Δ͜ͱΛೝ஌ͤͯ͋͛͞ΔσβΠϯ
11. NJDSP$.4ͷࣄྫ ޡૢ࡞Λ๷͙ɹ
    ΞϥʔτɾμΠΞϩάɾϦϩʔυݕ஌
    
12. NJDSP$.4ͷࣄྫ ࢖͍Ͳ͜ΖΛߟ͑Δ Ͱ͸ɺೖྗͷ͋Δը໘Ͱ͸શ࣮ͯ૷ͨ͠Βྑ͍ͷͰ͸ʜʁ ࢥߟఀࢭͨ͠ΓΎʔͦ͏͘Μ
13. NJDSP$.4ͷࣄྫ ࢖͍Ͳ͜ΖΛߟ͑Δ Ͱ͸ɺೖྗͷ͋Δը໘Ͱ͸શ࣮ͯ૷ͨ͠Βྑ͍ͷͰ͸ʜʁ ࢥߟఀࢭͨ͠ΓΎʔͦ͏͘Μ
14. NJDSP$.4ͷࣄྫ ࢖͍Ͳ͜ΖΛߟ͑Δ ɾ΍Γ͗͢͸ྑ͘ͳ͍
    ɾΞϥʔτ͸Ϣʔβʔͷಈ࡞Λ੍ޚ͢Δ ͍ΘΏΔϞʔυ
    ɾεςʔλεόʔ͸Ϣʔβʹͱͬͯຊ࣭తͳ৘ใͰ͸ͳ͍έʔε΋͋Δɻ ˠ
    Ϣʔβʔͷಈ࡞ΛࢭΊΔՁ஋ͷ͋Δ΋ͷͳͷ͔ʁ
    ˠ
    Ϣʔβʔͷ৘ใΛࢧԉ͍ͯ͠Δ͔ʁ·ͨɺ๦͛ʹͳ͍ͬͯͳ͍͔
    ɹ
    Λߟ͑Δ εςʔλεόʔͷେ͖͞ɺσβΠϯɺ৭ɺ࢖͍Ͳ͜Ζ ɻ
15. ࣮૷ฤɿαϯϓϧ3FBDU VTF$POUFYUͰ؅ཧ͢Δ w 3FBDUͰ͸3FEVYʜFUDͳͲঢ়ଶ؅ཧͷબ୒ࢶ͕ଟ͍
    w ࠓճͷ࣮૷Ͱ͸VTF$POUFYUΛ࢖༻
    ɹVTF$POUFYU͚ͩͰΞϓϦέʔγϣϯͷঢ়ଶ؅ཧ͸ΦϨΦϨʹͳΓ͕ͪ
    ɹࠓճͷ͍࣮ܰ૷Λ3FEVYͱ͔ͷঢ়ଶ؅ཧʹؚΊͨ͘ͳ͍ɻ
    
    
    
    ˠ
    ੍͍͔ͭ͘໿Λ΋͏͚࣮ͯ૷͢Δɹ
    
16. VTF$POUFYUͷ࢖༻࣌ͷ੍໿ $POUFYUΛ$PNQPOFOUʹFYQPSU͠ͳ͍ ɾ$POUFYU͕$PNQPOFOUʹFYQPSU͞Εͨ࣌఺Ͱঢ়ଶ؅ཧ͕ൃੜ͢Δ
    ɾ)PPLT಺ʹ$POUFYUΛӅṭ ͳΜͳΒಉϑΝΠϧͰ΋ྑ͍͔΋
    ɹ
    $POUFYU )PPLT
17. VTF)BT%JGG
    )PPLT $POUFYU͸ॳظ஋ͱߋ৽ܥͰ෼ׂ
     IBT%J ff
     TFU)BT%J ff
    ෆཁͳϨϯμϦϯάΛ๷͙ $POUFYU
18. VTF)BT%JGG
    )PPLT ΦϒδΣΫτͷൺֱ
    5ZQF4DSJQU
    EFFQ
    EJWF
    ʮ౳ՁԋࢉࢠͷಉҰੑʯ
    
19. VTF)BT%JGG
    )PPLT VTF& ff FDUͷΫϦʔϯΞοϓ
    ը໘ભҠ࣌ʹ͸4UBUFΛࣺͯΔ
    ϖʔδΛލ͍Ͱͷঢ়ଶ؅ཧ͸͠ͳ͍
20. VTF)BT%JGG
    )PPLT $PNQPOFOUଆ IBT%J ff Ͱ6*ͷग़͠Θ͚ɺEJTBCMFEͷ੍ޚͳͲΛߦ͏ɻ
    )PPLTͷ஋ͷΈΛ࢖͏ɻ$POUFYUʹ͍ͭͯ$PNQPOFOUଆ͸
    ஌Βͳ͍͜ͱ͕ॏཁ
21. ·ͱΊ l
    Ϣʔβʔ͕ʮฤूதʯͷঢ়ଶ؅ཧ͸ॏཁ͚ͩͲɺຊےͰ͸ͳ͍ɻ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ͦͷ͜ͱΛ೦಄ʹ͓͍ͯσβΠϯɾ࣮૷͢΂͠l #Z
    ΓΎʔͦ͏
22. ࢀߟʹ͍͍ͤͯͨͩͨ͞ຊɾαΠτ 5IBOLTʂ
    ɾஶॻ
    ɹʰΦϒδΣΫτࢦ޲6*σβΠϯʱஶऀ
    ιγΦϝσΟΞגࣜձࣾɹ্໺ֶɺ౻Ҫ޾ଟ
    ɾαΠτ
    ɹʮ3FBDU
    $POUFYU
    Λ
    FYQPSU
    ͢Δͷ͸ΞϯνύλʔϯͰ͸ͳ͍͔ͱߟ͑ΔʯIUUQTCMPHTUJOJOLBSUJDMFTEPOPUFYQPSUSFBDUDPOUFYU
    ɹʮ$POUFYU
    "1*
    ͱ
    VTF3FEVDFS
    Ͱ
    DVTUPN
    IPPL
    Λ࡞Δ࣌ͷςϯϓϨʔτʯIUUQTCMPHPKJTBOJPDPOUFYUSFEVDFSDVTUPNIPPL
    ɹʮਖ਼͘͠࢖͏3FBDU
    $POUFYUʯIUUQT[FOOEFWZVUB@VSBBSUJDMFTSFBDUDPOUFYUBQJ
    ɹʮ౳ՁԋࢉࢠͷಉҰੑʯIUUQTUZQFTDSJQUKQHJUCPPLJPEFFQEJWFSFDBQFRVBMJUZ
    
23. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ !SZVTPV@NULI ΓΎʔͦ͏