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
710
AbemaTVはただのSSR じゃねぇんだよ
ktknest
11
7.1k
Other Decks in Programming
See All in Programming
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
CSC509 Lecture 08
javiergs
PRO
0
260
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
1
140
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
860
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
技術的負債の正体を知って向き合う
irof
0
270
モテるデスク環境
mozumasu
3
1.3k
Ktorで簡単AIアプリケーション
tsukakei
0
110
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
三者三様 宣言的UI
kkagurazaka
0
250
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
Writing Fast Ruby
sferik
630
62k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
A better future with KSS
kneath
239
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
A designer walks into a library…
pauljervisheath
209
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
71
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 #ϗϯωςϨϏ ͷຊԻ