ikyu-frontend

3.29 Sansan✕一休.com 勉強会での発表資料です

Transcript

1. Ұٳ.com ʹ͓͚Δ ϑϩϯτΤϯυ։ൃ ʙSansan✕Ұٳ ϑϩϯτΤϯυษڧձʙ kensuke tanaka (@kentana20)
2. About me • ాத ݈հ • @kentana20 • 2006೥5݄͔ΒҰٳ • ॓ധαʔϏε։ൃ(9೥)
 →γεςϜຊ෦(1೥)

3. Agenda • Ұٳ.com & ࠾༻ٕज़ / Tools • ։ൃମ੍ɺ։ൃϑϩʔ • σβΠφʔͱͷίϥϘϨʔγϣϯ • ϚʔέςΟϯάɺCSͱͷίϥϘϨʔγϣϯ
4. ຊ೔ͷςʔϚ ϑϩϯτΤϯυ։ൃͷ࣮ྫ
5. ͝஫ҙ • ϑϩϯτΤϯυ։ൃͷલஈͷ࿩Λ͠·͢ • ͍͔ʹͯ͠σβΠφʔ΍ϚʔέςΟϯάɺCS
 ΤϯδχΞͷίϥϘϨʔγϣϯΛߴΊ͍ͯΔ͔ ͱ͍͏࿩͕ϝΠϯͰ͢ • Tech੒෼͸গͳΊ • ޙฤͰผ్͓࿩͍͖ͤͯͨͩ͞·͢
6. Ұٳ.com & ࠾༻ٕज़ / Tools
7. About Ұٳ.com
9. Ұٳ.com • ओྗαʔϏε • ্࣭ͳϗςϧɾཱྀؗͷ༧໿αʔϏε • 2000೥5݄Φʔϓϯͷ15ࡀ
10. Ұٳ.com KPI (2015.03) • ձһ਺: 400ສ+ • ϗςϧ/ཱྀؗ਺: 2,600ࢪઃ+ • ೥ؒൢചࣨ਺: 189ສࣨ+
11. ͓ྡ͞·
12. ࠾༻ٕज़ / Tools
13. ࠾༻ٕज़ / Tools • ASP.NET WebForms/MVC (VB/C#) • IIS, SQLServer, Solr • Sass, Compass • GitHub Enterprise • nxlog, Fluentd, Elasticsearch, Google Big Query • Jenkins, Selenium WebDriver • NewRelic, Kibana, Bugsnag • Redmine, Trello, Slack, Hubot
14. ࠾༻ٕज़ / Tools (2೥લ) • ASP.NET WebForms/MVC (VB/C#) • IIS, SQLServer, Solr • Sass, Compass • GitHub Enterprise • nxlog, Fluentd, Elasticsearch, Google Big Query • Jenkins, Selenium WebDriver • NewRelic, Kibana, Bugsnag • Redmine, Trello, Slack, Hubot
15. ࠾༻ٕज़ / Tools (1೥લ) • ASP.NET WebForms/MVC (VB/C#) • IIS, SQLServer, Solr • Sass, Compass • GitHub Enterprise • nxlog, Fluentd, Elasticsearch, Google Big Query • Jenkins, Selenium WebDriver • NewRelic, Kibana, Bugsnag • Redmine, Trello, Slack, Hubot
16. ։ൃମ੍ɾ։ൃϑϩʔ
17. ։ൃମ੍
18. ։ൃମ੍(2016.3) αʔϏε։ൃ
    ΤϯδχΞ
 ໊ ج൫ܥΤϯδχΞ
 ໊ ΠϯϑϥΤϯδχΞ
 ໊ σβΠφʔ
 ໊ %FW %FT %FW 0QT Ϛʔέ
    एׯ໊ .LU
19. ։ൃମ੍(2016.3) αʔϏε։ൃ
    ΤϯδχΞ
 ໊ ج൫ܥΤϯδχΞ
 ໊ ΠϯϑϥΤϯδχΞ
 ໊ σβΠφʔ
 ໊ %FW %FT %FW 0QT Ϛʔέ
    एׯ໊ .LU
20. σβΠφʔ͸3ͭͷάϧʔϓͰߏ੒ ը૾
    ੩తϖʔδ ΫϦΤΠςΟϒ
    σβΠϯ ίʔσΟϯά
21. ը૾
    ੩తϖʔδ ΫϦΤΠςΟϒ
    σβΠϯ ίʔσΟϯά %FW σβΠφʔ΋3ͭͷϢχοτ ΤϯδχΞͱΑ͘ίϥϘ͢Δͷ͸ ΫϦΤΠςΟϒσβΠϯͱίʔσΟϯά Λ͍ͯ͠ΔνʔϜ
22. σβΠφʔͱͷίϥϘϨʔγϣϯ
23. աڈ
24. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ։ൃ؀ڥ • ΤϯδχΞ͸֤ࣗϩʔΧϧͰ࡞ۀ • σβΠφʔ͸ڞ༻αʔό্Ͱશһ͕࡞ۀ • ڞ༻αʔό͸ΤϯδχΞ͕ि࣍Ͱߋ৽ • ڞ༻αʔόͷࢿࡐ͸ΤϯδχΞ͕ίϛοτ
25. چࣜͷίϥϘϨʔγϣϯ ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ 3FQPTJUPSZ $PNNJU
26. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽
    ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF چࣜͷίϥϘϨʔγϣϯ
27. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽
    ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF σβΠϯ࡞ۀ چࣜͷίϥϘϨʔγϣϯ
28. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽
    ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU چࣜͷίϥϘϨʔγϣϯ
29. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽
    ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU 4UBHJOH؀ڥ %FQMPZ چࣜͷίϥϘϨʔγϣϯ
30. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽
    ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU 4UBHJOH؀ڥ %FQMPZ ຊ൪؀ڥ چࣜͷίϥϘϨʔγϣϯ
31. ͭΒ͍
32. ίϥϘͷͨΊͷίετ͕ߴ͔ͬͨ • ΤϯδχΞ • ڞ༻σβΠϯ؀ڥͷϝϯς͠ΜͲ͍ • ڞ༻ͳͷͰϒϥϯν෼͚ͯ࡞ۀ͓ئ͍ͮ͠Β͍ • σβΠφʔ • ڞ༻σβΠϯ؀ڥ͕ϝϯς͞Εͳ͍ͱ࡞ۀͰ͖ͳ͍ • σβΠφʔಉ࢜Ͱ࡞ۀ͕ڝ߹
33. ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ
 Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि
 ݴ͑͹͍͍͔)
34. ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ
 Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि
 ݴ͑͹͍͍͔) ΤϯδχΞͱσβΠφʔͷڑ཭͕ ԕ͔ͬͨ
35. ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ
 Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि
 ݴ͑͹͍͍͔) ͜ΕͰ͸Ϣʔβʹ Ձ஋Λૣ͘ಧ͚ΒΕͳ͍
