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
96k
一休での開発における改善の取組み /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
200
qiita meetup#12
kensuketanaka
4
71k
cross_2015_trave_ec
kensuketanaka
1
3.4k
Other Decks in Technology
See All in Technology
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
220
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
Dapr For Java Developers SouJava 25
salaboy
1
130
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
210
caching_sha2_passwordのはなし
boro1234
0
220
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
セマンティックレイヤー入門
ikkimiyazaki
8
3.3k
30 代子育て SRE が考える SRE ナレッジマネジメントの現在と将来
kworkdev
PRO
0
130
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Typedesign – Prime Four
hannesfritz
41
2.6k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
It's Worth the Effort
3n
184
28k
For a Future-Friendly Web
brad_frost
176
9.6k
A Tale of Four Properties
chriscoyier
158
23k
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σϓϩΠޙͷϨϏϡʔɾσϞ • λΠϛϯάతʹ͍
·ͱΊ • ϢʔβʹՁΛఏڙ͢ΔʹίϥϘϨʔγϣϯ͕େࣄ • ͓ޓ͍ͷΈ৳ͼ͠Ζ • ίϥϘ͢Δ૬खʹาΈدΔ • ΈͰղܾͰ͖Δ෦ҙ֎ͱଟ͍ •
վળͷ༨·ͩ·ͩ͋Δ • ଓ͖·ͨͲ͔͜Ͱ͓͍ͤͯͩ͘͞͞ʂ
ଓ͍ͯۙͰͷϦϓϨΠε ʹΑΔࣄྫΛ͝հ͠·͢ (ότϯλον)