React + contenteditable で作る魔のフォーム Gotanda.js #9

Transcript

1. Copyright(C) 2017 Findy Inc. All rights reserved. React + Contenteditable Ͱ࡞Δ ຐͷϑΥʔϜ CTO ࠤ౻ কߴ (@ma3tk) 2017/10/06(ۚ) Gotanda.js
2. Copyright(C) 2017 Findy Inc. All rights reserved. 2 ࠓ೔ͷൃදʹ͍ͭͯ •  ޒ൓ాͷάϧϝ৘ใʹ͍ͭͯ͸͓࿩͠·ͤΜ(?) •  ଜ্य़थ͕͍ͭϊʔϕϧจֶ৆͕औΕΔ͔ʹ͍ͭͯ ͸࿩͠·ͤΜ •  React Ͱ WYSIWYG ͳΤσΟλ(ϑΥʔϜ)Λ࡞ͬͯ ਏ͔ͬͨ(ݱࡏਐߦܥ)ͱ͍͏͓࿩Λ͠·͢
3. Copyright(C) 2017 Findy Inc. All rights reserved. Զ is ୭ 3 ϑΝΠϯσΟגࣜձࣾ औక໾CTOɿࠤ౻ কߴ ɹ·ͨ͞Μ (@ma3tk) ޒ൓ా.js ͸͡Ίͯ ౦ژେֶ৘ใཧ޻ֶܥݚڀՊ૑଄৘ใֶઐ߈ଔۀޙɺάϦʔΛܦͯ Findyͷ૑ۀʹࢀըɻେֶӃͰ͸ɺҴ༿ਅཧݚڀࣨʹॴଐɻաڈ10೥෼ ͷ࿦จʹର͠࿦จؒͷྨࣅ౓Λɺࣗવݴޠॲཧ΍σʔλϚΠχϯάʹ ΑΓ಺༰ͷղੳΛఆྔతɾఆੑతʹߦ͏͜ͱͰࢉग़͢Δ࿦จΛࣥචɻ άϦʔͰ͸ήʔϜϓϥοτϑΥʔϜͷ։ൃɺNativeήʔϜͷ։ൃɺQA ΤϯδχΞΛܦݧ͠ɺϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ։ൃʹਫ਼ ௨͍ͯ͠ΔɻےτϨ͕޷͖ɻ࠷ۙ͸ݞτϨʹϋϚ͍ͬͯΔɻB:100 D: 130 S:130
4. Copyright(C) 2017 Findy Inc. All rights reserved. ͓Ͷ͕͍ 4 ͓खॊΒ͔ʹ ͓ئ͍͠·͢
5. Copyright(C) 2017 Findy Inc. All rights reserved. 5 Findy Score ग़ͨ͠ •  اۀͷਓࣄ޲͚ϓϩμΫτ •  ืूཁ߲ͷςΩετΛೖΕΔͱɺ ʮ100఺ຬ఺தԿ఺ͷग़དྷ͔ʯ͕Θ͔ΔϑΥʔϜ •  2016೥9݄ϦϦʔε
6. Copyright(C) 2017 Findy Inc. All rights reserved. ߏ੒ ͸ׂΓͱϞμϯ 6 ϑϩϯτΤϯυ •  ES2015 •  React •  Redux •  Webpack όοΫΤϯυ •  Ruby on Rails (API௨৴) •  Heroku •  AWS
7. Copyright(C) 2017 Findy Inc. All rights reserved. ͜ͷαʔϏεͷ๻ʹͱͬͯͷٕज़తͳπϥϛ 7 • Contenteditable • ॳReactαʔϏε
8. Copyright(C) 2017 Findy Inc. All rights reserved. ͜ͷαʔϏεͷ๻ʹͱͬͯͷٕज़తͳπϥϛ 8 Ͳ͕͜ਏ͍ʁ
9. Copyright(C) 2017 Findy Inc. All rights reserved. 9 ਏ͍ͱ͜Ζ
10. Copyright(C) 2017 Findy Inc. All rights reserved. 10 ਏ͍ͱ͜Ζ ⊗͜͜
11. Copyright(C) 2017 Findy Inc. All rights reserved. ⛈ Contenteditable 11 Έͳ͞Μ͸ Contenteditable ͬͯ஌ͬͯ·͔͢ʁ
12. Copyright(C) 2017 Findy Inc. All rights reserved. ⛈ Contenteditable ྫ1 12
13. Copyright(C) 2017 Findy Inc. All rights reserved. ⛈ Contenteditable ྫ2 13
14. Copyright(C) 2017 Findy Inc. All rights reserved. ⛈ Contenteditable ྫ3 14
15. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable ਖ਼ମ 15
16. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable ͷਖ਼ମ͸ ଐੑ 16
17. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable ͷ࢓༷ 17 ࢀߟ: https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
18. Copyright(C) 2017 Findy Inc. All rights reserved. ཁ݅ 18 কདྷతʹ •  ςΩετϋΠϥΠτ •  ࿮ғ͍ •  Օ৚ॻ͖ •  ݟग़͠ ͳͲʹରԠͨ͠αʔϏεʹ͍ͨ͠ ※޻਺తʹஅ೦ͨ͠··Ͱ͢ɻ ୭͔ʙʙ
19. Copyright(C) 2017 Findy Inc. All rights reserved. ཁ݅ 19 ʹWYSIWYG ΤσΟλΛ࡞Δඞཁ͕͋Δ
20. Copyright(C) 2017 Findy Inc. All rights reserved. /‍ Ϣʔβ૚ 20 Ϣʔβ૚తʹ •  IEରԠඞਢ(ਏ͍) •  ςΩετͷίϐϖ͕͋ΔͷͰσʔ λΛਖ਼͘͠insertͰ͖ΔΑ͏ʹ •  UI਌੾ʹ͢ΔͨΊʹϚ΢εΦʔ όʔ౳΋ରԠ
21. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable + IE 21
22. Copyright(C) 2017 Findy Inc. All rights reserved. ⛄ IE ͷಠࣗ࢓༷ʹΑΓ Clipboard API ͡Όͳ͍͠ίϚϯυ͕ҧ͏ 22 https://qiita.com/saitoxu/items/b317ccde7e2af9797288
23. Copyright(C) 2017 Findy Inc. All rights reserved. IE Ͱվߦ͢Δͱ <br> Ͱ͸ͳ͘ <p></p> Ͱғ·ΕΔ 23 https://stackoverflow.com/questions/2057881/avoid-ie-contenteditable-element-to-create-paragraphs-on-enter-key
24. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable + IE 24 IEਏ͍ ※๻ͷ࣮૷ྗෆ଍
25. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable ͚ͩͰ΋ͳ͔ͳ͔ਏ͍ 25 •  ΧʔιϧΛҠಈͨ࣌͠ͷѻ͍ ◦  https://engineering.linecorp.com/ja/blog/detail/145 •  HTML Λอଘͨ͠ࡍʹ੔ܗ͞Εͯ ͍ͳ͍ͱ͍͚ͳ͍ ◦  ݺͼग़͢ͱXSSʹͳͬͯ͠·͏ ◦  http://www.bokukoko.info/entry/2017/10/02/191614 •  Ϛ΢εΦʔόʔɺΩʔϘʔυ γϣʔτΧοτ……
26. Copyright(C) 2017 Findy Inc. All rights reserved. Contenteditable Tsurai 26 Contenteditable ਏ͍ ※๻ͷ࣮૷ྗෆ଍
27. Copyright(C) 2017 Findy Inc. All rights reserved. 2. React 27 React
28. Copyright(C) 2017 Findy Inc. All rights reserved. Reactྺ 28 •  ॳReactαʔϏε •  ʮReact͔͚ͬʔ͆͆͆ʯ •  npmɺjQueryɺES6ɺ TypeScript͋ͨΓ͸࢓ࣄͰ৮ͬ ͯͨ •  JSྺ͸ʮࠓ͸19:40Ͱ͢ʂʯͱ ͍ͬͨจݴΛग़͋ͨ͢Γ͔Β਺ ͑Ε͹20೥ۙ͘৮ͬͯΔݴޠ
29. Copyright(C) 2017 Findy Inc. All rights reserved. React ͱϑΥʔϜ 29 •  React ͰϑΥʔϜૢ࡞͢Δͷਏ͘ͳ͍Ͱ ͔͢ʁ •  ϑΥʔϜܥͷେม͞ ॳظ஋ ೖྗorอଘϘλϯʹΑΔσʔλߋ৽ … ⇛保持用のhiddenςΩετΤϦΞor ॳظϨ ϯμϦϯάޙʹॳظ஋औ͖ͬͯͯ div ʹຒ ΊࠐΉ ͲͪΒ͔ͷղܾࡦ
30. Copyright(C) 2017 Findy Inc. All rights reserved. React ͱϑΥʔϜͱContenteditable 30 •  React + Contenteditable΋ͳ͔ ͳ͔େม •  Virtual DOM ͳͷͰɺϖʔετ ͢Δࡍʹ௚઀HTMLೖΕΒΕͳ͍ React.createElement dangerouslySetInnerHTML={{__ html: text}}
31. Copyright(C) 2017 Findy Inc. All rights reserved. ϥΠϒϥϦͳ͍ͷʁ 31 •  https://github.com/lovasoa/react- contenteditable •  IE11͸ʂʁ ࠷ۙ͸͋ΔΈ͍ͨ ࠓ౓ίϛοτ͠ΐ…
32. Copyright(C) 2017 Findy Inc. All rights reserved. ҰݴͰݴ͏ͱ 32 React ͰϑΥʔϜपΓͷ੍ޚ͠ͳ ͕ΒɺContenteditable Λ࢖ͬͯ WYSIWYG ΤσΟλͱͯ͠௚ײత ʹ࢖͑ΔΑ͏ʹ࣮૷ͯ͠ͳ͓͔ͭ IE΋ରԠ͠ͳ͕Βɺαʔόʹอଘ ͢Δࡍʹ XSS ͕ൃੜ͠ͳ͍Α͏ ʹؾΛ͚ͭΔҊ݅ͱԽͨ͠
33. Copyright(C) 2017 Findy Inc. All rights reserved. ⭕ ·ͱΊ 33 ·ͱΊ
34. Copyright(C) 2017 Findy Inc. All rights reserved. ⭕ ·ͱΊ 34 •  ͦ΋ͦ΋ React ͰϑΥʔϜૢ࡞͢Δͷ͕ େม •  ͦͷ্ʹ Contenteditable ͱ͍͏ةͳ͍ ڮΛ౉Δ͜ͱ΋େม →΋ͬͱ͍͍૊Έ߹Θͤ͋ͬͨؾ͕͢Δ →ྲྀߦΓͩ͠ʙͬͯReactબΜ͡Όବ໨ →͍͍૊Έ߹ΘͤҰॹʹߟ͑·͠ΐ͏ʂ͆