$30 off During Our Annual Pro Sale. View Details »

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

Ayumu Sato
October 15, 2016

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

AbemaTV Developer Conference 2016 http://developer.abema.io/ で使用したスライドです。本編 20 分。

Ayumu Sato

October 15, 2016
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. Ꟛ涪♳ך圫ղז⣛㶷ך鳞 א׵
    ׫ה
    '3&4)CZ"CFNB57ך鑧
    "CFNB57%FWFMPQFS$POGFSFODF
    !BIPNV"ZVNV4BUP

    View Slide

  2. ְ׉׿
    ս⣛㶷վ
    շせ٥أ荈ո➭ך׮ךח״׶ַַ׶ծ
    ׉׸ח״׏ג䧭׶甧אֿהկ

    View Slide

  3. ‣ ـٓؐؠח㼎ׅ׷⣛㶷
    ‣ 'MBTIח㼎ׅ׷⣛㶷
    ‣ ٓ؎ـٓٔח㼎ׅ׷⣛㶷
    ،آؑٝت

    View Slide

  4. IUUQTBCFNBGSFTIUW
    '3&4)CZ"CFNB57

    View Slide

  5. ‣ *TPNPSQIJD"SDIJUFDUVSF
    ‣ 3FBDU'MVYJCMFד443ה41"׾⚕甧
    ‣ 'MBTIPS8FC垥彊䪮遭ז⹛歗فٖ؎َ٦
    ‣ 8FC4PDLFUח״׷ٔ،ٕة؎يثٍحز
    䪮遭أةحؙ

    View Slide

  6. IUUQTTQFBLFSEFDLDPNBIPNVDMJFOUTJEFPGGSFTI
    剢ח/PEF㷕㕦ד涪邌׃ת׃׋

    View Slide

  7. ֿ׿ח׍כ
    !BIPNVדׅ

    View Slide

  8. ‣ ⡟谏娄ׁהֲ֮ײ׬
    ‣ せ〢㾊ה幪靼׾䖂䗁⚥ך8FCؒٝآص،
    ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZ
    ‣ 吳
    $ZCFS"HFOUַ׵ 吳
    "CFNB57⳿ぢ⚥
    "NFCB窟䭍䪮遭劤鿇8FC*OJUJBUJWF$FOUFS
    !BIPNV

    View Slide

  9. Frontend Weekly
    IUUQTGSPOUFOEXFFLMZUPLZP
    㕂ⰻ㢩ךؿٗٝزؒٝسꟼ鸬صُ٦أ׾嫣鹈ֶ㾈ֽׅ׷ً٦ٕوؖآٝ

    View Slide

  10. ΍ـٓؐؠח㼎ׅ׷⣛㶷

    View Slide

  11. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. View Slide

  16. 1MBZFSGPS)551-JWF4USFBNJOH
    أزٔ٦ىؚٝ⹛歗فٖ؎َ٦

    View Slide

  17. ꞿ儗꟦ⱄ欰דז׿הזֻ姺ת׷ֿהָ֮׷ծהַך切僳זⱄ植ָ暴חֹאְ
    غٔؒ٦ءّٝذأزָא׵ְ

    View Slide

  18. ‣ 姻䌢
    ‣ 僥⫷ָؙؕאָֻ鏩㺁דֹ׷
    ‣ 僥⫷ָؙؕאֻג؎ٓ׏הׅ׷
    ‣ 僥⫷ָ姺ת׷荈⹛䗁䌓
    ‣ 僥⫷ָ姺ת׷宕⛉⨡姺
    ‣ ⹛ַזְ
    ➂⸂ذأزפך铬ꆃ

    View Slide

  19. ‣ 8FC垥彊ז植➿ד׮ـٓؐؠ꟦ך䊴殯כ֮׷
    ‣ ׉׃גFYCPY娤כ麐㖈ׅ׷
    ‣ "OESPJE#SPXTFSחֶֽ׷)-4娤׮麐㖈ׅ׷
    ‣ 8JOך*&ח.4& .FEJB4PVSDF&YUFOTJPOT
    כזְ
    ְ׻ײ׷ـٓؐؠ⣛㶷ך㉏겗

    View Slide

  20. ‣ *&דS"'3FBDUךWBMVF-JOLָ窃׬،ٖהַ
    ‣ 4BGBSJװ&EHFָ稆ד)-4ⱄ欰׃׋ָ׷اٖהַ
    ‣ 〢׭ך7דObject.assignך갫䎷ָ،ٖהַ
    ‣ &EHFדiframeָاٖהַ
    ‣ mozRequestFull"S"creenהַMSFullscreenChangeהַ
    ‣ 8JO*&ך暴㹀ؽٕسחꣲ׏גխխխխխխ
    new Worker(URL.createObjectURL(blob));ָؒٓ٦הַ

    View Slide

  21. $ISPNF'Yד⹛ַׇ׋ֻ׵ְד
    屘倖׃׋׵⽯娤ׅ׷⚅歲錁
    ߋʹɺ͋Δఔ౓շదͳ Windows Ϛγϯ΋ৗඋ͠ͳ͍ͱײ͕֮ಷΔ

    View Slide

  22. Ύ'MBTIח㼎ׅ׷⣛㶷

    View Slide

  23. ➂➂➂➂➂➂➂➂➂➂➂➂➂
    խ'MBTIָ$ISPNFד⹛ַזְխ
    :?:?:?:?:?:?:?:?:?:?:?:

    View Slide

  24. ،ً٦غؾؚךؐ؍آؑحزػ٦خ
    '3&4)ך&NCFEفٖ؎َ٦ 䔲儗

    ˟➙כ"CFNB57ך꫼姺歗⫷ח➿׻׏גְ׷

    View Slide

  25. IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQPUIFSTFBVUPQMBZ@BE@BTIIUNM
    㼭ְׁ'MBTI׾ⱄ欰ׇׁ׷㔐鼘䩛媮

    View Slide

  26. 'MBTIח㼎ׅ׷⣛㶷

    View Slide

  27. ‣ )551-JWF4USFBNJOHדׅ
    ‣ ⹛歗׾أزٔ٦ىؚٝד崧ׅ鋉呓דׅ
    ‣ '3&4)׮"CFNB57׮ְתךהֿ׹)-4
    ‣ )-4ך鑫稢כծֿך䖓ךإحءַّٝխ
    3PPN"ךꟚ㨣ךإحءّٝ׾⿫罋ח
    )-4הְֲ׮ך

    View Slide

  28. ‣ 畭涸ח8FC垥彊ז㹋鄲׾ׁ׸׋ٓ؎ـָٓٔ
    ֮׵ײ׷橆㞮ד㸜㹀דֹ׷קו卫׸גְזְ
    ‣ 嫰鯰ׅ׷ה'MBTI㹋鄲כ㦩ח㸜㹀׃גְ׷
    ‣ ׋׌׃$16כـٝ㔐ׁ׸׷
    ‣ 军䨺䚍腉ָ넝ת׷
    'MBTI㹋鄲ד)-4׾ⱄ欰

    View Slide

  29. 鶕׷剑䖓ך㻢ⴻ

    View Slide

  30. ‣ $ISPNFהד媮ꥡ涸חـٗحؙ׾Ꟛ㨣
    ‣ 4BGBSJכַ׵琎噰涸זـٗحؙ׾Ꟛ㨣
    ‣ 'JSFGPYה&EHF׮媮ꥡ涸חـٗحؙך倯ꆙ
    ‣ *OUFSOFU&YQMPSFSכ'MBTIהⰟח嶊ִײֻ
    㻢ⴻך傈ծ鹌䯴וֲדַׅ

    View Slide

  31. IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQPUIFSTFSVJO@PG@BTIIUNM
    'MBTI⺪㔲笨ך植朐

    View Slide

  32. View Slide

  33. View Slide

  34. 膴'MBTI⣛㶷

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. ‣ EBJMZNPUJPOIMTKT׾䱰欽
    ‣ .FEJB4PVSDF&YUFOTJPOTⵃ欽鑫׃ֻכ SZ
    ‣ $ISPNFה&EHFחぢֽג䲿⣘⚥
    ‣ 'JSFGPY 4BGBSJכ갫如䲿⣘ծ*&כ'MBTI竰竲
    膴'MBTI鹌䯴׃גתׅ

    View Slide

  39. Ώٓ؎ـٓٔח㼎ׅ׷⣛㶷

    View Slide

  40. OQNהCSPXTFSJGZ
    ؕآُ،ٕז⣛㶷ך鍑犜

    View Slide

  41. ‣ 醱꧟ז㉏겗׾鸞װַח鍑寸דֹ׷
    ‣ 044涸זㅷ颵䬐⥂׾劍䖉דֹ׷
    ⹛⡲㹋籐
    堣腉鷄⸇
    غؚ⥜姻FUD
    ⣛㶷ךًٔحز

    View Slide

  42. ‣ ؝، SFBDU VYJCMF BOHVMBS

    ‣ ِ٦ذ؍ٔذ؍ NPNFOU JNNVUBCMF SY

    ‣ ؿ؋ؙٝءّٝ MPEBTI MFGUQBE

    ‣ هٔؿ؍ٕ XIBUXHGFUDI FTQSPNJTF

    ‣ 6*؝ٝه٦طٝز DBSPVTFM QBHJOBUF

    ٓ؎ـٓٔ⣛㶷ךⴓ겲

    View Slide

  43. ‣ ًاحسך׋׭ח⟒ղ׃ְٓ؎ـٓٔכ–
    ‣ +4ךغٝسٕ؟؎ؤ׾罋䣁ׅ׷ה㣐磛כ㔭׷
    ‣ ًاحس׀החJNQPSUדֹ׷ה⸔ַ׷
    ‣ ⢽ִל3Y+4Wהַכ孡׾黎׏גֻ׸גְ׷
    ِ٦ذ؍ٔذ؍ך磛䏝

    View Slide

  44. ‣ Ⰵ䙀זㅷ颵ثؑحָؙ䗳銲
    ‣ 3FBDU،حفر٦ز儗ח駈׾䒷׏䓸׵׸ָ׍
    ‣ 暴婊銲⟝׮GPSLׅ׸לוֲהד׮ז׷ָ
    ‣ 穠㽷ؔ٦ت٦ً؎زה㢌׻׵זֻז׷䠬
    ➭➂ך6*؝ٝه٦طٝز

    View Slide

  45. ⣛㶷خٔ٦׾搀꠹ח
    㣐ֹֻ׃זְ⸕⸂׮䗳銲

    View Slide

  46. ⣛㶷ٓ؎ـٓٔꟼ鸬ך
    زٓـٕءُ٦ذ؍ؚٝ

    View Slide

  47. ‣ *TPNPSQIJDזSPVUFד㣐ꆀךر٦ة׾《䖤
    ‣ 䲽歗ׅץֹ銲稆ָ㢳ֻז׷⚺חٔأز禸
    ‣ SFOEFS5P4USJOHָꅾֻז׷
    ‣ ؙٓ؎،ٝزך׫ד鹼䒀㹋遤ׅ׷խխխխ
    SPVUFⳢ椚׾鷄⸇׃ג鍑寸✮㹀
    3PVUFהSFOEFS5P4USJOH

    View Slide

  48. // αόΫϥ྆ํͰϧʔςΟϯά࣌ʹ࣮ߦ
    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));
    }

    View Slide

  49. ‣ 4UPSFַ׵*NNVUBCMFז.BQװ-JTUָ䲿⣘
    ‣ 䲿⣘ׁ׸׋ؔـآؙؑزכTUBUFד⥂䭯
    ‣ SFOEFSⰻדTUBUFGPPUP+4

    ‣ SFOEFSׅ׷׋ןחUP+4
    ך؝أز넝ֺׅ娤
    *NNVUBCMFKTהSFOEFS

    View Slide

  50. componentDidMount() {
    this.subscriptions.push(
    FooStore.foo$.subscribe(foo => {
    // foo: Immutable.Map
    this.setState({ foo });
    })
    );
    }
    render() {
    // render ͕܁Γฦ͞ΕΔͨͼʹ toJS ͕૬౰ͳ࣌ؒΛͱΔ
    let foo = this.state.foo.toJS();
    return (

    {foo.someProperty}

    );
    }

    View Slide

  51. IUUQTDIOFUQPTUTBCFNBUWSVOUJNFQFSGBVEJUIUNM
    "CFNB57ךٓٝة؎يػؿؓ٦وٝأך"VEJU

    View Slide

  52. תה׭

    View Slide

  53. ‣ فٖ؎َ٦嗚鏾׋ְפ׿
    ‣ 8JEOPXT⢪ֲֶ
    ‣ 膴'MBTIָ׿ל׹ֲ
    ‣ ⣛㶷خٔ٦ך㣐ֹׁכ罋ִ״ֲ
    ‣ 8FCꟚ涪׏ג嚂׃ְ
    תה׭

    View Slide

  54. $IFFST
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    !
    "

    View Slide