Draft.jsによる 統制のとれたテキスト編集の世界 #jsfes

Transcript

1. Draft.jsʹΑΔ ౷੍ͷͱΕͨςΩετฤूͷੈք 2017/05/27 HANATANI Takuma a.k.a. @potato4d

2. Biography • Ֆ୩୓ຏ a.k.a. @potato4d • େࡕग़਎ˠࠓ೥͔Β౦ژੜ׆ • 1998/04/13 •

   pixiv inc. ΤϯδχΞ • FRONTEND CONFERENCE 2017 ࣮ߦҕһ௕ • ͷΞΠίϯͰࣾ಺ϒϩάʹࡌͬͨ • ීஈVue.js͋ͨΓͷք۾ʹ͍·͢

3. "HFOEB w ͸͡Ίʹ
   w %SBGUKTͱDPOUFOU&EJUBCMF
   w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
   w ͭΒ͍࿩
   w

   ·ͱΊ

4. "HFOEB w ͸͡Ίʹ
   w %SBGUKTͱDPOUFOU&EJUBCMF
   w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
   w ͭΒ͍࿩
   w

   ·ͱΊ

5. ͸͡Ίʹ

6. ͸ͳ͢͜ͱɾ͸ͳ͞ͳ͍͜ͱ w ࣌ؒ΋࣌ؒͳͷͰ%SBGUKT͍͢͝ʂͱ͍͏࿩͚ͩ͠·͢
   w ͋·Γਂ͍࢓༷ͷ࿩΍ɺ࣮૷ϕʔεͷ࿩ʹ͸৮Ε·ͤΜɻ
   w ໌೔ͷۀ຿͕ྑ͘ͳΔ஌ࣝʹ΋৮Ε·ͤΜ

7. ͜Μͳਓʹ͓͢͢Ί w ฤूը໘ͷཁ๬ʹରͯ͠UFYUBSFBͰؤுΔ͜ͱʹݶքΛײͨ͡ਓ
   w 5JOZ.$&ͳͲͷΤσΟλͷঢ়ଶ؅ཧ΍֦ுੑʹෆຬ͕͋Δਓ
   w ςΩετσʔλ͸.BSLEPXOҎ֎࢖Θͳ͍ͱ͍͏ڧ͍ҙࢤΛ࣋ͭਓ
   w 41"ʹ·ͱ΋ͳςΩετΤσΟλΛೖΕ͍ͨਓ
   w

   ʮͪΐͬͱ.FEJVNͭͬͯ͘ΑʯͬͯݴΘΕͯࠔͬͯΔਓ

8. "HFOEB w ͸͡Ίʹ
   w %SBGUKTͱDPOUFOU&EJUBCMF
   w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
   w ͭΒ͍࿩
   w

   ·ͱΊ

9. Draft.js