37. σβΠφʔ΋GitHub FlowͰ • ࡞ۀ؀ڥɺϫʔΫϑϩʔΛΤϯδχΞͱἧ͑ͨ • ΤϯδχΞͱಉ༷ʹϩʔΧϧʹ։ൃ؀ڥΛ੔උ
 (؀ڥߏஙͱ࠷৽ԽɺϏϧυͳͲ͸ࣗಈԽ) • σβΠφʔ΋։ൃ༻ϒϥϯνͰ࡞ۀ • ϓϧϦΫ্ͰίϥϘϨʔγϣϯ
38. σβΠϯ࡞ۀͷϒϥϯνઓུ NBTUFS EYYYY EZZZZ EYYYY EYYYY EZZZZ EZZZZ DIFDLPVU DIFDLPVU NFSHF
    1VMM
    3FRVFTU NFSHF
    1VMM
    3FRVFTU 4UBHJOH
39. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ
    σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ
    ؀ڥ 3FQPTJUPSZ $PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ ΤϯδχΞͱͷίϥϘϨʔγϣϯ $PNNJU1VTI 4UBHJOH؀ڥ ຊ൪؀ڥ %FQMPZ
40. ࣮ࡍͷϓϧϦΫྫ
41. ࣮ࡍͷϓϧϦΫྫ
42. ࣮ࡍͷϓϧϦΫྫ
43. ஍ಓͳ౒ྗ΋ • Gitʹ׳Εͯ΋Β͏ͨΊ • σβΠφʔ޲͚ͷࣾ಺ϫʔΫγϣοϓ • ಋೖ࣌͸ΦϯαΠτͰϑϧαϙʔτ • ಋೖޙʹ;Γ͔͑Γ
44. Sass
45. Sassಋೖͷഎܠ • ϗςϧɾཱྀؗΛѻ͏ Ұٳ.com • ϏδωεϗςϧΛѻ͏Ұٳ.com Ϗδωε
46. ͓ޓ͍ͭΒ͔ͬͨ • ΤϯδχΞ • ϏϋΠϯυίʔυʹுΓ෇͍ͨۀ຿ϩδοΫͷ ॏෳ • σβΠφʔ • ྨࣅը໘ͷଘࡏ(CSS΋Ұ෦Λআ͍ͯॏෳ)
47. ͭΒ͍
48. ϩδοΫ౷߹ʴSassಋೖ • ΤϯδχΞ • ϩδοΫ౷߹ͯ͠ϏϋΠϯυίʔυΛ1ͭʹ • σβΠφʔ • Sassಋೖͯ͠ޮ཰Խɾߏ଄Խ
49. ׳Εͯ΋Β͏ • Sassಋೖܦݧͷ͋ΔσβΠφʔओಋ • ߨٛࣜͷηϛφʔ • ΤϯδχΞ΋ϑΥϩʔ • Sass࡞ۀ؀ڥ͸ͳΔ΂ࣗ͘ಈԽ
50. લਐதʹࣄނ΋
53. ϩʔΧϧ؀ڥͰCSSޮ͔ͳ͍
54. ߄ͯͯϏϧυόον΋௥͍͔͚ରԠ
55. Try&ErrorͰΞΫγϣϯܧଓ • ΤϯδχΞɺσβΠφʔͷ೔ʑͷෆຬΛΩϟον Ξοϓ • ղܾࡦΛߟ͑ͯTry&Error • ໎࿭Λ͔͚Δ͜ͱ΋͋Δ͚Ͳલਐͯ͠·͢
56. ϚʔέςΟϯάɺCSͱͷ ίϥϘϨʔγϣϯ
57. աڈ
58. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ
    σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ
    ؀ڥ 3FQPTJUPSZ $PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ GitಋೖޙͷϫʔΫϑϩʔ(લड़) $PNNJU1VTI 4UBHJOH؀ڥ %FQMPZ
59. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ
    σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ
    ؀ڥ σβΠϯ࡞ۀ ϚʔέςΟϯά / CS΁ͷσϞ#1 ର໘ͰϚʔέςΟϯά
    $4ʹ޲͚ͯσϞ
60. ϩʔΧϧ
    ؀ڥ ։ൃ
    ςετ
    σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ
    ؀ڥ 3FQPTJUPSZ $PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ $PNNJU1VTI 4UBHJOH؀ڥ %FQMPZ 4UBHJOHσϓϩΠޙʹ
    ϚʔέςΟϯά
    $4ϝϯόʔʹσϞ ϚʔέςΟϯά / CS΁ͷσϞ#2
61. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯ΋Β͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ஗͍
62. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ڞ௨ͷ೰Έ • ςετσʔλ͕ΠϚΠν • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯ΋Β͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ஗͍ ඇಉظʹ masterʹmerge͢Δલʹ ϨϏϡʔɾσϞ͍ͨ͠
63. σϞɾϨϏϡʔ؀ڥ
64. σϞɾϨϏϡʔ؀ڥ • ࡞ۀϒϥϯνΛࢦఆͯ͠σϓϩΠ • Webը໘͔Βϒϥϯν໊Λࢦఆͯ͠Ϙλϯ1ൃ • ϩʔΧϧ։ൃ؀ڥͱ͸ඇಉظʹ࡞ΕΔ • ίʔυϨϏϡʔʹԊ͑ͨΓɺΤϯδχΞҎ֎ (ϚʔέςΟϯάɾCSϝϯόʔ)ʹσϞͨ͠Γ
66. σϞ༻؀ڥͱͯ͠σϓϩΠͯ͠
 ϓϧϦΫͰ΍ΓͱΓ
67. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯ΋Β͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ஗͍
68. ·ͱΊ • ϢʔβʹՁ஋Λఏڙ͢Δʹ͸ίϥϘϨʔγϣϯ͕େࣄ • ͓ޓ͍ͷ೰Έ͸৳ͼ͠Ζ • ίϥϘ͢Δ૬खʹาΈدΔ • ࢓૊ΈͰղܾͰ͖Δ෦෼͸ҙ֎ͱଟ͍ • վળͷ༨஍͸·ͩ·ͩ͋Δ • ଓ͖͸·ͨͲ͔͜Ͱ͓࿩͍ͤͯͩ͘͞͞ʂ
69. ଓ͍ͯ͸௚ۙͰͷϦϓϨΠε ʹΑΔࣄྫΛ͝঺հ͠·͢ (ότϯλον)