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
2k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
200
副業をきっかけに 切り拓くキャリア形成
ahomu
0
71
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
Rethinking UI building strategies @ SFI 2024
letelete
0
270
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
970
Java 22 Overview
kishida
1
180
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
Git Rebase
bkuhlmann
11
1.6k
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
Milestoner
bkuhlmann
1
410
Git Lint
bkuhlmann
4
750
ONE WEDGE_company_guide
1wedge_one
0
490
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
GitHub Copilotのススメ
marcy731
1
200
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Designing with Data
zakiwarfel
96
4.8k
Building Adaptive Systems
keathley
31
1.9k
Faster Mobile Websites
deanohume
299
30k
We Have a Design System, Now What?
morganepeng
43
6.8k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Into the Great Unknown - MozCon
thekraken
10
1k
Become a Pro
speakerdeck
PRO
11
4.5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Making Projects Easy
brettharned
108
5.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 ! " ⌂