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
開発上の様々な依存のつらみと FRESH! by AbemaTV の話
Search
Ayumu Sato
October 15, 2016
Programming
18
9.4k
開発上の様々な依存のつらみと FRESH! by AbemaTV の話
AbemaTV Developer Conference 2016
http://developer.abema.io/
で使用したスライドです。本編 20 分。
Ayumu Sato
October 15, 2016
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.1k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
200
副業をきっかけに 切り拓くキャリア形成
ahomu
1
75
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.5k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.3k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
160
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
19k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
540
CyberAgent が目指すマスメディアとアクセシビリティ
ahomu
2
2.4k
Other Decks in Programming
See All in Programming
Goのエラースタックトレースの歴史と今後
sonatard
10
2k
ペパボOpenTelemetry革命
pyama86
2
170
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
530
業務ツールとして使うPostman
msys75
0
120
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
Docker_OSS_ホスティング入門
satokoki645
0
110
Ruby Function Composition
bkuhlmann
1
340
Going beyond Apache Parquet's default settings
xhochy
0
140
Elm 0.19.0 Changes
bkuhlmann
0
510
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
480
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
Milestoner
bkuhlmann
1
420
Featured
See All Featured
Infographics Made Easy
chrislema
238
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Web development in the modern age
philhawksworth
203
10k
Statistics for Hackers
jakevdp
790
220k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
RailsConf 2023
tenderlove
9
570
Practical Orchestrator
shlominoach
183
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Transcript
涪♳ך圫ղז⣛㶷ך鳞 א ה '3&4)CZ"CFNB57ך鑧 "CFNB57%FWFMPQFS$POGFSFODF !BIPNV"ZVNV4BUP
ְ ս⣛㶷վ շせ٥أ荈ո➭ךךח״ַַծ ח״ג䧭甧אֿהկ
‣ ـٓؐؠח㼎ׅ⣛㶷 ‣ 'MBTIח㼎ׅ⣛㶷 ‣ ٓ؎ـٓٔח㼎ׅ⣛㶷 ،آؑٝت
IUUQTBCFNBGSFTIUW '3&4)CZ"CFNB57
‣ *TPNPSQIJD"SDIJUFDUVSF ‣ 3FBDU 'MVYJCMFד443ה41"⚕甧 ‣ 'MBTIPS8FC垥彊䪮遭ז⹛歗فٖ؎َ٦ ‣ 8FC4PDLFUח״ٔ،ٕة؎يثٍحز 䪮遭أةحؙ
IUUQTTQFBLFSEFDLDPNBIPNVDMJFOUTJEFPGGSFTI 剢ח/PEF㷕㕦ד涪邌׃ת׃
ֿחכ !BIPNVדׅ
‣ ⡟谏娄ׁהֲ֮ײ ‣ せ〢㾊ה幪靼䖂䗁⚥ך8FCؒٝآص، ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZ ‣ 吳 $ZCFS"HFOUַ 吳
"CFNB57⳿ぢ⚥ "NFCB窟䭍䪮遭劤鿇8FC*OJUJBUJWF$FOUFS !BIPNV
Frontend Weekly IUUQTGSPOUFOEXFFLMZUPLZP 㕂ⰻ㢩ךؿٗٝزؒٝسꟼ鸬صُ٦أ嫣鹈ֶ㾈ֽًׅ٦ٕوؖآٝ
ـٓؐؠח㼎ׅ⣛㶷
Windows - Chrome latest - Firefox latest - Internet Explorer
11 w/Windows 7, 8.1, 10 - Microsoft Edge last 2 versions macOS (OS X) - Chrome latest - Firefox latest - Safari last 2 versions Android - Android Browser 4.1, 4.3, 4.4, 5-6.x (Chromium) iOS - Safari last 2 versions
‣ ـٓؐؠך珏겲 ‣ رغ؎أך堣珏 ‣ رغ؎أך䚍腉 ‣ أؙٔ٦ٝ؟؎ؤ ‣ طحزٙ٦ؙך鸞䏝
ـٓؐؠ⟃㢩ך䟝㹀勴⟝㢳ְ
➂➂➂➂➂➂➂➂➂➂➂➂➂ խ؟ه٦زׅץֹ橆㞮ָ㢳ְխ :?:?:?:?:?:?:?:?:?:?:?:
暴חꨇ⭑׃גְךָ ؟٦ؽأך欰ㄏ简
None
1MBZFSGPS)551-JWF4USFBNJOH أزٔ٦ىؚٝ⹛歗فٖ؎َ٦
ꞿ儗ⱄ欰דזהזֻ姺תֿהָ֮ծהַך切僳זⱄ植ָ暴חֹאְ غٔؒ٦ءّٝذأزָאְ
‣ 姻䌢 ‣ 僥⫷ָؙؕאָֻ鏩㺁דֹ ‣ 僥⫷ָؙؕאֻג؎ٓהׅ ‣ 僥⫷ָ姺ת荈⹛䗁䌓 ‣ 僥⫷ָ姺ת宕⛉⨡姺
‣ ⹛ַזְ ➂⸂ذأزפך铬ꆃ
‣ 8FC垥彊ז植➿דـٓؐؠך䊴殯כ֮ ‣ ׃גFYCPY娤כ麐㖈ׅ ‣ "OESPJE#SPXTFSחֶֽ)-4娤麐㖈ׅ ‣ 8JOך*&ח.4& .FEJB4PVSDF&YUFOTJPOT כזְ
ְײـٓؐؠ⣛㶷ך㉏겗
‣ *&דS"' 3FBDUךWBMVF-JOLָ窃،ٖהַ ‣ 4BGBSJװ&EHFָ稆ד)-4ⱄ欰׃ָاٖהַ ‣ 〢ך7דObject.assignך갫䎷ָ،ٖהַ ‣ &EHFד<use xlink:href>
iframeָاٖהַ ‣ mozRequestFull"S"creenהַMSFullscreenChangeהַ ‣ 8JO *&ך暴㹀ؽٕسחꣲגխխխխխխ new Worker(URL.createObjectURL(blob));ָؒٓ٦הַ
$ISPNF'Yד⹛ְַׇֻד 屘倖׃⽯娤ׅ⚅歲錁 ߋʹɺ͋Δఔշదͳ Windows Ϛγϯৗඋ͠ͳ͍ͱײ͕֮ಷΔ
Ύ'MBTIח㼎ׅ⣛㶷
➂➂➂➂➂➂➂➂➂➂➂➂➂ խ'MBTIָ$ISPNFד⹛ַזְխ :?:?:?:?:?:?:?:?:?:?:?:
،ً٦غؾؚךؐ؍آؑحزػ٦خ '3&4)ך&NCFEفٖ؎َ٦ 䔲儗 ˟➙כ"CFNB57ך姺歗⫷ח➿גְ
IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQPUIFSTFBVUPQMBZ@BE@BTIIUNM 㼭ְׁ'MBTIⱄ欰ׇׁ㔐鼘䩛媮
'MBTIח㼎ׅ⣛㶷
‣ )551-JWF4USFBNJOHדׅ ‣ ⹛歗أزٔ٦ىؚٝד崧ׅ鋉呓דׅ ‣ '3&4)"CFNB57ְתךהֿ)-4 ‣ )-4ך鑫稢כծֿך䖓ךإحءַّٝխ 3PPN"ך㨣ךإحءّٝ罋ח )-4הְֲך
‣ 畭涸ח8FC垥彊ז㹋鄲ׁٓ؎ـָٓٔ ֮ײ橆㞮ד㸜㹀דֹקו卫גְזְ ‣ 嫰鯰ׅה'MBTI㹋鄲כ㦩ח㸜㹀׃גְ ‣ ׃$16כـٝ㔐ׁ ‣ 军䨺䚍腉ָ넝ת 'MBTI㹋鄲ד)-4ⱄ欰
鶕剑䖓ך㻢ⴻ
‣ $ISPNFהד媮ꥡ涸חـٗحؙ㨣 ‣ 4BGBSJכַ琎噰涸זـٗحؙ㨣 ‣ 'JSFGPYה&EHF媮ꥡ涸חـٗحؙך倯ꆙ ‣ *OUFSOFU&YQMPSFSכ'MBTIהⰟח嶊ִײֻ 㻢ⴻך傈ծ鹌䯴וֲדַׅ
IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQPUIFSTFSVJO@PG@BTIIUNM 'MBTI⺪㔲笨ך植朐
None
None
膴'MBTI⣛㶷
None
None
None
‣ EBJMZNPUJPOIMTKT䱰欽 ‣ .FEJB4PVSDF&YUFOTJPOTⵃ欽鑫׃ֻכ SZ ‣ $ISPNFה&EHFחぢֽג䲿⣘⚥ ‣ 'JSFGPY 4BGBSJכ갫如䲿⣘ծ*&כ'MBTI竰竲
膴'MBTI鹌䯴׃גתׅ
Ώٓ؎ـٓٔח㼎ׅ⣛㶷
OQNהCSPXTFSJGZ ؕآُ،ٕז⣛㶷ך鍑犜
‣ 醱꧟ז㉏겗鸞װַח鍑寸דֹ ‣ 044涸זㅷ颵䬐⥂劍䖉דֹ ⹛⡲㹋籐 堣腉鷄⸇ غؚ⥜姻FUD
⣛㶷ךًٔحز
‣ ؝، SFBDU VYJCMF BOHVMBS ‣ ِ٦ذ؍ٔذ؍ NPNFOU JNNVUBCMF
SY ‣ ؿ؋ؙٝءّٝ MPEBTI MFGUQBE ‣ هٔؿ؍ٕ XIBUXHGFUDI FTQSPNJTF ‣ 6*؝ٝه٦طٝز DBSPVTFM QBHJOBUF ٓ؎ـٓٔ⣛㶷ךⴓ겲
‣ ًاحسךח⟒ղ׃ְٓ؎ـٓٔכ ‣ +4ךغٝسٕ؟؎ؤ罋䣁ׅה㣐磛כ㔭 ‣ ًاحس׀החJNQPSUדֹה⸔ַ ‣ ⢽ִל3Y+4Wהַכ孡黎גֻגְ ِ٦ذ؍ٔذ؍ך磛䏝
‣ Ⰵ䙀זㅷ颵ثؑحָؙ䗳銲 ‣ 3FBDU،حفر٦ز儗ח駈䒷䓸ָ ‣ 暴婊銲⟝GPSLׅלוֲהדזָ ‣ 穠㽷ؔ٦ت٦ً؎زה㢌זֻז䠬 ➭➂ך6*؝ٝه٦طٝز
⣛㶷خٔ٦搀꠹ח 㣐ֹֻ׃זְ⸕⸂䗳銲
⣛㶷ٓ؎ـٓٔꟼ鸬ך زٓـٕءُ٦ذ؍ؚٝ
‣ *TPNPSQIJDזSPVUFד㣐ꆀךر٦ة《䖤 ‣ 䲽歗ׅץֹ銲稆ָ㢳ֻז⚺חٔأز禸 ‣ SFOEFS5P4USJOHָꅾֻז ‣ ؙٓ؎،ٝزךד鹼䒀㹋遤ׅխխխխ SPVUFⳢ椚鷄⸇׃ג鍑寸✮㹀 3PVUFהSFOEFS5P4USJOH
// αόΫϥ྆ํͰϧʔςΟϯά࣌ʹ࣮ߦ action: (context, payload, done) { Promise.all([ context.executeAction(ͳʹ͔େࣄͳσʔλऔಘ1), context.executeAction(ͳʹ͔େࣄͳσʔλऔಘ2)
]) .then(() => done()) .catch((err) => done(err)); }, // ΫϥΠΞϯταΠυͷΈϧʔςΟϯάޙʹ࣮ߦ deferAction: (context, payload, done) { Promise.all([ context.executeAction(Εͯྑ͍σʔλऔಘ1), context.executeAction(Εͯྑ͍σʔλऔಘ2) ]) .then(() => done()) .catch((err) => done(err)); }
‣ 4UPSFַ*NNVUBCMFז.BQװ-JTUָ䲿⣘ ‣ 䲿⣘ׁؔـآؙؑزכTUBUFד⥂䭯 ‣ SFOEFSⰻדTUBUFGPPUP+4 ‣ SFOEFSׅןחUP+4 ך؝أز넝ֺׅ娤
*NNVUBCMFKTהSFOEFS
componentDidMount() { this.subscriptions.push( FooStore.foo$.subscribe(foo => { // foo: Immutable.Map this.setState({
foo }); }) ); } render() { // render ͕܁Γฦ͞ΕΔͨͼʹ toJS ͕૬ͳ࣌ؒΛͱΔ let foo = this.state.foo.toJS(); return ( <div> <h1>{foo.someProperty}</h1> </div> ); }
IUUQTDIOFUQPTUTBCFNBUWSVOUJNFQFSGBVEJUIUNM "CFNB57ךٓٝة؎يػؿؓ٦وٝأך"VEJU
תה
‣ فٖ؎َ٦嗚鏾ְפ ‣ 8JEOPXT⢪ֲֶ ‣ 膴'MBTIָלֲ ‣ ⣛㶷خٔ٦ך㣐ֹׁכ罋ִ״ֲ ‣ 8FC涪ג嚂׃ְ
תה
$IFFST IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! " ⌂