Save 37% off PRO during our Black Friday Sale! »

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

4bffe6720aa22b10feef2456e5d495bb?s=47 Ryusou
September 15, 2021
290

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

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

4bffe6720aa22b10feef2456e5d495bb?s=128

Ryusou

September 15, 2021
Tweet

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 ΦϒδΣΫτͷൺֱ 5ZQF4DSJQUEFFQEJWF ʮ౳ՁԋࢉࢠͷಉҰੑʯ

  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ͰDVTUPNIPPLΛ࡞Δ࣌ͷςϯϓϨʔτʯIUUQTCMPHPKJTBOJPDPOUFYUSFEVDFSDVTUPNIPPL ɹʮਖ਼͘͠࢖͏3FBDU$POUFYUʯIUUQT[FOOEFWZVUB@VSBBSUJDMFTSFBDUDPOUFYUBQJ ɹʮ౳ՁԋࢉࢠͷಉҰੑʯIUUQTUZQFTDSJQUKQHJUCPPLJPEFFQEJWFSFDBQFRVBMJUZ

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