ikyu-frontend - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About me • ాத ݈հ • @kentana20 • 2006೥5݄͔ΒҰٳ • ॓ധαʔϏε։ൃ(9೥)  →γεςϜຊ෦(1೥) 

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

͝஫ҙ • ϑϩϯτΤϯυ։ൃͷલஈͷ࿩Λ͠·͢ • ͍͔ʹͯ͠σβΠφʔ΍ϚʔέςΟϯάɺCS  ΤϯδχΞͷίϥϘϨʔγϣϯΛߴΊ͍ͯΔ͔ ͱ͍͏࿩͕ϝΠϯͰ͢ • Tech੒෼͸গͳΊ • ޙฤͰผ్͓࿩͍͖ͤͯͨͩ͞·͢

Slide 6

Slide 6 text

Ұٳ.com & ࠾༻ٕज़ / Tools

Slide 7

Slide 7 text

About Ұٳ.com

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

͓ྡ͞·

Slide 12

Slide 12 text

࠾༻ٕज़ / Tools

Slide 13

Slide 13 text

࠾༻ٕज़ / 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

Slide 14

Slide 14 text

࠾༻ٕज़ / 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

Slide 15

Slide 15 text

࠾༻ٕज़ / 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

Slide 16

Slide 16 text

։ൃମ੍ɾ։ൃϑϩʔ

Slide 17

Slide 17 text

։ൃମ੍

Slide 18

Slide 18 text

։ൃମ੍(2016.3) αʔϏε։ൃ ΤϯδχΞ  ໊ ج൫ܥΤϯδχΞ  ໊ ΠϯϑϥΤϯδχΞ  ໊ σβΠφʔ  ໊ %FW %FT %FW 0QT Ϛʔέ एׯ໊ .LU

Slide 19

Slide 19 text

։ൃମ੍(2016.3) αʔϏε։ൃ ΤϯδχΞ  ໊ ج൫ܥΤϯδχΞ  ໊ ΠϯϑϥΤϯδχΞ  ໊ σβΠφʔ  ໊ %FW %FT %FW 0QT Ϛʔέ एׯ໊ .LU

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

աڈ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ϩʔΧϧ ؀ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽ ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF σβΠϯ࡞ۀ چࣜͷίϥϘϨʔγϣϯ

Slide 28

Slide 28 text

ϩʔΧϧ ؀ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽ ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU چࣜͷίϥϘϨʔγϣϯ

Slide 29

Slide 29 text

ϩʔΧϧ ؀ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽ ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU 4UBHJOH؀ڥ %FQMPZ چࣜͷίϥϘϨʔγϣϯ

Slide 30

Slide 30 text

ϩʔΧϧ ؀ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯ؀ڥ ߋ৽ ि࣍ 3FQPTJUPSZ $PNNJU 6QEBUF ୅ཧ$PNNJU 4UBHJOH؀ڥ %FQMPZ ຊ൪؀ڥ چࣜͷίϥϘϨʔγϣϯ

Slide 31

Slide 31 text

ͭΒ͍

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ  Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि  ݴ͑͹͍͍͔)

Slide 34

Slide 34 text

ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ  Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि  ݴ͑͹͍͍͔) ΤϯδχΞͱσβΠφʔͷڑ཭͕ ԕ͔ͬͨ

Slide 35

Slide 35 text

ޡͬͨํ޲ʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ΂͘1ճͰσβΠϯܾΊͯ΋Β͓͏) • σβΠφʔ • (… ͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ΋͏ͪΐ͍վળ  Ͱ͖Δ͚Ͳڞ༻؀ڥߋ৽͞Εͯͳ͍͠ɺདྷि  ݴ͑͹͍͍͔) ͜ΕͰ͸Ϣʔβʹ Ձ஋Λૣ͘ಧ͚ΒΕͳ͍

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

σβΠφʔ΋GitHub FlowͰ • ࡞ۀ؀ڥɺϫʔΫϑϩʔΛΤϯδχΞͱἧ͑ͨ • ΤϯδχΞͱಉ༷ʹϩʔΧϧʹ։ൃ؀ڥΛ੔උ  (؀ڥߏஙͱ࠷৽ԽɺϏϧυͳͲ͸ࣗಈԽ) • σβΠφʔ΋։ൃ༻ϒϥϯνͰ࡞ۀ • ϓϧϦΫ্ͰίϥϘϨʔγϣϯ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

࣮ࡍͷϓϧϦΫྫ

Slide 41

Slide 41 text

࣮ࡍͷϓϧϦΫྫ

Slide 42

Slide 42 text

࣮ࡍͷϓϧϦΫྫ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Sass

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ͭΒ͍

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

લਐதʹࣄނ΋

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

աڈ

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

σϞɾϨϏϡʔ؀ڥ

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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