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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Biography • Ֆ୩୓ຏ a.k.a. @potato4d • େࡕग़਎ˠࠓ೥͔Β౦ژੜ׆ • 1998/04/13 • pixiv inc. ΤϯδχΞ • FRONTEND CONFERENCE 2017 ࣮ߦҕһ௕ • ͷΞΠίϯͰࣾ಺ϒϩάʹࡌͬͨ • ීஈVue.js͋ͨΓͷք۾ʹ͍·͢

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

͸͡Ίʹ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Draft.js

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

https://draftjs.org/

Slide 13

Slide 13 text

contentEditable

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

DPOUFOU&EJUBCMF w )5.-্ͷ͋ΒΏΔཁૉΛฤूՄೳʹ͢Δ)5.-"UUSJCVUF w ࣮͸ଠݹͷੲ͔ΒͻͬͦΓͱੜ͖͍ͯΔ΋ͷ *&ʹ΋͋Δ w ݱࡏ͸)5.-ͷଐੑͱͯ͠ਖ਼ࣜʹ࢓༷ೖΓ͍ͯ͠Δ w )5.-্Ͱߴ౓ͳςΩετฤूΛ͢Δࡍ͸ඞͣग़ͯ͘Δ֓೦ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-(MPCBM@BUUSJCVUFTDPOUFOUFEJUBCMF

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

%SBGUKTͰͰ͖Δ͜ͱ w ͍͍ͩͨͷςΩετฤू w બ୒ൣғͷςΩετͷจࣈ૷০ͷมߋ ৭େ͖͞ॻମ w %%ͨ͠ը૾ΛฤूΤϦΞʹͦͷ··දࣔ w Α͋͘Δϙοϓϝχϡʔ΍ɺ͍ΘΏΔʮΈͨ··Ϟʔυʯͷར༻ w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ w 3FBDUʹΑΔ౷߹తͳঢ়ଶͷ؅ཧ w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ

Slide 18

Slide 18 text

Demo

Slide 19

Slide 19 text

Draft.jsͷར఺

Slide 20

Slide 20 text

%SBGUKTͷར఺ w શͯͷϑΥʔϚοτΛҰ౓FEJUPS4UBUFʹม׵͢Δ w %SBGUKT͸ɺ*NBHF.BHJDLͷΑ͏ʹɺ༷ʑͳςΩετͷܗࣜΛҰ౓3FBDUίϯϙʔωϯτ্ͷ 4UBUFͱͯ͠ม׵ɺอ࣋͢Δ࢓૊ΈΛ͍࣋ͬͯΔ w ͜ΕʹΑΓ༷ʑͳϑΥʔϚοτͷ૬ޓม׵͕Մೳ w ۃ୺ͳྫͰݴ͏ͱɺ.BSLEPXO͔͠ॻ͖ͨ͘ͳ͍ਓ͸.%UP)5.-ͷม׵Λͯ͠΋ྑ͍ ࣮࣭ QBOEPDΈ͍ͨͳ͜ͱ΋Ͱ͖Δ w ॻࣜҎ֎ʹ΋ɺྫ͑͹͕6OJDPEFͰ͋Δ΂͖͔UIJOLJOHͰ͋Δ΂͖͔͸จ຺ʹґଘ͢Δ w ͦ͏͍ͬͨࠩҟΛؾʹͤͣʹར༻Ͱ͖ΔΠϯλʔϑΣʔεͱϓϥάΠϯ͕ॆ࣮͍ͯ͠Δ w ʮͲ͏͍͏࣮૷ͷ౎߹͔ʯͰ͸ͳ͘ɺʮͲ͏ॻ͖͍͔ͨʯ໨ઢʹͨͭ͜ͱ͕Ͱ͖Δ

Slide 21

Slide 21 text

%SBGUKTͷར఺

Slide 22

Slide 22 text

%SBGUKTͷར఺ w 3FBDUίϯϙʔωϯτͱͯ͠؅ཧ͞ΕΔ͜ͱʹΑΔ w શͯ͸3FBDUͷίϯϙʔωϯτͱͯ͠؅ཧ͞Ε͍ͯ͘ w ΤσΟλपΓͷϥΠϒϥϦಛ༗ͷɺಠࣗΠϕϯτಠࣗϑοΫͱ͍͏࢓༷͔Β͸։์͞ΕΔ w 3FBDUΛܦ༝ͯ͠%0.΁ͷυϩʔ͸ߦΘΕΔͨΊɺൺֱత੍ޚ͠΍͍͢ w 41"ͳͲʹಋೖ͢Δࡍʹ3FBDUͰ͋Ε͹Ͳ͏΍ͬͯ΋݌՞͢Δ͜ͱ͕ͳ͍ w ݱ୅తͳ։ൃΛ·ͱ΋ʹߦ͏ͨΊͷػೳ͕ἧ͍ͬͯΔҎ্ͷ࿩Ͱ͸ͳ͍

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͭΒ͍࿩

Slide 25

Slide 25 text

UNMET PEER DEPENDENCY

Slide 26

Slide 26 text

ͭΒ͍࿩ w ۃ୺ʹ҆ఆ͠ͳ͍ w ٱʑʹґଘؔ܎ΛೖΕ௚͢ͱյΕΔͷ͸೔ৗ஡൧ࣄ ճҎ্΍ͬͨؾ͕͢Δ w ϚΠφʔόʔδϣϯ͕Ұ্͕ͭΔ͚ͩͰେମϓϥάΠϯಉ࢜Ͱڝ߹͢Δɺ΋͘͠͸ޓ׵ੑ͕੾ ΕΔͷͰಋೖ͍ͯ͠Δ΋ͷΛҰͭͣͭ௥͍ͬͯ͘ඞཁ͕͋Δ w ௥͍ଧͪΛ͔͚ΔΑ͏ʹൃల్্Ώ͑ͷΞϓσͷଟ͞ ͿͬյΕ΍͢͞ w ೔༵ϓϩδΣΫτͩͱ΍͍ͬͯΔ͏ͪʹͭΒ͘ͳͬͯ͘Δ w ґଘؔ܎ʹνϧμΛ࢖ͬͯ͸͍͚ͳ͍

Slide 27

Slide 27 text

ͭΒ͍࿩ w ྑ͘΋ѱ͘΋3FBDUґଘ w ͍ͭ΋௨Γ'BDFCPPL͕ѱ͍ w ݸਓతʹ޷͖ͳ7VFKTͳͲͱ૊Έ߹ΘͤΔͷ͸ݫ͍͠ͷͰͦͪΒΛར༻͢Δ৔߹͸5JOZ.$&͋ ͨΓͰ͓஡Λ୙͔͢͠ͳ͍ w ϑϩϯτΤϯυͷ੎ྗਤ͕͹Β͍͍ͭͯΔ͔Βͦ͜ͳ͔ͳ͔ྲྀߦΒͳ͍ w ྲྀߦΒͳ͍ͷͰւ֎ͷϓϥάΠϯΛؾ߹Ͱൃ۷ͯ͠ݕূ͍ͯ͘͠࡞ۀ w ؾ߹Ͱ΍ͬͯΔͱґଘؔ܎͕ͿͬյΕͯͭΒ͍ w ґଘؔ܎͕ͿͬյΕͯͭΒ͍

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

·ͱΊ w DPOUFOU&EJUBCMF w )5.-ܥ"1*ͷҰͭʢͱ͸͍͑ଘࡏͰ͍͑͹ͣͬͱ͋ͬͨʣ w )5.-ཁૉʹରͯ͠௚઀తͳհೖɾฤू͕Մೳͳ)5.-BUUSJCVUF w +BWB4DSJQUʹΑΔڧ੍తͳॻ͖׵͑ͱҧ͍ɺ͋Δఔ౓͸4UBOEBSEͳ࢓༷Ͱ͋ΔͨΊɺ݈શͳ ฤू͕Մೳ w %SBGUKT w جຊతʹ͸DPOUFOU&EJUBCMFΛӅṭ͠ɺ3FBDUͷ*'Λ΋ͨͤͨ൚༻ϥΠϒϥϦ w ैདྷܕͷ8:4*8:(ϥΠϒϥϦͱҧ͍ɺଞͷ'8ͳͲͱڝ߹ͮ͠Β͍ͱ͍͏ར఺͕͋Δ

Slide 31

Slide 31 text

·ͱΊ w %SBGUKTΛ࠾༻͢Δҙٛ w ͜Ε·Ͱͷڝ߹ϥΠϒϥϦͱൺֱͯ͠ɺ3FBDUίϯϙʔωϯτͰ͋Δ͜ͱ͕༏Ґͱͳ͓ͬͯ Γɺݱ୅తͳ+BWB4DSJQU։ൃͱڝ߹͠ͳ͍࢓༷ͱͳ͍ͬͯΔ w *NBHF.BHJDLΑΖ͘͠ͳ࢓༷Ͱશͯ%SBGUKTϑΥʔϚοτʹҰ౓མͱ͠ࠐΉ౎߹্ɺ༷ʑͳ࢓ ༷΍੍໿Λ·͍ͨͰͷςΩετฤू͕Մೳ w ਖ਼͘͠4UBOEBSEͳ࢓༷Λอͭ͜ͱʹΑΓɺ௕͘࢖ΘΕ΍͍͢ϥΠϒϥϦͱͳ͍ͬͯΔ w ͭΒ͞ w ଴ͯͲ฻ΒͤͲ҆ఆ͠ͳ͍ϥΠϒϥϦͳͷͰɺ͋Δఔ౓ۤ͠Ή֮ޛͰ࢖͏͜ͱ w ͦͷ֮ޛ͑͋͞Ε͹շద͔ͭݎ࿚ͳੈքͰͷςΩετฤू͕Մೳ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text