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

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