11歳のpixivが迎えた3度のリニューアル

7731d184b7e80c080a19a6c91397f832?s=47 DONABE
December 13, 2018

 11歳のpixivが迎えた3度のリニューアル

ログミーTech Live #2「レガシーシステムのリニューアル」の発表資料です

7731d184b7e80c080a19a6c91397f832?s=128

DONABE

December 13, 2018
Tweet

Transcript

  1. 11ࡀͷpixiv͕ܴ͑ͨ
 3౓ͷϦχϡʔΞϧ pixiv Inc. do7be 2018.12.6

  2. 2 @do7be 2016೥3݄த్ೖࣾ UX/UIΤϯδχΞ ओʹPC൛ͷpixivΛ։ൃͯ͠·͢ ࣗݾ঺հ

  3. 3 pixivͷ࡞඼ϖʔδͱ ϓϩϑΟʔϧϖʔδΛ SPAͱͯ͠ϦχϡʔΞϧ͠·ͨ͠ʂ

  4. 4 BOOTH࿮ BOOTH࿮ લޙ࡞඼ લޙ࡞඼

  5. 5 αϯϓϧ༻࡞඼ఏڙɿ্૔ΤΫ

  6. ࠓ೔࿩͢͜ͱ 6 • PC൛pixivͷ࡞඼&ϓϩϑΟʔϧϖʔδϦχϡʔΞϧ
 ʢϩάΠϯޙͷΈʣ • ↑ʹࢸΔ·Ͱͷ2౓ͷϦχϡʔΞϧͷࣦഊ • ϑϩϯτΤϯυͷٕज़มભ

  7. 7 • αʔόαΠυશൠ • SPAͷϕετϓϥΫςΟε • ϦχϡʔΞϧͷৄ͍݁͠Ռɺཪ࿩ͳͲ • εϚʔτϑΥϯ൛ɺΞϓϦ൛ͷ͜ͱ ࿩͞ͳ͍͜ͱ

  8. ຊϦχϡʔΞϧʹࢸΔ·Ͱ 8

  9. 2೥΄Ͳલ αʔϏεͷશ໘తͳ ϦχϡʔΞϧΛߦ͏ 9

  10. 10

  11. 11

  12. 12 jQuery࣮૷ʹΑΔϞʔμϧ
 (SPAͷยྡྷ)

  13. 1೥΄Ͳલ ࡞඼ϖʔδͷΈͷ ϦχϡʔΞϧΛߦ͏ 13

  14. 14

  15. 15 σβΠϯɺػೳͷಉ࣌ϦχϡʔΞϧ

  16. ༷ʑͳཧ༝͔Β͜ͷ2౓ͷϦχϡʔΞϧ͸தࢭ 11೥࢖͍ଓ͚͍ͯΔϢʔβʔʹͱͬͯ େن໛ͳϦχϡʔΞϧ͸ड͚ೖΕͮΒ͍ 16

  17. ͜ͷ2౓ͷࣦഊ͔Βಘͨ஌ݟ 17

  18. 18 σβΠϯͱػೳΛ ಉ࣌ʹϦχϡʔΞϧ͠ͳ͍

  19. தࢭ͔Βಘͨࠓޙͷํ਑ • σβΠϯ͔ػೳͷͲͪΒ͔ͷΈͷϦχϡʔΞϧΛߦ͏ • ϦχϡʔΞϧ͸ϖʔδ୯Ґ • গ਺Ϣʔβʔ͔ΒϦϦʔε
 ϑΟʔυόοΫΛಘͭͭվળ͢Δ 19

  20. SPAରԠΛݟਾ͑ͯ ೔ৗతʹٕज़ߏ੒Λ Ξοϓσʔτ͍ͯ͘͜͠ͱʹ 20

  21. ϑϩϯτΤϯυͷٕज़มભ 21

  22. 2೥લ • CoffeeScript • Grunt • Handlebars • Stylus •

    jQuery v1.x 22 ݱࡏ • TypeScript • webpack • React/Redux • styled-components • Jest • ESLint, TSLint • jQuery v3.x(Ұ෦ϖʔδ) • Storybook
  23. • v1.x→v3.x • jQuery Migrate plugin • .load, .bind, .ready౳ͷҠߦ

    • <script>Ͱ௚ॻ͖ͷՕॴΛbundle؅ཧԼʹҠಈ 23
  24. • import/exportରԠ • .coffee.d.tsΛ࡞੒ • decaffeinateͰJSʹม׵ • .coffee.d.ts→.d.ts • TSʹॻ͖׵͑Δ

    • શͯͷCoffeeScriptͷҠߦ׬ྃ 24
  25. • grunt-contrib-concat → webpack bundle • task͸package.jsonͷscriptsʹҠߦ • ϦχϡʔΞϧޙͷϖʔδͰ͸
 jQuery͸importͰ͖ͳ͍Α͏ʹͨ͠

    25
  26. • Ҡߦ͸ϑϧεΫϥον • ࢖͍ճͤΔWebAPI΋͋ͬͯଟগָͩͬͨ 26

  27. • ReactԽʹ൐͍Ҡߦ • ͸͡Ί͸CSS Modules • ΑΓίϯτϦϏϡʔτ͕੝Μͳstyled-componentsʹ 27

  28. 28

  29. 29

  30. 30

  31. 31 GitLab CIʹΑΓGitLab PagesͰ ϗεςΟϯά

  32. ·ͱΊ 32

  33. • σβΠϯͱػೳ͸ยํͣͭม͑Δ
 গͣͭ͠ϦχϡʔΞϧ͠ମݧ޲্ʹͭͳ͛Δ • ϦχϡʔΞϧΛதࢭ͔ͨ͠Βͦ݁͜Ռͱͯ͠
 Ϟμϯͳٕज़ʹΞοϓσʔτ͠ଓ͚ΒΕͨ 33

  34. Ͳͷݱ৔ͷϦχϡʔΞϧ΋େม Ϧεέ΍ϐϘοτ΋͋Δ͔΋͠Εͳ͍ 34

  35. ͔͠͠ϦχϡʔΞϧʹ͸ཧ༝͕͋Δ͸ͣ 35

  36. ࣗ෼ͷ৔߹͸Ϣʔβʔͷදݱͱ ޷͖ͳ΋ͷΛ޷͖ͱݴ͑Δ৔ΛकΔͨΊʹ ϦχϡʔΞϧ͕ඞཁͱ൑அ͔ͨ͠ΒؤுΕͨ 36

  37. ఘΊͳ͚Ε͹ϦχϡʔΞϧ͸ୡ੒Ͱ͖Δ 37

  38. ͋ͳͨͷݱ৔ͷϦχϡʔΞϧ ఘΊͳ͍Ͱ͍ͩ͘͞ 38

  39. 39