ikyu-frontend

D2a23b20c732b68bc68017d8fc65afe0?s=47 kentana20
March 29, 2016

 ikyu-frontend

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

D2a23b20c732b68bc68017d8fc65afe0?s=128

kentana20

March 29, 2016
Tweet

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 1VMM3FRVFTU NFSHF 1VMM3FRVFTU 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. ଓ͍ͯ͸௚ۙͰͷϦϓϨΠε ʹΑΔࣄྫΛ͝঺հ͠·͢ (ότϯλον)