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

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

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
12. 12 jQuery࣮૷ʹΑΔϞʔμϧ
 (SPAͷยྡྷ)
13. 1೥΄Ͳલ ࡞඼ϖʔδͷΈͷ ϦχϡʔΞϧΛߦ͏ 13
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
31. 31 GitLab CIʹΑΓGitLab PagesͰ ϗεςΟϯά
32. ·ͱΊ 32
33. • σβΠϯͱػೳ͸ยํͣͭม͑Δ
 গͣͭ͠ϦχϡʔΞϧ͠ମݧ޲্ʹͭͳ͛Δ • ϦχϡʔΞϧΛதࢭ͔ͨ͠Βͦ݁͜Ռͱͯ͠
 Ϟμϯͳٕज़ʹΞοϓσʔτ͠ଓ͚ΒΕͨ 33
34. Ͳͷݱ৔ͷϦχϡʔΞϧ΋େม Ϧεέ΍ϐϘοτ΋͋Δ͔΋͠Εͳ͍ 34
35. ͔͠͠ϦχϡʔΞϧʹ͸ཧ༝͕͋Δ͸ͣ 35
36. ࣗ෼ͷ৔߹͸Ϣʔβʔͷදݱͱ ޷͖ͳ΋ͷΛ޷͖ͱݴ͑Δ৔ΛकΔͨΊʹ ϦχϡʔΞϧ͕ඞཁͱ൑அ͔ͨ͠ΒؤுΕͨ 36
37. ఘΊͳ͚Ε͹ϦχϡʔΞϧ͸ୡ੒Ͱ͖Δ 37
38. ͋ͳͨͷݱ৔ͷϦχϡʔΞϧ ఘΊͳ͍Ͱ͍ͩ͘͞ 38