ikyu-frontend

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

8. None

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ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (…

    ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ
 Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि
 ݴ͑͹͍͍͔) ͜ΕͰ͸Ϣʔβʹ Ձ஋Λૣ͘ಧ͚ΒΕͳ͍
36. None

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. લਐதʹࣄނ΋

51. None
52. None

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ϝϯόʔ)ʹσϞͨ͠Γ

65. None

66. σϞ༻؀ڥͱͯ͠σϓϩΠͯ͠
 ϓϧϦΫͰ΍ΓͱΓ

67. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯ΋Β͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ஗͍

68. ·ͱΊ • ϢʔβʹՁ஋Λఏڙ͢Δʹ͸ίϥϘϨʔγϣϯ͕େࣄ • ͓ޓ͍ͷ೰Έ͸৳ͼ͠Ζ • ίϥϘ͢Δ૬खʹาΈدΔ • ࢓૊ΈͰղܾͰ͖Δ෦෼͸ҙ֎ͱଟ͍ •

    վળͷ༨஍͸·ͩ·ͩ͋Δ • ଓ͖͸·ͨͲ͔͜Ͱ͓࿩͍ͤͯͩ͘͞͞ʂ

69. ଓ͍ͯ͸௚ۙͰͷϦϓϨΠε ʹΑΔࣄྫΛ͝঺հ͠·͢ (ότϯλον)