10. %SBGUKT w ͍ΘΏΔ8:4*8:(Λ؆୯ʹ࡞ΔͨΊͷϥΠϒϥϦ
    w ͓͓Α͍ͦͭ΋Ͳ͓Γ'BDFCPPL͕։ൃ͍ͯ͠Δ
    w ʮDPOUFOU&EJUBCMFʯΛӅṭ͠ɺ౷߹؅ཧͰ͖ΔΑ͏ʹͨ͠΋ͷ
    w ΤσΟλͷঢ়ଶ͕3FBDUίϯϙʔωϯτͱͯ͠ఏڙ͞ΕΔ
    w

    ϓϥάΠϯʹΑΔ֦ுΛલఏͱ͓ͯ͠Γɺඇৗʹ൚༻తͳ*'Λఏڙ IUUQTESBGUKTPSH

11. %SBGUKT %0.ϕʔεͷςΩετฤूͷந৅ԽϥΠϒϥϦ IUUQTESBGUKTPSH

12. https://draftjs.org/

13. contentEditable

14. None

15. DPOUFOU&EJUBCMF w )5.-্ͷ͋ΒΏΔཁૉΛฤूՄೳʹ͢Δ)5.-
    "UUSJCVUF
    w ࣮͸ଠݹͷੲ͔ΒͻͬͦΓͱੜ͖͍ͯΔ΋ͷ
    *&ʹ΋͋Δ
    
    w ݱࡏ͸
    )5.-
    ͷଐੑͱͯ͠ਖ਼ࣜʹ࢓༷ೖΓ͍ͯ͠Δ
    w

    )5.-্Ͱߴ౓ͳςΩετฤूΛ͢Δࡍ͸ඞͣग़ͯ͘Δ֓೦ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-(MPCBM@BUUSJCVUFTDPOUFOUFEJUBCMF

16. "HFOEB w ͸͡Ίʹ
    w %SBGUKTͱDPOUFOU&EJUBCMF
    w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
    w ͭΒ͍࿩
    w

    ·ͱΊ

17. %SBGUKTͰͰ͖Δ͜ͱ w ͍͍ͩͨͷςΩετฤू
    w બ୒ൣғͷςΩετͷจࣈ૷০ͷมߋ ৭େ͖͞ॻମ
    w %%ͨ͠ը૾ΛฤूΤϦΞʹͦͷ··දࣔ
    w

    Α͋͘Δϙοϓϝχϡʔ΍ɺ͍ΘΏΔʮΈͨ··Ϟʔυʯͷར༻
    w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ
    w 3FBDUʹΑΔ౷߹తͳঢ়ଶͷ؅ཧ
    w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ

18. Demo

19. Draft.jsͷར఺

20. %SBGUKTͷར఺ w શͯͷϑΥʔϚοτΛҰ౓FEJUPS4UBUFʹม׵͢Δ
    w %SBGUKT͸ɺ*NBHF.BHJDLͷΑ͏ʹɺ༷ʑͳςΩετͷܗࣜΛҰ౓3FBDUίϯϙʔωϯτ্ͷ 4UBUFͱͯ͠ม׵ɺอ࣋͢Δ࢓૊ΈΛ͍࣋ͬͯΔ
    w ͜ΕʹΑΓ༷ʑͳϑΥʔϚοτͷ૬ޓม׵͕Մೳ
    w ۃ୺ͳྫͰݴ͏ͱɺ.BSLEPXO͔͠ॻ͖ͨ͘ͳ͍ਓ͸.%
    UP
    )5.-ͷม׵Λͯ͠΋ྑ͍

    ࣮࣭ QBOEPDΈ͍ͨͳ͜ͱ΋Ͱ͖Δ
    w ॻࣜҎ֎ʹ΋ɺྫ͑͹͕6OJDPEFͰ͋Δ΂͖͔UIJOLJOHͰ͋Δ΂͖͔͸จ຺ʹґଘ͢Δ
    w ͦ͏͍ͬͨࠩҟΛؾʹͤͣʹར༻Ͱ͖ΔΠϯλʔϑΣʔεͱϓϥάΠϯ͕ॆ࣮͍ͯ͠Δ
    w ʮͲ͏͍͏࣮૷ͷ౎߹͔ʯͰ͸ͳ͘ɺʮͲ͏ॻ͖͍͔ͨʯ໨ઢʹͨͭ͜ͱ͕Ͱ͖Δ

21. %SBGUKTͷར఺

22. %SBGUKTͷར఺ w 3FBDUίϯϙʔωϯτͱͯ͠؅ཧ͞ΕΔ͜ͱʹΑΔ
    w શͯ͸3FBDUͷίϯϙʔωϯτͱͯ͠؅ཧ͞Ε͍ͯ͘
    w ΤσΟλपΓͷϥΠϒϥϦಛ༗ͷɺಠࣗΠϕϯτಠࣗϑοΫͱ͍͏࢓༷͔Β͸։์͞ΕΔ
    w 3FBDUΛܦ༝ͯ͠%0.΁ͷυϩʔ͸ߦΘΕΔͨΊɺൺֱత੍ޚ͠΍͍͢
    w

    41"ͳͲʹಋೖ͢Δࡍʹ3FBDUͰ͋Ε͹Ͳ͏΍ͬͯ΋݌՞͢Δ͜ͱ͕ͳ͍
    w ݱ୅తͳ։ൃΛ·ͱ΋ʹߦ͏ͨΊͷػೳ͕ἧ͍ͬͯΔҎ্ͷ࿩Ͱ͸ͳ͍

23. "HFOEB w ͸͡Ίʹ
    w %SBGUKTͱDPOUFOU&EJUBCMF
    w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
    w ͭΒ͍࿩
    w

    ·ͱΊ

24. ͭΒ͍࿩

25. UNMET PEER DEPENDENCY

26. ͭΒ͍࿩
     w ۃ୺ʹ҆ఆ͠ͳ͍
    w ٱʑʹґଘؔ܎ΛೖΕ௚͢ͱյΕΔͷ͸೔ৗ஡൧ࣄ ճҎ্΍ͬͨؾ͕͢Δ
    w ϚΠφʔόʔδϣϯ͕Ұ্͕ͭΔ͚ͩͰେମϓϥάΠϯಉ࢜Ͱڝ߹͢Δɺ΋͘͠͸ޓ׵ੑ͕੾ ΕΔͷͰಋೖ͍ͯ͠Δ΋ͷΛҰͭͣͭ௥͍ͬͯ͘ඞཁ͕͋Δ
    

    w ௥͍ଧͪΛ͔͚ΔΑ͏ʹൃల్্Ώ͑ͷΞϓσͷଟ͞ ͿͬյΕ΍͢͞
    w ೔༵ϓϩδΣΫτͩͱ΍͍ͬͯΔ͏ͪʹͭΒ͘ͳͬͯ͘Δ
    w ґଘؔ܎ʹνϧμΛ࢖ͬͯ͸͍͚ͳ͍

