Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ikyu-frontend

 ikyu-frontend

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

kentana20

March 29, 2016
Tweet

More Decks by kentana20

Other Decks in Technology

Transcript

  1. Ұٳ.com ʹ͓͚Δ
    ϑϩϯτΤϯυ։ൃ
    ʙSansan✕Ұٳ ϑϩϯτΤϯυษڧձʙ
    kensuke tanaka (@kentana20)

    View full-size slide

  2. About me
    • ాத ݈հ
    • @kentana20
    • 2006೥5݄͔ΒҰٳ
    • ॓ധαʔϏε։ൃ(9೥)

    →γεςϜຊ෦(1೥)


    View full-size slide

  3. Agenda
    • Ұٳ.com & ࠾༻ٕज़ / Tools
    • ։ൃମ੍ɺ։ൃϑϩʔ
    • σβΠφʔͱͷίϥϘϨʔγϣϯ
    • ϚʔέςΟϯάɺCSͱͷίϥϘϨʔγϣϯ

    View full-size slide

  4. ຊ೔ͷςʔϚ
    ϑϩϯτΤϯυ։ൃͷ࣮ྫ

    View full-size slide

  5. ͝஫ҙ
    • ϑϩϯτΤϯυ։ൃͷલஈͷ࿩Λ͠·͢
    • ͍͔ʹͯ͠σβΠφʔ΍ϚʔέςΟϯάɺCS

    ΤϯδχΞͷίϥϘϨʔγϣϯΛߴΊ͍ͯΔ͔
    ͱ͍͏࿩͕ϝΠϯͰ͢
    • Tech੒෼͸গͳΊ
    • ޙฤͰผ్͓࿩͍͖ͤͯͨͩ͞·͢

    View full-size slide

  6. Ұٳ.com & ࠾༻ٕज़ / Tools

    View full-size slide

  7. About Ұٳ.com

    View full-size slide

  8. Ұٳ.com
    • ओྗαʔϏε
    • ্࣭ͳϗςϧɾཱྀؗͷ༧໿αʔϏε
    • 2000೥5݄Φʔϓϯͷ15ࡀ

    View full-size slide

  9. Ұٳ.com KPI (2015.03)
    • ձһ਺: 400ສ+
    • ϗςϧ/ཱྀؗ਺: 2,600ࢪઃ+
    • ೥ؒൢചࣨ਺: 189ສࣨ+

    View full-size slide

  10. ࠾༻ٕज़ / Tools

    View full-size slide

  11. ࠾༻ٕज़ / 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

    View full-size slide

  12. ࠾༻ٕज़ / 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

    View full-size slide

  13. ࠾༻ٕज़ / 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

    View full-size slide

  14. ։ൃମ੍ɾ։ൃϑϩʔ

    View full-size slide

  15. ։ൃମ੍(2016.3)
    αʔϏε։ൃ
    ΤϯδχΞ


    ج൫ܥΤϯδχΞ


    ΠϯϑϥΤϯδχΞ


    σβΠφʔ


    %FW %FT
    %FW 0QT
    Ϛʔέ
    एׯ໊
    .LU

    View full-size slide

  16. ։ൃମ੍(2016.3)
    αʔϏε։ൃ
    ΤϯδχΞ


    ج൫ܥΤϯδχΞ


    ΠϯϑϥΤϯδχΞ


    σβΠφʔ


    %FW %FT
    %FW 0QT
    Ϛʔέ
    एׯ໊
    .LU

    View full-size slide

  17. σβΠφʔ͸3ͭͷάϧʔϓͰߏ੒
    ը૾
    ੩తϖʔδ
    ΫϦΤΠςΟϒ
    σβΠϯ
    ίʔσΟϯά

    View full-size slide

  18. ը૾
    ੩తϖʔδ
    ΫϦΤΠςΟϒ
    σβΠϯ
    ίʔσΟϯά
    %FW
    σβΠφʔ΋3ͭͷϢχοτ
    ΤϯδχΞͱΑ͘ίϥϘ͢Δͷ͸
    ΫϦΤΠςΟϒσβΠϯͱίʔσΟϯά
    Λ͍ͯ͠ΔνʔϜ

    View full-size slide

  19. σβΠφʔͱͷίϥϘϨʔγϣϯ

    View full-size slide

  20. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ
    • ։ൃ؀ڥ
    • ΤϯδχΞ͸֤ࣗϩʔΧϧͰ࡞ۀ
    • σβΠφʔ͸ڞ༻αʔό্Ͱશһ͕࡞ۀ
    • ڞ༻αʔό͸ΤϯδχΞ͕ि࣍Ͱߋ৽
    • ڞ༻αʔόͷࢿࡐ͸ΤϯδχΞ͕ίϛοτ

    View full-size slide

  21. چࣜͷίϥϘϨʔγϣϯ
    ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    3FQPTJUPSZ
    $PNNJU

    View full-size slide

  22. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    ߋ৽
    ि࣍

    3FQPTJUPSZ
    $PNNJU
    6QEBUF
    چࣜͷίϥϘϨʔγϣϯ

    View full-size slide

  23. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    ߋ৽
    ि࣍

    3FQPTJUPSZ
    $PNNJU
    6QEBUF
    σβΠϯ࡞ۀ
    چࣜͷίϥϘϨʔγϣϯ

    View full-size slide

  24. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    ߋ৽
    ि࣍

    3FQPTJUPSZ
    $PNNJU
    6QEBUF
    ୅ཧ$PNNJU
    چࣜͷίϥϘϨʔγϣϯ

    View full-size slide

  25. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    ߋ৽
    ि࣍

    3FQPTJUPSZ
    $PNNJU
    6QEBUF
    ୅ཧ$PNNJU
    4UBHJOH؀ڥ
    %FQMPZ
    چࣜͷίϥϘϨʔγϣϯ

    View full-size slide

  26. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ڞ༻σβΠϯ؀ڥ
    ߋ৽
    ि࣍

    3FQPTJUPSZ
    $PNNJU
    6QEBUF
    ୅ཧ$PNNJU
    4UBHJOH؀ڥ
    %FQMPZ
    ຊ൪؀ڥ
    چࣜͷίϥϘϨʔγϣϯ

    View full-size slide

  27. ίϥϘͷͨΊͷίετ͕ߴ͔ͬͨ
    • ΤϯδχΞ
    • ڞ༻σβΠϯ؀ڥͷϝϯς͠ΜͲ͍
    • ڞ༻ͳͷͰϒϥϯν෼͚ͯ࡞ۀ͓ئ͍ͮ͠Β͍
    • σβΠφʔ
    • ڞ༻σβΠϯ؀ڥ͕ϝϯς͞Εͳ͍ͱ࡞ۀͰ͖ͳ͍
    • σβΠφʔಉ࢜Ͱ࡞ۀ͕ڝ߹

    View full-size slide

  28. ޡͬͨํ޲ʹߦ͖͔͚ͨ
    • ΤϯδχΞ
    • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏)
    • σβΠφʔ
    • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ

    Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि

    ݴ͑͹͍͍͔)

    View full-size slide

  29. ޡͬͨํ޲ʹߦ͖͔͚ͨ
    • ΤϯδχΞ
    • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏)
    • σβΠφʔ
    • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ

    Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि

    ݴ͑͹͍͍͔)
    ΤϯδχΞͱσβΠφʔͷڑ཭͕
    ԕ͔ͬͨ

    View full-size slide

  30. ޡͬͨํ޲ʹߦ͖͔͚ͨ
    • ΤϯδχΞ
    • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏)
    • σβΠφʔ
    • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ

    Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि

    ݴ͑͹͍͍͔)
    ͜ΕͰ͸Ϣʔβʹ
    Ձ஋Λૣ͘ಧ͚ΒΕͳ͍

    View full-size slide

  31. σβΠφʔ΋GitHub FlowͰ
    • ࡞ۀ؀ڥɺϫʔΫϑϩʔΛΤϯδχΞͱἧ͑ͨ
    • ΤϯδχΞͱಉ༷ʹϩʔΧϧʹ։ൃ؀ڥΛ੔උ

    (؀ڥߏஙͱ࠷৽ԽɺϏϧυͳͲ͸ࣗಈԽ)
    • σβΠφʔ΋։ൃ༻ϒϥϯνͰ࡞ۀ
    • ϓϧϦΫ্ͰίϥϘϨʔγϣϯ

    View full-size slide

  32. σβΠϯ࡞ۀͷϒϥϯνઓུ
    NBTUFS
    EYYYY
    EZZZZ
    EYYYY EYYYY
    EZZZZ EZZZZ
    DIFDLPVU
    DIFDLPVU
    NFSHF
    1VMM3FRVFTU

    NFSHF
    1VMM3FRVFTU

    4UBHJOH

    View full-size slide

  33. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ϩʔΧϧ
    ؀ڥ
    3FQPTJUPSZ
    $PNNJU1VTI
    $IFDLPVU
    σβΠϯ࡞ۀ
    ΤϯδχΞͱͷίϥϘϨʔγϣϯ
    $PNNJU1VTI
    4UBHJOH؀ڥ
    ຊ൪؀ڥ
    %FQMPZ

    View full-size slide

  34. ࣮ࡍͷϓϧϦΫྫ

    View full-size slide

  35. ࣮ࡍͷϓϧϦΫྫ

    View full-size slide

  36. ࣮ࡍͷϓϧϦΫྫ

    View full-size slide

  37. ஍ಓͳ౒ྗ΋
    • Gitʹ׳Εͯ΋Β͏ͨΊ
    • σβΠφʔ޲͚ͷࣾ಺ϫʔΫγϣοϓ
    • ಋೖ࣌͸ΦϯαΠτͰϑϧαϙʔτ
    • ಋೖޙʹ;Γ͔͑Γ

    View full-size slide

  38. Sassಋೖͷഎܠ
    • ϗςϧɾཱྀؗΛѻ͏ Ұٳ.com
    • ϏδωεϗςϧΛѻ͏Ұٳ.com Ϗδωε

    View full-size slide

  39. ͓ޓ͍ͭΒ͔ͬͨ
    • ΤϯδχΞ
    • ϏϋΠϯυίʔυʹுΓ෇͍ͨۀ຿ϩδοΫͷ
    ॏෳ
    • σβΠφʔ
    • ྨࣅը໘ͷଘࡏ(CSS΋Ұ෦Λআ͍ͯॏෳ)

    View full-size slide

  40. ϩδοΫ౷߹ʴSassಋೖ
    • ΤϯδχΞ
    • ϩδοΫ౷߹ͯ͠ϏϋΠϯυίʔυΛ1ͭʹ
    • σβΠφʔ
    • Sassಋೖͯ͠ޮ཰Խɾߏ଄Խ

    View full-size slide

  41. ׳Εͯ΋Β͏
    • Sassಋೖܦݧͷ͋ΔσβΠφʔओಋ
    • ߨٛࣜͷηϛφʔ
    • ΤϯδχΞ΋ϑΥϩʔ
    • Sass࡞ۀ؀ڥ͸ͳΔ΂ࣗ͘ಈԽ

    View full-size slide

  42. લਐதʹࣄނ΋

    View full-size slide

  43. ϩʔΧϧ؀ڥͰCSSޮ͔ͳ͍

    View full-size slide

  44. ߄ͯͯϏϧυόον΋௥͍͔͚ରԠ

    View full-size slide

  45. Try&ErrorͰΞΫγϣϯܧଓ
    • ΤϯδχΞɺσβΠφʔͷ೔ʑͷෆຬΛΩϟον
    Ξοϓ
    • ղܾࡦΛߟ͑ͯTry&Error
    • ໎࿭Λ͔͚Δ͜ͱ΋͋Δ͚Ͳલਐͯ͠·͢

    View full-size slide

  46. ϚʔέςΟϯάɺCSͱͷ
    ίϥϘϨʔγϣϯ

    View full-size slide

  47. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ϩʔΧϧ
    ؀ڥ
    3FQPTJUPSZ
    $PNNJU1VTI
    $IFDLPVU
    σβΠϯ࡞ۀ
    GitಋೖޙͷϫʔΫϑϩʔ(લड़)
    $PNNJU1VTI
    4UBHJOH؀ڥ
    %FQMPZ

    View full-size slide

  48. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ϩʔΧϧ
    ؀ڥ
    σβΠϯ࡞ۀ
    ϚʔέςΟϯά / CS΁ͷσϞ#1
    ର໘ͰϚʔέςΟϯά
    $4ʹ޲͚ͯσϞ

    View full-size slide

  49. ϩʔΧϧ
    ؀ڥ
    ։ൃ
    ςετ
    σβΠϯ
    ϦϦʔε
    ݕূ
    ϩʔΧϧ
    ؀ڥ
    3FQPTJUPSZ
    $PNNJU1VTI
    $IFDLPVU
    σβΠϯ࡞ۀ $PNNJU1VTI
    4UBHJOH؀ڥ
    %FQMPZ
    4UBHJOHσϓϩΠޙʹ
    ϚʔέςΟϯά
    $4ϝϯόʔʹσϞ
    ϚʔέςΟϯά / CS΁ͷσϞ#2

    View full-size slide

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

    View full-size slide

  51. ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ
    • ڞ௨ͷ೰Έ
    • ςετσʔλ͕ΠϚΠν
    • ର໘ͰͷϨϏϡʔɾσϞ
    • ඇಉظʹݟͯ΋Β͑ͳ͍
    • StagingσϓϩΠޙͷϨϏϡʔɾσϞ
    • λΠϛϯάతʹ஗͍
    ඇಉظʹ
    masterʹmerge͢Δલʹ
    ϨϏϡʔɾσϞ͍ͨ͠

    View full-size slide

  52. σϞɾϨϏϡʔ؀ڥ

    View full-size slide

  53. σϞɾϨϏϡʔ؀ڥ
    • ࡞ۀϒϥϯνΛࢦఆͯ͠σϓϩΠ
    • Webը໘͔Βϒϥϯν໊Λࢦఆͯ͠Ϙλϯ1ൃ
    • ϩʔΧϧ։ൃ؀ڥͱ͸ඇಉظʹ࡞ΕΔ
    • ίʔυϨϏϡʔʹԊ͑ͨΓɺΤϯδχΞҎ֎
    (ϚʔέςΟϯάɾCSϝϯόʔ)ʹσϞͨ͠Γ

    View full-size slide

  54. σϞ༻؀ڥͱͯ͠σϓϩΠͯ͠

    ϓϧϦΫͰ΍ΓͱΓ

    View full-size slide

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

    View full-size slide

  56. ·ͱΊ
    • ϢʔβʹՁ஋Λఏڙ͢Δʹ͸ίϥϘϨʔγϣϯ͕େࣄ
    • ͓ޓ͍ͷ೰Έ͸৳ͼ͠Ζ
    • ίϥϘ͢Δ૬खʹาΈدΔ
    • ࢓૊ΈͰղܾͰ͖Δ෦෼͸ҙ֎ͱଟ͍
    • վળͷ༨஍͸·ͩ·ͩ͋Δ
    • ଓ͖͸·ͨͲ͔͜Ͱ͓࿩͍ͤͯͩ͘͞͞ʂ

    View full-size slide

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

    View full-size slide