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
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
2
1.3k
Improving my own Ruby thereafter
sisshiki1969
1
150
Design Foundational Data Engineering Observability
sucitw
3
160
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
Honoアップデート 2025年夏
yusukebe
1
910
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
個人軟體時代
ethanhuang13
0
310
Kiroで始めるAI-DLC
kaonash
2
540
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
17
8.8k
為你自己學 Python - 冷知識篇
eddie
1
340
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Site-Speed That Sticks
csswizardry
10
810
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Producing Creativity
orderedlist
PRO
347
40k
GitHub's CSS Performance
jonrohan
1032
460k
Side Projects
sachag
455
43k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
4 Signs Your Business is Dying
shpigford
184
22k
Six Lessons from altMBA
skipperchong
28
4k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
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 #ϗϯωςϨϏ ͷຊԻ