27. ͭΒ͍࿩
     w ྑ͘΋ѱ͘΋3FBDUґଘ
    w ͍ͭ΋௨Γ'BDFCPPL͕ѱ͍
    w ݸਓతʹ޷͖ͳ7VFKTͳͲͱ૊Έ߹ΘͤΔͷ͸ݫ͍͠ͷͰͦͪΒΛར༻͢Δ৔߹͸5JOZ.$&͋ ͨΓͰ͓஡Λ୙͔͢͠ͳ͍
    w ϑϩϯτΤϯυͷ੎ྗਤ͕͹Β͍͍ͭͯΔ͔Βͦ͜ͳ͔ͳ͔ྲྀߦΒͳ͍
    

    w ྲྀߦΒͳ͍ͷͰւ֎ͷϓϥάΠϯΛؾ߹Ͱൃ۷ͯ͠ݕূ͍ͯ͘͠࡞ۀ
    w ؾ߹Ͱ΍ͬͯΔͱґଘؔ܎͕ͿͬյΕͯͭΒ͍
    w ґଘؔ܎͕ͿͬյΕͯͭΒ͍

28. "HFOEB w ͸͡Ίʹ
    w %SBGUKTͱDPOUFOU&EJUBCMF
    w ಛ௕ͱબఆ͢ΔϝϦοτʹ͍ͭͯ
    w ͭΒ͍࿩
    w

    ·ͱΊ

29. ·ͱΊ

30. ·ͱΊ
     w DPOUFOU&EJUBCMF
    w )5.-ܥ"1*ͷҰͭʢͱ͸͍͑ଘࡏͰ͍͑͹ͣͬͱ͋ͬͨʣ
    w )5.-ཁૉʹରͯ͠௚઀తͳհೖɾฤू͕Մೳͳ)5.-
    BUUSJCVUF
    w +BWB4DSJQUʹΑΔڧ੍తͳॻ͖׵͑ͱҧ͍ɺ͋Δఔ౓͸4UBOEBSEͳ࢓༷Ͱ͋ΔͨΊɺ݈શͳ ฤू͕Մೳ
    

    w %SBGUKT
    w جຊతʹ͸DPOUFOU&EJUBCMFΛӅṭ͠ɺ3FBDUͷ*'Λ΋ͨͤͨ൚༻ϥΠϒϥϦ
    w ैདྷܕͷ8:4*8:(ϥΠϒϥϦͱҧ͍ɺଞͷ'8ͳͲͱڝ߹ͮ͠Β͍ͱ͍͏ར఺͕͋Δ

31. ·ͱΊ
     w %SBGUKTΛ࠾༻͢Δҙٛ
    w ͜Ε·Ͱͷڝ߹ϥΠϒϥϦͱൺֱͯ͠ɺ3FBDUίϯϙʔωϯτͰ͋Δ͜ͱ͕༏Ґͱͳ͓ͬͯ Γɺݱ୅తͳ+BWB4DSJQU։ൃͱڝ߹͠ͳ͍࢓༷ͱͳ͍ͬͯΔ
    w *NBHF.BHJDLΑΖ͘͠ͳ࢓༷Ͱશͯ%SBGUKTϑΥʔϚοτʹҰ౓མͱ͠ࠐΉ౎߹্ɺ༷ʑͳ࢓ ༷΍੍໿Λ·͍ͨͰͷςΩετฤू͕Մೳ
    w

    ਖ਼͘͠4UBOEBSEͳ࢓༷Λอͭ͜ͱʹΑΓɺ௕͘࢖ΘΕ΍͍͢ϥΠϒϥϦͱͳ͍ͬͯΔ
    w ͭΒ͞
    w ଴ͯͲ฻ΒͤͲ҆ఆ͠ͳ͍ϥΠϒϥϦͳͷͰɺ͋Δఔ౓ۤ͠Ή֮ޛͰ࢖͏͜ͱ
    w ͦͷ֮ޛ͑͋͞Ε͹շద͔ͭݎ࿚ͳੈքͰͷςΩετฤू͕Մೳ

32. Draft.js࢖͍·͠ΐ͏

33. ͓ΘΓʹ

34. None