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.6k
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
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Advance Your Career with Open Source
ivargrimstad
0
540
CSC509 Lecture 04
javiergs
PRO
0
300
開発生産性を上げるための生成AI活用術
starfish719
3
1k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.5k
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
CSC305 Lecture 03
javiergs
PRO
0
240
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
900
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
120
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Thoughts on Productivity
jonyablonski
70
4.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
It's Worth the Effort
3n
187
28k
Embracing the Ebb and Flow
colly
88
4.8k
Six Lessons from altMBA
skipperchong
29
4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
For a Future-Friendly Web
brad_frost
180
9.9k
Building Adaptive Systems
keathley
44
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
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