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
AbemaTV ホンネテレビ の本音
Search
Kenichi Kato
March 09, 2018
Programming
4
3.9k
AbemaTV ホンネテレビ の本音
2018/03/09 Frontrend Vol.11 - 2017年度フロントエンド大反省会
Kenichi Kato
March 09, 2018
Tweet
Share
More Decks by Kenichi Kato
See All by Kenichi Kato
AbemaTVブラウザ版のCDN移行とその活用
ktknest
2
690
AbemaTVはただのSSR じゃねぇんだよ
ktknest
11
7.1k
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
890
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
440
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
340
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.4k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
🔨 小さなビルドシステムを作る
momeemt
4
690
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Side Projects
sachag
455
43k
Statistics for Hackers
jakevdp
799
220k
The World Runs on Bad Software
bkeepers
PRO
70
11k
We Have a Design System, Now What?
morganepeng
53
7.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Transcript
AbemaTV #ϗϯωςϨϏ ͷຊԻ 2018/03/09 Frontrend Vol.11 - 2017ϑϩϯτΤϯυେলձ @ktknest
גࣜձࣾαΠόʔΤʔδΣϯτ גࣜձࣾ"CFNB57։ൃຊ෦ Ճ౻ݡҰ ϓϩϑΟʔϧ த్ೖࣾ ओʹঁੑ͚ϝσΟΞαʔϏεͷ্ཱͪ͛Λ୲ "CFNB57ʹग़
AbemaTV ແྉͰָ͠ΊΔΠϯλʔωοτςϨϏہ ΦϦδφϧͷੜ์ૹίϯςϯπɺχϡʔεɺ ԻָɺεϙʔπɺυϥϚͳͲଟ࠼ͳ൪ָ͕͠ ΊΔνϟϯωϧΛશͯແྉͰఏڙ͍ͯ͠ ·͢ɻ ʮ"CFNBϏσΦʯͰɺ"CFNB57ͷ์ૹͰ ݟಀͨ͠൪ΛҰఆظ͍ؒͭͰɺ͖ͳ࣌ ʹݟ์ʹͳΔ΄͔ɺΦϦδφϧ੍࡞ͷ൪ Λ͡ΊɺҰ෦ͷ൪ొ͢Δ͜ͱͳ͘ແ
ྉͰָ͓͠Έ͍͚ͨͩ·͢ɻ
2017 ࠷େͷল ʊਓਓਓਓਓਓਓਓਓਓʊ ʼɹαʔόʔμϯɹʻ ʉ:?:?:?:?:?:?:?:ʉ ʰُాڵؽʹউͬͨΒສԁʱ
2017 ৼΓฦΓ
"CFNB57։ہ "CFNBϏσΦϦϦʔε ʰُాڵؽʹউͬͨΒສԁʱ์ૹ ʰୈظཽԦઓܾউτʔφϝϯτࠤʑ༐ؾޒஈର౻Ҫ૱ଠ࢛ஈʱ์ૹ ʰ࣌ؒϗϯωςϨϏʱ์ૹܾఆ ʰ࣌ؒϗϯωςϨϏʱ์ૹ ৭ʑͳ࢝ಛ൪
ࠓճ͜ͷল͔Βɺ ϗϯωςϨϏ࢝Λແࣄʹաͨ͢͝Ίʹߦͬͨ ෛՙରࡦΛத৺ʹ͓͠͠·͢ɻ
ରࡦ 8FCαʔόʔΛࢮͳͤͳ͍ "1*৴αʔόʔΛࢮͳͤͳ͍ Τϥʔൃੜ࣌ʹదͳදࣔΛ͢Δ
લஔ͖ɿWebߏ ($1্ʹߏங #''ʢ/HJOY/PEFKTʣ "1*ผυϝΠϯ 41"ʢඇ443ʣ ˞ࠨਤෛՙରࡦޙͷߏ
લஔ͖ɿ͋ΘͤͯಡΈ͍ͨ .JDSPTFSWJDFTԼʹ͓͚Δ8FCͷෛՙରࡦ"CFNB57%&7&-01&3$0/'&3&/$& IUUQTTQFBLFSEFDLDPNBTVLBMFJEPBCFNBUWEFWFMPQFSDPOGFSFODF IUUQTGSFTIMJWFUWUFDIDPOGFSFODFࠒ͔Β ࣌ؒϗϯω57ɺΫϥΠΞϯταΠυෛՙରࡦ $"TXJGU IUUQTTQFBLFSEFDLDPNSJOPWEJIVJDBTXJGU ϗϯωςϨϏͷෛՙରࡦ৴ฤ IUUQTRJJUBDPNNJZVLLJJUFNTGEDC "CFNB57Λࢧ͑ΔΞϓϦͷ༏͠͞"CFNB57%&7&-01&3$0/'&3&/$&
IUUQTTQFBLFSEFDLDPNPHBDMFKBQBOBCFNBUWEFWDPO IUUQTGSFTIMJWFUWUFDIDPOGFSFODFࠒ͔Β ϗϯωςϨϏͷෛՙରࡦϓϩϚωͷϗϯω IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ μϯ࣌ʹͷ͋ͬͨՕॴͷݟ͠ $%/Խ
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ μϯ࣌ʹͷ͋ͬͨՕॴͷݟ͠ ෦ͷH31$௨৴ͰλΠϜΞτ࣌ͷߟྀ࿙Ε Ԡ͕ͳ͍ঢ়ଶ͕ଓ͍ͯ͠·͏ʢ-#ଆλΠϜΞτʣ ίωΫγϣϯͬͨ··ͷͨΊɺੵΈॏͳΔͱίωΫγϣϯͷݶքಥഁ (PPHMF$MPVE1MBUGPSN /PEFKT ใऔಘઌͷ
ϚΠΫϩαʔϏε H31$ ϝλใΛ༩ͨ͠)5.-
ରࡦɿWebαʔόʔΛࢮͳͤͳ͍ CDNԽ )5.-ؚΊͨ੩తϑΝΠϧશͯ(PPHMF$MPVE$%/ܦ༝ʹ͢Δ ΦϦδϯαʔόʔʢ/HJOY/PEFKTʣͷϦΫΤετΛ࠷খݶʹͰ͖Δ 6"ʹΑΔ৴ͷৼΓ͚͕Ͱ͖ͳ͍ͨΊɺ6"ґଘՕॴΛमਖ਼ ݱࡏɺ͞Βʹ'BTUMZҠߦΛݕ౼த
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ৴ͷ$%/ʢ"LBNBJʣԽ ࢹௌ·Ͱʹඞਢͳ"1*Λ৽ ʢෆཁͳcෆཁͳλΠϛϯάͰͷʣϦΫΤετΛݮ ղ૾ͷίϯτϩʔϧ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ৴ͷCDNʢAkamaiʣԽ )-4.1&(%"4)ͷϓϨΠϦετΛ$%/͔Βฦ͢ ηάϝϯτطʹ$%/͔Β৴ࡁΈ ࢹௌͷଟ͍൪ͰΦϦδϯαʔόʔͷϦΫΤετ͕εύΠΫͯ͠͠·͏ $%/Խʹ͋ͨͬͯɺϢʔβʔݻ༗ใͷຒΊࠐΈϩά͕औಘͰ͖ͳ͘ͳΔ
ϥΠηϯεղܾɺࢹௌʹؔ͢ΔϝτϦΫεૹ৴Λվम ग़యɿϑϩϯτΤϯυΤϯδχΞͷͨΊͷಈըετϦʔϛϯάٕज़جૅ https://ygoto3.com/posts/streaming-technology-basics-for-frontend-engineers/
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ࢹௌ·ͰʹඞਢͳAPIΛ৽ ͋ΒΏΔՕॴͰ൪දΛ࢘Δڊେͳ"1*ʹґଘ νϟϯωϧҰཡ൪ใͷࢀরʹར༻ ࢹௌ͢Δ͚ͩͳΒ͜͜·Ͱඞཁͳ͍ ෛՙͷߴ͍Ϣʔβʔࢀরܥͷোʹר͖ࠐ·Ε͔Ͷͳ͍ νϟϯωϧҰཡ൪ใɺࢹௌΛऔಘ͢Δ"1*Λ৽
͜ΕΒʹಛԽͨ͠ϚΠΫϩαʔϏεΛ࡞ ඞཁ࠷খݶͷใΛݸผʹऔಘ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ʢෆཁͳ|ෆཁͳλΠϛϯάͰͷʣϦΫΤετΛݮ ςϨϏͷࢹௌ·Ͱඞཁ࠷ݶͷϦΫΤετͰߏ͢Δ τοϓϖʔδɿνϟϯωϧҰཡͷදࣔ ςϨϏɿ൪ͷࢹௌɺνϟϯωϧͷΓସ͑ ڊେͳ൪ද"1*ͷґଘΛఫڈ ͦͷଞ৭ʑ
ࢹௌίϝϯτͷऔಘ৽"1*ʹҠߦ ϙʔϦϯάִؒ࠷దԽ ཪ൪දίϝϯτҰཡͷऔಘλΠϛϯάΛௐ
ରࡦɿAPI/৴αʔόʔΛࢮͳͤͳ͍ ղ૾ͷίϯτϩʔϧ ଳҬͷ͍͗͢μϝ ςϨϏฒΈͷࢹௌऀºߴϏοτϨʔτˠ૬ͷଳҬΛ༗ͯ͠͠·͏ ϓϨΠϠʔαΠζʹ߹Θͤͯղ૾ΛՄมʹ͢Δ ΞϓϦͰॳ͔Βಋೖ͞Ε͍ͯͨΈΛɺ8FCʹಋೖ QʙQ૬ͰΓସ͑
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ΤϥʔϋϯυϦϯάͷݟ͠ ϝϯςφϯεը໘ͷදࣔ
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ΤϥʔϋϯυϦϯάͷݟ͠ ਖ਼ৗʹऔಘͰ͖Δ͜ͱ͕લఏͷॲཧ͕ଟ͔ͬͨ ϨεϙϯεΤϥʔͷ߹ͰదͳදࣔΛ͢ΔΑ͏ʹશ໘తʹݟ͠ ҟৗܥΛ2"νʔϜͰ؆୯ʹ࠶ݱͰ͖ΔΑ͏ɺςετ༻ͷϓϩΩγπʔϧΛ࡞ 4FSWJDF8PSLFSΛհ͠ɺҙͷ"1*ΛYYঢ়ଶͱͯ͠࠶ݱ
ରࡦɿΤϥʔൃੜ࣌ͷదͳରԠ ϝϯςφϯεը໘ͷදࣔ ࠷ѱμϝͩͬͨ߹Ͱɺϝϯςφϯεը໘Λදࣔͤ͞Δ ʮԿදࣔ͞Εͳ͍ʯઈରʹճආͯ͠ɺެࣜใͷऔಘઌΛҊ ඞਢͳ"1*ϦΫΤετ͕ࣦഊɺ͘͠λΠϜΞτͨ͠߹ 8FC͕μϝͱஅ͞Εͨ߹ʹɺଈ࠲ʹϝϯςφϯεೖΕΔ४උ
݁Ռ https://www.sponichi.co.jp/entertainment/news/2017/11/05/kiji/20171105s00041000500000c.html
ͦͷଞɾࡶײ ϗϯωςϨϏͷ์ૹܾఆΛੈؒͱಉ࣌ʹΔ͜ͱʹ ใ౷੍͋ͬͯɺࣄલʹΒ͞Ε͍ͯͨͷۃҰ෦ ݩʑɺ࢝ఆͰෛՙରࡦΛ࣮ࢪ͢Δ༧ఆͩͬͨͨΊɺલ͠ʹͯ͠ᬏਐ ์ૹத࣌ؒʴЋͷγϑτମ੍Ͱࢹ ൃੜͤͣʹฏʹա͝͠·ͨ͠ -
͜ΕΒͷରࡦͷ͓͔͛Ͱɺ࢝ͷ1000ສاըฏʹա͝͠·ͨ͠ ෦తʹ৭ʑͱݟ͕͠ਤΕ͍͍ͯػձʹ $%/Խඞཁͷͳ͍"1*ݮͰύϑΥʔϚϯεվળ
<hiring/> એɿAbemaTVͰҰॹʹಇ͘ਓΛืू͓ͯ͠Γ·͢ ҎԼͷΑ͏ͳਓʹ͍͍ͯΔ৬Ͱ͢ ɾΰπ͍41"Λ࡞Γ͍ͨਓ ɾ41" 443ͷଟॏߏʹ೩͑Δਓ ɾඦສϢʔβʔͷ͏ಈըΫϥΠΞϯτΛ࡞Γ͍ͨਓ ɾΫϥΠΞϯτ͚ͩ͡Όͳ͘/PEFKTॻ͖͍ͨਓ
͋Γ͕ͱ͏͍͟͝·ͨ͠ 2018/03/09 Frontrend Vol.11 - 2017ϑϩϯτΤϯυେলձ @ktknest AbemaTV #ϗϯωςϨϏ ͷຊԻ