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
Le côté obscur des IA génératives
pascallemerrer
0
140
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Advance Your Career with Open Source
ivargrimstad
0
480
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
370
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
130
XP, Testing and ninja testing ZOZ5
m_seki
3
620
CSC305 Lecture 06
javiergs
PRO
0
220
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
820
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
980
CSC509 Lecture 03
javiergs
PRO
0
330
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
150
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Automating Front-end Workflow
addyosmani
1371
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Writing Fast Ruby
sferik
629
62k
A better future with KSS
kneath
239
18k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
75
5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Leading Effective Engineering Teams in the AI Era
addyosmani
1
26
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