開発上の様々な依存のつらみと FRESH! by AbemaTV の話

Ꟛ涪♳ך圫ղז⣛㶷ך鳞 א׵ ׫ה '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

‣ ـٓؐؠך珏겲 ‣ رغ؎أך堣珏 ‣ رغ؎أך䚍腉 ‣ أؙٔ٦ٝ؟؎ؤ ‣ طحزٙ٦ؙך鸞䏝
ـٓؐؠ⟃㢩ך䟝㹀勴⟝׮㢳ְ

➂➂➂➂➂➂➂➂➂➂➂➂➂ խ؟ه٦زׅץֹ橆㞮ָ㢳ְխ :?:?:?:?:?:?:?:?:?:?:?:

暴חꨇ⭑׃גְ׷ךָ ؟٦ؽأך欰ㄏ简

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⺪㔲笨ך植朐

膴'MBTI⣛㶷

‣ 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 ! " ⌂

開発上の様々な依存のつらみと FRESH! by AbemaTV の話

開発上の様々な依存のつらみと FRESH! by AbemaTV の話

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript