Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Draft.jsによる 統制のとれたテキスト編集の世界 #jsfes
Search
potato4d(Takuma HANATANI)
May 27, 2017
Programming
1
1.5k
Draft.jsによる 統制のとれたテキスト編集の世界 #jsfes
potato4d(Takuma HANATANI)
May 27, 2017
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.1k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.8k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
rails newと同時に型を書く
aki19035vc
6
750
テストをしないQAエンジニアは何をしているか?
nealle
0
110
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
280
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
330
Immutable ActiveRecord
megane42
0
130
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
210
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
110
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
520
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
200
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
動作確認やテストで漏れがちな観点3選
starfish719
5
920
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Rails Girls Zürich Keynote
gr2m
94
13k
BBQ
matthewcrist
86
9.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Code Review Best Practice
trishagee
65
17k
Designing Experiences People Love
moore
139
23k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
Transcript
Draft.jsʹΑΔ ౷੍ͷͱΕͨςΩετฤूͷੈք 2017/05/27 HANATANI Takuma a.k.a. @potato4d
Biography • Ֆ୩ຏ a.k.a. @potato4d • େࡕग़ˠࠓ͔Β౦ژੜ׆ • 1998/04/13 •
pixiv inc. ΤϯδχΞ • FRONTEND CONFERENCE 2017 ࣮ߦҕһ • ͷΞΠίϯͰࣾϒϩάʹࡌͬͨ • ීஈVue.js͋ͨΓͷք۾ʹ͍·͢
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
͡Ίʹ
ͳ͢͜ͱɾͳ͞ͳ͍͜ͱ w ࣌ؒ࣌ؒͳͷͰ%SBGUKT͍͢͝ʂͱ͍͏͚ͩ͠·͢ w ͋·Γਂ͍༷ͷɺ࣮ϕʔεͷʹ৮Ε·ͤΜɻ w ໌ͷۀ͕ྑ͘ͳΔࣝʹ৮Ε·ͤΜ
͜Μͳਓʹ͓͢͢Ί w ฤूը໘ͷཁʹରͯ͠UFYUBSFBͰؤுΔ͜ͱʹݶքΛײͨ͡ਓ w 5JOZ.$&ͳͲͷΤσΟλͷঢ়ଶཧ֦ுੑʹෆຬ͕͋Δਓ w ςΩετσʔλ.BSLEPXOҎ֎Θͳ͍ͱ͍͏ڧ͍ҙࢤΛ࣋ͭਓ w 41"ʹ·ͱͳςΩετΤσΟλΛೖΕ͍ͨਓ w
ʮͪΐͬͱ.FEJVNͭͬͯ͘ΑʯͬͯݴΘΕͯࠔͬͯΔਓ
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
Draft.js
%SBGUKT w ͍ΘΏΔ8:4*8:(Λ؆୯ʹ࡞ΔͨΊͷϥΠϒϥϦ w ͓͓Α͍ͦͭͲ͓Γ'BDFCPPL͕։ൃ͍ͯ͠Δ w ʮDPOUFOU&EJUBCMFʯΛӅṭ͠ɺ౷߹ཧͰ͖ΔΑ͏ʹͨ͠ͷ w ΤσΟλͷঢ়ଶ͕3FBDUίϯϙʔωϯτͱͯ͠ఏڙ͞ΕΔ w
ϓϥάΠϯʹΑΔ֦ுΛલఏͱ͓ͯ͠Γɺඇৗʹ൚༻తͳ*'Λఏڙ IUUQTESBGUKTPSH
%SBGUKT %0.ϕʔεͷςΩετฤूͷநԽϥΠϒϥϦ IUUQTESBGUKTPSH
https://draftjs.org/
contentEditable
None
DPOUFOU&EJUBCMF w )5.-্ͷ͋ΒΏΔཁૉΛฤूՄೳʹ͢Δ)5.-"UUSJCVUF w ࣮ଠݹͷੲ͔ΒͻͬͦΓͱੜ͖͍ͯΔͷ *&ʹ͋Δ w ݱࡏ)5.-ͷଐੑͱͯ͠ਖ਼ࣜʹ༷ೖΓ͍ͯ͠Δ w
)5.-্ͰߴͳςΩετฤूΛ͢Δࡍඞͣग़ͯ͘Δ֓೦ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-(MPCBM@BUUSJCVUFTDPOUFOUFEJUBCMF
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
%SBGUKTͰͰ͖Δ͜ͱ w ͍͍ͩͨͷςΩετฤू w બൣғͷςΩετͷจࣈ০ͷมߋ ৭େ͖͞ॻମ w %%ͨ͠ը૾ΛฤूΤϦΞʹͦͷ··දࣔ w
Α͋͘Δϙοϓϝχϡʔɺ͍ΘΏΔʮΈͨ··Ϟʔυʯͷར༻ w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ w 3FBDUʹΑΔ౷߹తͳঢ়ଶͷཧ w ͦͷଞଟ͘ͷػೳʢϓϥάΠϯґଘʣ
Demo
Draft.jsͷར
%SBGUKTͷར w શͯͷϑΥʔϚοτΛҰFEJUPS4UBUFʹม͢Δ w %SBGUKTɺ*NBHF.BHJDLͷΑ͏ʹɺ༷ʑͳςΩετͷܗࣜΛҰ3FBDUίϯϙʔωϯτ্ͷ 4UBUFͱͯ͠มɺอ࣋͢ΔΈΛ͍࣋ͬͯΔ w ͜ΕʹΑΓ༷ʑͳϑΥʔϚοτͷ૬ޓม͕Մೳ w ۃͳྫͰݴ͏ͱɺ.BSLEPXO͔͠ॻ͖ͨ͘ͳ͍ਓ.%UP)5.-ͷมΛͯ͠ྑ͍
࣮࣭ QBOEPDΈ͍ͨͳ͜ͱͰ͖Δ w ॻࣜҎ֎ʹɺྫ͕͑6OJDPEFͰ͋Δ͖͔UIJOLJOHͰ͋Δ͖͔จ຺ʹґଘ͢Δ w ͦ͏͍ͬͨࠩҟΛؾʹͤͣʹར༻Ͱ͖ΔΠϯλʔϑΣʔεͱϓϥάΠϯ͕ॆ࣮͍ͯ͠Δ w ʮͲ͏͍͏࣮ͷ߹͔ʯͰͳ͘ɺʮͲ͏ॻ͖͍͔ͨʯઢʹͨͭ͜ͱ͕Ͱ͖Δ
%SBGUKTͷར
%SBGUKTͷར w 3FBDUίϯϙʔωϯτͱͯ͠ཧ͞ΕΔ͜ͱʹΑΔ w શͯ3FBDUͷίϯϙʔωϯτͱͯ͠ཧ͞Ε͍ͯ͘ w ΤσΟλपΓͷϥΠϒϥϦಛ༗ͷɺಠࣗΠϕϯτಠࣗϑοΫͱ͍͏༷͔Β։์͞ΕΔ w 3FBDUΛܦ༝ͯ͠%0.ͷυϩʔߦΘΕΔͨΊɺൺֱత੍ޚ͍͢͠ w
41"ͳͲʹಋೖ͢Δࡍʹ3FBDUͰ͋ΕͲ͏ͬͯ՞͢Δ͜ͱ͕ͳ͍ w ݱతͳ։ൃΛ·ͱʹߦ͏ͨΊͷػೳ͕ἧ͍ͬͯΔҎ্ͷͰͳ͍
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
ͭΒ͍
UNMET PEER DEPENDENCY
ͭΒ͍ w ۃʹ҆ఆ͠ͳ͍ w ٱʑʹґଘؔΛೖΕ͢ͱյΕΔͷৗ൧ࣄ ճҎ্ͬͨؾ͕͢Δ w ϚΠφʔόʔδϣϯ͕Ұ্͕ͭΔ͚ͩͰେମϓϥάΠϯಉ࢜Ͱڝ߹͢Δɺ͘͠ޓੑ͕ ΕΔͷͰಋೖ͍ͯ͠ΔͷΛҰ͍ͭͣͭͬͯ͘ඞཁ͕͋Δ
w ͍ଧͪΛ͔͚ΔΑ͏ʹൃల్্Ώ͑ͷΞϓσͷଟ͞ ͿͬյΕ͢͞ w ༵ϓϩδΣΫτͩͱ͍ͬͯΔ͏ͪʹͭΒ͘ͳͬͯ͘Δ w ґଘؔʹνϧμΛ͍͚ͬͯͳ͍
ͭΒ͍ w ྑ͘ѱ͘3FBDUґଘ w ͍ͭ௨Γ'BDFCPPL͕ѱ͍ w ݸਓతʹ͖ͳ7VFKTͳͲͱΈ߹ΘͤΔͷݫ͍͠ͷͰͦͪΒΛར༻͢Δ߹5JOZ.$&͋ ͨΓͰ͓Λ͔͢͠ͳ͍ w ϑϩϯτΤϯυͷྗਤ͕Β͍͍ͭͯΔ͔Βͦ͜ͳ͔ͳ͔ྲྀߦΒͳ͍
w ྲྀߦΒͳ͍ͷͰւ֎ͷϓϥάΠϯΛؾ߹Ͱൃ۷ͯ͠ݕূ͍ͯ͘͠࡞ۀ w ؾ߹ͰͬͯΔͱґଘ͕ؔͿͬյΕͯͭΒ͍ w ґଘ͕ؔͿͬյΕͯͭΒ͍
"HFOEB w ͡Ίʹ w %SBGUKTͱDPOUFOU&EJUBCMF w ಛͱબఆ͢ΔϝϦοτʹ͍ͭͯ w ͭΒ͍ w
·ͱΊ
·ͱΊ
·ͱΊ w DPOUFOU&EJUBCMF w )5.-ܥ"1*ͷҰͭʢͱ͍͑ଘࡏͰ͍͑ͣͬͱ͋ͬͨʣ w )5.-ཁૉʹରͯ͠తͳհೖɾฤू͕Մೳͳ)5.-BUUSJCVUF w +BWB4DSJQUʹΑΔڧ੍తͳॻ͖͑ͱҧ͍ɺ͋Δఔ4UBOEBSEͳ༷Ͱ͋ΔͨΊɺ݈શͳ ฤू͕Մೳ
w %SBGUKT w جຊతʹDPOUFOU&EJUBCMFΛӅṭ͠ɺ3FBDUͷ*'Λͨͤͨ൚༻ϥΠϒϥϦ w ैདྷܕͷ8:4*8:(ϥΠϒϥϦͱҧ͍ɺଞͷ'8ͳͲͱڝ߹ͮ͠Β͍ͱ͍͏ར͕͋Δ
·ͱΊ w %SBGUKTΛ࠾༻͢Δҙٛ w ͜Ε·Ͱͷڝ߹ϥΠϒϥϦͱൺֱͯ͠ɺ3FBDUίϯϙʔωϯτͰ͋Δ͜ͱ͕༏Ґͱͳ͓ͬͯ Γɺݱతͳ+BWB4DSJQU։ൃͱڝ߹͠ͳ͍༷ͱͳ͍ͬͯΔ w *NBHF.BHJDLΑΖ͘͠ͳ༷Ͱશͯ%SBGUKTϑΥʔϚοτʹҰམͱ͠ࠐΉ߹্ɺ༷ʑͳ ੍༷Λ·͍ͨͰͷςΩετฤू͕Մೳ w
ਖ਼͘͠4UBOEBSEͳ༷Λอͭ͜ͱʹΑΓɺ͘ΘΕ͍͢ϥΠϒϥϦͱͳ͍ͬͯΔ w ͭΒ͞ w ͯͲΒͤͲ҆ఆ͠ͳ͍ϥΠϒϥϦͳͷͰɺ͋Δఔۤ͠Ή֮ޛͰ͏͜ͱ w ͦͷ֮ޛ͑͋͞Εշద͔ͭݎ࿚ͳੈքͰͷςΩετฤू͕Մೳ
Draft.js͍·͠ΐ͏
͓ΘΓʹ
None