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
400
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
6.9k
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.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
XP, Testing and ninja testing
m_seki
3
250
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
Goで作る、開発・CI環境
sin392
0
240
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Embracing the Ebb and Flow
colly
86
4.7k
Balancing Empowerment & Direction
lara
1
430
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Producing Creativity
orderedlist
PRO
346
40k
Designing for humans not robots
tammielis
253
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Git: the NoSQL Database
bkeepers
PRO
430
65k
What's in a price? How to price your products and services
michaelherold
246
12k
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