Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ikyu-frontend
Search
kentana20
March 29, 2016
Technology
21
7.2k
ikyu-frontend
3.29 Sansan✕一休.com 勉強会での発表資料です
kentana20
March 29, 2016
Tweet
Share
More Decks by kentana20
See All by kentana20
一休.comでの開発組織改善の取り組みとこれから /improve-ikyu-devlove-x
kensuketanaka
24
37k
株式会社一休 会社紹介資料 / introduce-ikyu
kensuketanaka
15
98k
一休での開発における改善の取組み /devops-at-ikyu
kensuketanaka
13
10k
一休.com における改善事例のご紹介 /ikyu-storage-improvement
kensuketanaka
6
11k
開発合宿@京都 /hack-camp-kyoto
kensuketanaka
0
3.7k
一休.comにおけるデプロイフローと自動化 /ikyu-deploy-flow
kensuketanaka
9
8.8k
sushi_route_2015
kensuketanaka
0
210
qiita meetup#12
kensuketanaka
4
71k
cross_2015_trave_ec
kensuketanaka
1
3.4k
Other Decks in Technology
See All in Technology
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
190
Making a MIDI controller device with PicoRuby/R2P2 (RubyKaigi 2025 LT)
risgk
1
310
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
470
今日からはじめるプラットフォームエンジニアリング
jacopen
8
1.6k
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
4
690
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
180
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
300
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
1
470
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
250
AIエージェント開発手法と業務導入のプラクティス
ykosaka
8
2k
Writing Ruby Scripts with TypeProf
mame
0
360
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
270
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing for Performance
lara
608
69k
The Cult of Friendly URLs
andyhume
78
6.3k
How to Ace a Technical Interview
jacobian
276
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Designing Experiences People Love
moore
141
24k
YesSQL, Process and Tooling at Scale
rocio
172
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Music & Morning Musume
bryan
47
6.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
400
Transcript
Ұٳ.com ʹ͓͚Δ ϑϩϯτΤϯυ։ൃ ʙSansan✕Ұٳ ϑϩϯτΤϯυษڧձʙ kensuke tanaka (@kentana20)
About me • ాத ݈հ • @kentana20 • 20065݄͔ΒҰٳ •
॓ധαʔϏε։ൃ(9) →γεςϜຊ෦(1)
Agenda • Ұٳ.com & ࠾༻ٕज़ / Tools • ։ൃମ੍ɺ։ൃϑϩʔ •
σβΠφʔͱͷίϥϘϨʔγϣϯ • ϚʔέςΟϯάɺCSͱͷίϥϘϨʔγϣϯ
ຊͷςʔϚ ϑϩϯτΤϯυ։ൃͷ࣮ྫ
͝ҙ • ϑϩϯτΤϯυ։ൃͷલஈͷΛ͠·͢ • ͍͔ʹͯ͠σβΠφʔϚʔέςΟϯάɺCS ΤϯδχΞͷίϥϘϨʔγϣϯΛߴΊ͍ͯΔ͔ ͱ͍͏͕ϝΠϯͰ͢ • TechগͳΊ •
ޙฤͰผ్͓͍͖ͤͯͨͩ͞·͢
Ұٳ.com & ࠾༻ٕज़ / Tools
About Ұٳ.com
None
Ұٳ.com • ओྗαʔϏε • ্࣭ͳϗςϧɾཱྀؗͷ༧αʔϏε • 20005݄Φʔϓϯͷ15ࡀ
Ұٳ.com KPI (2015.03) • ձһ: 400ສ+ • ϗςϧ/ཱྀؗ: 2,600ࢪઃ+ •
ؒൢചࣨ: 189ສࣨ+
͓ྡ͞·
࠾༻ٕज़ / Tools
࠾༻ٕज़ / 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
࠾༻ٕज़ / 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
࠾༻ٕज़ / 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
։ൃମ੍ɾ։ൃϑϩʔ
։ൃମ੍
։ൃମ੍(2016.3) αʔϏε։ൃ ΤϯδχΞ ໊ ج൫ܥΤϯδχΞ ໊ ΠϯϑϥΤϯδχΞ ໊ σβΠφʔ ໊
%FW %FT %FW 0QT Ϛʔέ एׯ໊ .LU
։ൃମ੍(2016.3) αʔϏε։ൃ ΤϯδχΞ ໊ ج൫ܥΤϯδχΞ ໊ ΠϯϑϥΤϯδχΞ ໊ σβΠφʔ ໊
%FW %FT %FW 0QT Ϛʔέ एׯ໊ .LU
σβΠφʔ3ͭͷάϧʔϓͰߏ ը૾ ੩తϖʔδ ΫϦΤΠςΟϒ σβΠϯ ίʔσΟϯά
ը૾ ੩తϖʔδ ΫϦΤΠςΟϒ σβΠϯ ίʔσΟϯά %FW σβΠφʔ3ͭͷϢχοτ ΤϯδχΞͱΑ͘ίϥϘ͢Δͷ ΫϦΤΠςΟϒσβΠϯͱίʔσΟϯά Λ͍ͯ͠ΔνʔϜ
σβΠφʔͱͷίϥϘϨʔγϣϯ
աڈ
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ։ൃڥ • ΤϯδχΞ֤ࣗϩʔΧϧͰ࡞ۀ • σβΠφʔڞ༻αʔό্Ͱશһ͕࡞ۀ • ڞ༻αʔόΤϯδχΞ͕ि࣍Ͱߋ৽ •
ڞ༻αʔόͷࢿࡐΤϯδχΞ͕ίϛοτ
چࣜͷίϥϘϨʔγϣϯ ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ 3FQPTJUPSZ
$PNNJU
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ ߋ৽ ि࣍
3FQPTJUPSZ $PNNJU 6QEBUF چࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ ߋ৽ ि࣍
3FQPTJUPSZ $PNNJU 6QEBUF σβΠϯ࡞ۀ چࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ ߋ৽ ि࣍
3FQPTJUPSZ $PNNJU 6QEBUF ཧ$PNNJU چࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ ߋ৽ ि࣍
3FQPTJUPSZ $PNNJU 6QEBUF ཧ$PNNJU 4UBHJOHڥ %FQMPZ چࣜͷίϥϘϨʔγϣϯ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ڞ༻σβΠϯڥ ߋ৽ ि࣍
3FQPTJUPSZ $PNNJU 6QEBUF ཧ$PNNJU 4UBHJOHڥ %FQMPZ ຊ൪ڥ چࣜͷίϥϘϨʔγϣϯ
ͭΒ͍
ίϥϘͷͨΊͷίετ͕ߴ͔ͬͨ • ΤϯδχΞ • ڞ༻σβΠϯڥͷϝϯς͠ΜͲ͍ • ڞ༻ͳͷͰϒϥϯν͚ͯ࡞ۀ͓ئ͍ͮ͠Β͍ • σβΠφʔ •
ڞ༻σβΠϯڥ͕ϝϯς͞Εͳ͍ͱ࡞ۀͰ͖ͳ͍ • σβΠφʔಉ࢜Ͱ࡞ۀ͕ڝ߹
ޡͬͨํʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏) • σβΠφʔ • (…
͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑)
ޡͬͨํʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏) • σβΠφʔ • (…
͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑) ΤϯδχΞͱσβΠφʔͷڑ͕ ԕ͔ͬͨ
ޡͬͨํʹߦ͖͔͚ͨ • ΤϯδχΞ • (… ͳΔ͘1ճͰσβΠϯܾΊͯΒ͓͏) • σβΠφʔ • (…
͜ͷલ࡞ۀͨ͋͠ͷը໘ɺ͏ͪΐ͍վળ Ͱ͖Δ͚Ͳڞ༻ڥߋ৽͞Εͯͳ͍͠ɺདྷि ݴ͍͍͔͑) ͜ΕͰϢʔβʹ ՁΛૣ͘ಧ͚ΒΕͳ͍
None
σβΠφʔGitHub FlowͰ • ࡞ۀڥɺϫʔΫϑϩʔΛΤϯδχΞͱἧ͑ͨ • ΤϯδχΞͱಉ༷ʹϩʔΧϧʹ։ൃڥΛඋ (ڥߏஙͱ࠷৽ԽɺϏϧυͳͲࣗಈԽ) • σβΠφʔ։ൃ༻ϒϥϯνͰ࡞ۀ •
ϓϧϦΫ্ͰίϥϘϨʔγϣϯ
σβΠϯ࡞ۀͷϒϥϯνઓུ NBTUFS EYYYY EZZZZ EYYYY EYYYY EZZZZ EZZZZ DIFDLPVU DIFDLPVU
NFSHF 1VMM3FRVFTU NFSHF 1VMM3FRVFTU 4UBHJOH
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ ڥ 3FQPTJUPSZ
$PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ ΤϯδχΞͱͷίϥϘϨʔγϣϯ $PNNJU1VTI 4UBHJOHڥ ຊ൪ڥ %FQMPZ
࣮ࡍͷϓϧϦΫྫ
࣮ࡍͷϓϧϦΫྫ
࣮ࡍͷϓϧϦΫྫ
ಓͳྗ • Gitʹ׳ΕͯΒ͏ͨΊ • σβΠφʔ͚ͷࣾϫʔΫγϣοϓ • ಋೖ࣌ΦϯαΠτͰϑϧαϙʔτ • ಋೖޙʹ;Γ͔͑Γ
Sass
Sassಋೖͷഎܠ • ϗςϧɾཱྀؗΛѻ͏ Ұٳ.com • ϏδωεϗςϧΛѻ͏Ұٳ.com Ϗδωε
͓ޓ͍ͭΒ͔ͬͨ • ΤϯδχΞ • ϏϋΠϯυίʔυʹுΓ͍ͨۀϩδοΫͷ ॏෳ • σβΠφʔ • ྨࣅը໘ͷଘࡏ(CSSҰ෦Λআ͍ͯॏෳ)
ͭΒ͍
ϩδοΫ౷߹ʴSassಋೖ • ΤϯδχΞ • ϩδοΫ౷߹ͯ͠ϏϋΠϯυίʔυΛ1ͭʹ • σβΠφʔ • Sassಋೖͯ͠ޮԽɾߏԽ
׳ΕͯΒ͏ • Sassಋೖܦݧͷ͋ΔσβΠφʔओಋ • ߨٛࣜͷηϛφʔ • ΤϯδχΞϑΥϩʔ • Sass࡞ۀڥͳΔࣗ͘ಈԽ
લਐதʹࣄނ
None
None
ϩʔΧϧڥͰCSSޮ͔ͳ͍
߄ͯͯϏϧυόον͍͔͚ରԠ
Try&ErrorͰΞΫγϣϯܧଓ • ΤϯδχΞɺσβΠφʔͷʑͷෆຬΛΩϟον Ξοϓ • ղܾࡦΛߟ͑ͯTry&Error • ໎Λ͔͚Δ͜ͱ͋Δ͚Ͳલਐͯ͠·͢
ϚʔέςΟϯάɺCSͱͷ ίϥϘϨʔγϣϯ
աڈ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ ڥ 3FQPTJUPSZ
$PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ GitಋೖޙͷϫʔΫϑϩʔ(લड़) $PNNJU1VTI 4UBHJOHڥ %FQMPZ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ ڥ σβΠϯ࡞ۀ
ϚʔέςΟϯά / CSͷσϞ#1 ର໘ͰϚʔέςΟϯά $4ʹ͚ͯσϞ
ϩʔΧϧ ڥ ։ൃ ςετ σβΠϯ ϦϦʔε ݕূ ϩʔΧϧ ڥ 3FQPTJUPSZ
$PNNJU1VTI $IFDLPVU σβΠϯ࡞ۀ $PNNJU1VTI 4UBHJOHڥ %FQMPZ 4UBHJOHσϓϩΠޙʹ ϚʔέςΟϯά $4ϝϯόʔʹσϞ ϚʔέςΟϯά / CSͷσϞ#2
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯΒ͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ͍
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ڞ௨ͷΈ • ςετσʔλ͕ΠϚΠν • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯΒ͑ͳ͍ •
StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ͍ ඇಉظʹ masterʹmerge͢Δલʹ ϨϏϡʔɾσϞ͍ͨ͠
σϞɾϨϏϡʔڥ
σϞɾϨϏϡʔڥ • ࡞ۀϒϥϯνΛࢦఆͯ͠σϓϩΠ • Webը໘͔Βϒϥϯν໊Λࢦఆͯ͠Ϙλϯ1ൃ • ϩʔΧϧ։ൃڥͱඇಉظʹ࡞ΕΔ • ίʔυϨϏϡʔʹԊ͑ͨΓɺΤϯδχΞҎ֎ (ϚʔέςΟϯάɾCSϝϯόʔ)ʹσϞͨ͠Γ
None
σϞ༻ڥͱͯ͠σϓϩΠͯ͠ ϓϧϦΫͰΓͱΓ
ίϥϘϨʔγϣϯ͕ͮ͠Β͔ͬͨ • ର໘ͰͷϨϏϡʔɾσϞ • ඇಉظʹݟͯΒ͑ͳ͍ • StagingσϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ͍
·ͱΊ • ϢʔβʹՁΛఏڙ͢ΔʹίϥϘϨʔγϣϯ͕େࣄ • ͓ޓ͍ͷΈ৳ͼ͠Ζ • ίϥϘ͢Δ૬खʹาΈدΔ • ΈͰղܾͰ͖Δ෦ҙ֎ͱଟ͍ •
վળͷ༨·ͩ·ͩ͋Δ • ଓ͖·ͨͲ͔͜Ͱ͓͍ͤͯͩ͘͞͞ʂ
ଓ͍ͯۙͰͷϦϓϨΠε ʹΑΔࣄྫΛ͝հ͠·͢ (ότϯλον)