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

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

Bbed45e2f0eef934d5b893a9cd8a33b7?s=128

Masataka Sato

October 06, 2017
Tweet

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બΜ͡Όବ໨ →͍͍૊Έ߹ΘͤҰॹʹߟ͑·͠ΐ͏ʂ͆