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

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

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