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

Transcript

1. 1.

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

2. 2.

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

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

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

   ·ͱΊ
4. 4.

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

   ·ͱΊ
5. 5.

   ͸͡Ίʹ

6. 6.

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

7. 7.

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

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

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

   ·ͱΊ
9. 9.

   Draft.js

10. 10.

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

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

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

12. 12.

    https://draftjs.org/

13. 13.

    contentEditable

14. 14.

    None
15. 15.

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

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

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

    ·ͱΊ
17. 17.

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

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

    Demo

19. 19.

    Draft.jsͷར఺

20. 20.

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

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

    %SBGUKTͷར఺

22. 22.

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

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

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

    ·ͱΊ
24. 24.

    ͭΒ͍࿩

25. 25.

    UNMET PEER DEPENDENCY

26. 26.

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

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

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

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

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

    ·ͱΊ
29. 29.

    ·ͱΊ

30. 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. 31.

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

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

    Draft.js࢖͍·͠ΐ͏

33. 33.

    ͓ΘΓʹ

34. 34.

    None