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

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