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
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
180
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
450
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
170
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
120
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
160
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
550
プログラマのための作曲入門
cheebow
0
530
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
510
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Code Review Best Practice
trishagee
72
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Git: the NoSQL Database
bkeepers
PRO
431
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
How to Think Like a Performance Engineer
csswizardry
27
2k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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 #ϗϯωςϨϏ ͷຊԻ