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
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.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
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
400
DataformでPythonする / dataform-de-python
snhryt
0
130
Comparing decimals in Swift Testing
417_72ki
0
150
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
490
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
330
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
構文解析器入門
ydah
7
2k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
新しいモバイルアプリ勉強会(仮)について
uetyo
1
240
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Docker and Python
trallard
45
3.5k
Building Adaptive Systems
keathley
43
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Thoughts on Productivity
jonyablonski
69
4.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Why Our Code Smells
bkeepers
PRO
337
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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