pixiv SketchのSSRの話

pixiv SketchでSSRしている感じの話です

Transcript

1. View Slide

2. ೥௮͚͜Μͩ443ͷ࿩
   αʔόʔαΠυϨϯμϦϯά
   

   View Slide

3. w ໊લɿ͛ͨ
   w ৬ۀɿҰൠϊʔϚϧΤϯδχΞ
   w QJYJW4LFUDIͰ8FCଆͷ࣮૷શൠͨ͠Γϔϧϓͯ͠
   ͘ΕΔਓͷհޢΛͨ͠Γ͍ͯ͠·͢
   HFUB
   

   View Slide

4. 443ͬͯͳʹΑ
   w αʔόʔαΠυϨϯμϦϯάͷ͜ͱ
   w ͬ͘͟Γݴ͏ͱ
   w 41"ͷॳճϩʔυ଎͍ͨ͘͠
   w KTͰίϯςϯπߏங͠ऴΘͬͨঢ়ଶΛαʔόʔ
   αΠυͰ࡞ͬͯग़ͪ͠Ό͑͹଎͘ͳΔ͡ΌΜʂͦ
   ͷ··ಉ͡ίʔυ࢖͍ճͤΔ͠ఱ࠽ʂ
   w ͱ͍͏ײ͡ͷΞϨ
   

   View Slide

5. ࿩͢͜ͱϦετ
   w TLFUDIͷΞʔΩςΫνϟʢ֓આʣ
   w 443ͬͯ۩ମతʹͲ͏΍Δͷ
   w DTTͲ͏ͯ͠Δͷ
   w ͳΜͰ443ʹͳͬͨͷ
   w σϝϦοτͱϝϦοτ
   w ͦͷͨ
   

   View Slide

6. ΞʔΩςΫνϟ
   

   View Slide

7. ΞʔΩςΫνϟ
   Web Browser
   pixiv Sketch API
   rails
   iOS Android
   iOS app Android app
   node.js
   javascript
   ࠷ۙͨ·ʹݟ͔͚Δߏ੒͚ͩͲɺ೥΍ͬͯΔͱ͜͸গͳͦ͏
   

   View Slide

8. ΞʔΩςΫνϟ
   Web Browser
   pixiv Sketch API
   rails
   iOS Android
   iOS app Android app
   node.js
   javascript
   ΅͘ͷ୲౰
   

   View Slide

9. Web Browser
   pixiv Sketch API
   rails
   node.js
   javascript
   ΞʔΩςΫνϟ
   express
   React + Fluxible
   

   View Slide

10. Web Browser
    pixiv Sketch API
    rails
    node.js
    javascript
    ΞʔΩςΫνϟ
    SSR
    React
    SharedCode
    XHR
    HTTP
    viewͳ͠ɺjson͚ͩ
    

    View Slide

11. Web Browser
    pixiv Sketch API
    rails
    node.js
    javascript
    ΞʔΩςΫνϟ
    MCͷೄுΓ
    VͷೄுΓ
    αʔόʔ෇͖ͷڊେͳSPA
    

    View Slide

12. 3FOEFSFS
    w OPEFαʔόʔ SFOEFSFS
    ͸ϏδωεϩδοΫ΍ηο
    γϣϯػߏΛҰ੾͍࣋ͬͯͳ͍
    w "1*͔Β౉͞ΕͨσʔλΛݩʹɺϒϥ΢βͱಉ͡
    ίʔυͰ)5.-Λߏஙͯ͠ϨϯμϦϯά
    w αʔόʔαΠυͰ΋"1*ϦΫΤετ͸)551
    w $PPLJFϔομΛαʔόʔͷ)551ϦΫΤελʔʹ
    ηοτͯ͠ೝূঢ়ଶΛදݱ
    

    View Slide

13. 3FOEFSFS
    w ؆୯ʹݴ͏ͱ.7$ͷ.$͕SBJMTͰ7͕OPEF
    w .$ͱ7ͷؒʹΞʔΩςΫνϟͷน͕ଘࡏ͢Δʢݴ
    ޠɾ'8ɾΠϯελϯε͕ҧ͏ʣͷͰɺޓ͍Λ৵
    ൜Ͱ͖ͳ͍
    

    View Slide

14. 3FOEFSFS
    w 6*ͷ͜ͱ͚ͩΛߟ͍͑ͯΕ͹͍͍ɺϩδοΫʹབྷΉ
    ෳࡶͳॲཧ͸"1*ʹͿΜ౤͛ͯɺ͓͔͔ͬͨ͠ΒYY
    ͔YY͕ฦͬͯ͘ΔͷͰΑ͠ͳʹमਖ਼
    w ಺෦৘ใ΁ಛݖతʹΞΫηε͢Δखஈ͕ଘࡏ͠ͳ͍
    ͷͰɺOPEF࣮૷ͷΤϯόά͕ηΩϡϦςΟϦεΫ
    ʹܨ͕ΔՄೳੑ͕௿͍ "1*͕ਖ਼͍͠ͱԾఆͯ͠
    
    

    View Slide

15. 3FOEFSFS
    Web Browser
    pixiv Sketch API
    rails
    node.js
    javascript
    ӽ͑ΒΕͳ͍น
    SSR͢ΔͱMCͱV͸
    ෼͚͟ΔΛಘ͘ͳΔ
    

    View Slide

16. 3FOEFSFS
    w .7$ڲਖ਼Ϊϒε
    w ͲΕ͚ͩٸ͍Ͱ͍ͯ΋಄ͷ͓͔͍͠7JFXίʔυ
    ͕ॻ͚ͳ͍ɺෛ࠴ઈର࡞Βͳ͍Ϛϯ
    w 443͸͍͍ͧ
    

    View Slide

17. ۩ମతʹͲ͏΍Μͷʁ
    

    View Slide

18. 443ग़ྗͷΠϝʔδ
    w %0$5:1&Ҏ֎ͷ)5.-Λશͯ3FBDUͰߏங
    w BDUJPOΛୟ͍ͯίϯςϯπදࣔʹඞཁͳTUPSF
    σʔλΛऩू
    w 3FBDU%0.SFOEFS5P4UBUJD.BSLVQΛར༻ͯ͠
    %0.ΛTUSJOHʹ͢Δɺ͍ͭ͜ʹ%0$5:1&Λͬ͘
    ͚ͭͯFYQSFTT͔ΒSFTTFOE͢Δ͚ͩ
    w ͔ΜͨΜʂʂ
    

    View Slide

19. 443ग़ྗͷΠϝʔδ
    const app = new Fluxible({ /* shared app root component, stores */ });
    const srv = express();
    srv.use((req, res) => {
    req.context = app.createContext();
    /* ͍Ζ͍Ζ४උ͢Δ (APIΛfetchͨ͠Γͯ͠ɺfluxΛճ͢) */
    const react = React.createElement(Html, { context: req.context });
    const html = ReactDOM.renderToStaticMarkup(react);
    res.send(`${html}`);
    });
    ͜͜Ͱڞ௨ίʔυ
    Λ౉͢
    html͕ϧʔτͷ
    component
    ͔ΜͨΜʂʂ
    

    View Slide

20. express (1 request)
    443ग़ྗͷΠϝʔδ
    req
    Flux
    Context
    res
    React
    Flux
    Context
    ReactDOM
    store
    store
    css
    React
    (html)
    

    View Slide

21. express (1 request)
    443ग़ྗͷΠϝʔδ
    req
    Flux
    Context
    res
    React
    Flux
    Context
    ReactDOM
    store
    store
    css
    React
    (html)
    shared
    shared
    server code
    

    View Slide

22. JTPNPSQIJDTUPSF
    w TUPSFͷσʔλ͸TFSWFS͔ΒDMJFOU΁ҙࣝతʹ౉ͯ͠
    ͋͛ͳ͍ͱ͍͚ͳ͍
    w TUPSFͷঢ়ଶ͸TFSJBMJ[Fͨ͠KTσʔλͱͯ͠ςϯϓ
    Ϩʔτ )UNM$PNQPOFOU
    ͔ΒϖʔδʹຒΊࠐΉ
    w DMJFOUͷॳظԽ࣌ʹ͜ΕΛೖखͯ͠TUPSFͷঢ়ଶΛ
    ෮چͤ͞Δ
    

    View Slide

23. JTPNPSQIJDTUPSF
    const app = new Fluxible({ /* shared app root component, stores */ });
    const srv = express();
    srv.use((req, res) => {
    req.context = app.createContext();
    /* ͍Ζ͍Ζ४උ͢Δ (APIΛfetchͨ͠Γͯ͠ɺfluxΛճ͢) */
    const dehydrated = `window.dehydrated=${serialize(app.dehydrate(req.context))}`;
    const react = React.createElement(Html, { context, dehydrated });
    const html = ReactDOM.renderToStaticMarkup(react);
    res.send(`${html}`);
    });
    serializeͯ͠౉͢
    

    View Slide

24. JTPNPSQIJDDTT
    w XFCQBDLΛ࢖༻ͯ͠DTTΛఏڙ͢ΔGVODUJPOͱͯ͠
    USBOTQJMF͓ͯ͘͠ʢLSJBTPGUJTPNPSQIJDTUZMF
    MPBEFSʣ
    w $PNQPOFOU͸Ϛ΢ϯτ࣌ʹ͜ͷϝιουΛݺΜͰɺ
    ࣗ਎͕ඞཁͱ͢ΔTUZMFΛϒϥ΢βʹఏڙ͢Δ
    

    View Slide

25. JTPNPSQIJDDTT
    w DMJFOUͱTFSWFSͰDTTͷॲཧํ๏Λม͑Δ
    w TFSWFSͰ͸DTTΛTUSJOHͱͯ͠ಘΔGVODUJPOΛ࣮ߦɺ
    BSSBZʹTUSJOHΛQVTI͓͍ͯͯ͠ϨϯμϦϯά࣌ʹ
    TUZMFλάʹల։͢Δ
    w DMJFOUͰ͸TUZMFΛIFBEʹJOTFSU͢Δ%0.ૢ
    ࡞෇͖GVODUJPOΛ࣮ߦ
    

    View Slide

26. JTPNPSQIJDDTT
    const app = new Fluxible({ /* shared app root component, stores */ });
    const srv = express();
    srv.use((req, res) => {
    req.context = app.createContext();
    /* ͍Ζ͍Ζ४උ͢Δ (APIΛfetchͨ͠Γͯ͠ɺfluxΛճ͢) */
    const context = req.context.getComponentContext();
    const styles = [];
    context.insertCss = (s) => styles.push(s._getCss());
    const dehydrated = `window.dehydrated=${serialize(app.dehydrate(req.context))}`;
    const react = React.createElement(Html, { context, dehydrated, styles });
    res.send(`${html}`);
    });
    ReactContextͰpush

    ͢ΔϝιουΛ౉͢
    

    View Slide

27. )UNM$PNQPOFOU
    w EBOHFSPVTMZ4FU*OOFS)5.-Λ࢖ͬͯ౉͞ΕͨTUZMF
    ΍TFSJBMJ[F͞ΕͨTUPSFσʔλΛΨϯΨϯຒΊࠐΉ
    w DMJFOU༻ͷॳظԽTDSJQUͰςϯϓϨʔτͱͯ͠ຒΊࠐ
    ·Εͨ͜ΕΒΛೖख͠ɺDMJFOUଆͷΞϓϦέʔγϣ
    ϯΛαʔόʔͱಉ͡ঢ়ଶʹ෮چ͢Δ
    

    View Slide

28. express (1 request)
    443ग़ྗͷΠϝʔδ
    req
    Flux
    Context
    res
    React
    Flux
    Context
    ReactDOM
    store
    store
    css
    React
    (html)
    serialize
    ArrayPush
    render
    toStaticMarkup
    res.send
    

    View Slide

29. DTTͷ͜ͱৄ͘͠
    

    View Slide

30. ˺8FC$PNQPOFOUT
    w 4LFUDI8FC൛ͷ$PNQPOFOUઓུ
    w 3FBDU$PNQPOFOUͷKT࣮૷ɾDTTείʔϓ͕ࣗ਎
    ͷ֎΁ӨڹΛٴ΅͞ͳ͍Α͏ʹ࣮૷ɾઃܭ͢Δ
    w DTT͸XFCQBDLΛ࢖༻ͯ͠KTʹ಺แɺίϯϙʔωϯ
    τ୯ҐͰهड़͠ίϯϙʔωϯτࣗ਎ʹ؅ཧͤ͞Δ
    w LSJBTPGUJTPNPSQIJDTUZMFMPBEFSࢀর
    

    View Slide

31. ˺8FC$PNQPOFOUT
    w DPNQPOFOU8JMM.PVOUͰDTTΛϚ΢ϯτ͠ɺ
    DPNQPOFOU8JMM6ONPVOUͰDTTΛΞϯϚ΢ϯτ͢Δ
    w Ϛ΢ϯλʔɾΞϯϚ΢ϯλʔ͸಺෦ʹΧ΢ϯλʔ
    Λ͍࣋ͬͯΔ
    w Ϛ΢ϯλʔ͸ʮطʹࣗ਎ͱಉ͡$PNQPOFOU͕ଘ
    ࡏ͍ͯ͠Ε͹ʯϚ΢ϯτ͠ͳ͍
    w ΞϯϚ΢ϯλʔ͸ʮ·ͩࣗ਎ͱಉ͡$PNQPOFOU
    ͕ଘࡏ͍ͯ͠Ε͹ʯΞϯϚ΢ϯτ͠ͳ͍
    

    View Slide

32. ίϯϙʔωϯτߏ੒
    - Component/
    `- package.json // { "main": "Component.jsx" }
    `- Component.jsx // component
    `- Component.styl // stylesheet for component
    σΟϨΫτϦΛimportͨ࣌͠ʹ
    mainͷ஋Λࢀরͯ͘͠ΕΔ
    

    View Slide

33. $PNQPOFOUKTY
    import React, { Component } from 'react';
    import { withStyle } from '../../utils/Decorator';
    @withStyle(require('./Component.styl'))
    export default class Component extends Component {
    static displayName = 'Component';
    componentDidMount = () => {
    console.log('mounted');
    };
    render = () => (
    
    
    component content
    
    
    );
    }
    ޙड़
    ίϯϙʔωϯτ໊ͱಉ͡
    id͔classΛRootʹऔΔ
    ※ transform-decorators-legacy
    

    View Slide

34. $PNQPOFOUTUZM
    #Component
    &Body
    box-sizing border-box
    margin 0 auto
    padding 0 20px
    max-width 600px
    width 100%
    ϑΝΠϧ͋ͨΓ
    Root͸1ݸͷϧʔϧ
    

    View Slide

35. 4UZMF%FDPSBUPS
    import noop from 'lodash/noop';
    import React, { Component, PropTypes } from 'react';
    export const withStyleDecorator = (style) => (ComposedComponent) => (
    class WithStyle extends Component {
    static displayName = `withStyle(${ComposedComponent.displayName})`;
    static contextTypes = {
    insertCss: PropTypes.func.isRequired,
    };
    constructor(props, context) {
    super(props, context);
    this.removeCss = style ? this.context.insertCss(style) : noop;
    }
    componentWillUnmount = () => {
    this.removeCss && setTimeout(this.removeCss, 0);
    };
    render = () => (
    
    );
    }
    );
    isomorphic-style-loader
    ͔Βఏڙ͞ΕΔϚ΢ϯλʔ
    

    View Slide

36. 4UZMFTIFFU3VMF
    w ίϯϙʔωϯτ໊ͱϧʔτͷJEDMBTT໊ΛҰகͤ͞
    ΔͱɺϑΝΠϧγεςϜͷ੍໿্͓ͳ໊͡લͷ
    3PPU&MFNFOU͸࡞੒Ͱ͖ͳ͘ͳΔ
    w ໊લ෇͚ͷϧʔϧΛ౷Ұ͢Δ͚ͩͳͷͰDTTNPEVMF
    Λಋೖ͢ΔΑΓखܰ
    

    View Slide

37. 443Λબ୒ͨ͠ཧ༝
    

    View Slide

38. 8FCͷେ·͔ͳมભ
    w ։ൃ։࢝ νʔϜϝϯόʔਓ
    
    w ϦϦʔε
    w υϩʔػೳWϦϦʔε 4NPPUI-JOF
    
    w 8FCϦϑΝΫλϦϯά
    w υϩʔػೳWϦϦʔε 8FC(-൛
    
    

    View Slide

39. w ϦϦʔε͔Βݱࡏ·ͰΞʔΩςΫνϟʹมߋͳ͠
    w αʔϏεϦϦʔε͔ΒҰ؏ͯ͠αʔόछߏ੒ɺ
    ʮػೳ௥Ճʯͱʮ࠷దԽʯͷΈΛ࣮ࢪ
    w ϦϑΝΫλ͸3FBDUWରԠʹ෇ਵ͢Δ$PNQPOFOU
    ࠷దԽɾTUPSFपΓͷϝϞϦར༻࠷దԽɾ&4΁
    ͷ௥ै͕ओͳλʔήοτ
    w αʔϏεϦϦʔε࣌ʹཁ݅ʹ߹க͢Δʮਖ਼ղʯͷΞʔ
    ΩςΫνϟΛબ୒͢Δ͜ͱ͕Ͱ͖ͨ
    

    View Slide

40. 443ΛܾΊͨϑϩʔ
    

    View Slide

41. 443ΛܾΊͨϑϩʔ
    w Ұ൪࠷ॳ͸OPEFͰϓϩτλΠϐϯάͨ͠
    w ౰࣌3FBDU W
    ͕ྲྀߦΓΈΛਂΊ͍ͯͯɺϑϩ
    ϯτ࿦૪͕ա౉ظΛܴ͍͑ͯͨ
    w ৽ن։ൃͷબ୒ࢶ͔Β#BDLCPOFͷྶѹ͕ফ͑ɺ
    "OHVMBS͔3FBDU͔ͱ͍͏ײ͡ʹͳΓͦ͏ͳࠒ
    

    View Slide

42. 443ΛܾΊͨϑϩʔ
    w ΋ͱ΋ͱɺ3FOES BJSCOC੡ͷ#BDLCPOFΛαʔόʔ
    Ͱ࢖͑Δ΍ͭ
    ͬΆ͍࣮૷ͰKTʹ·ͭΘΔೋॏςϯ
    ϓϨʔτ࣮૷Λഁ໓͍ͤͨ͞ئ๬͕͋ͬͨ
    w #PPUIͰKTςϯϓϨʔτͷೋॏ࣮૷ʹർΕ͖͍ͬͯͨ
    

    View Slide

43. 443ΛܾΊͨϑϩʔ
    w ϓϩτλΠϓதʹ'MVYJCMFͱ͍͏443ରԠͷ'8Λݟ
    ͚ͭͨͷͰɺ͍ܰϊϦͰ443Λࢼͨ͠
    w ΅͘ʮOPEFͰ΍͍͍ͬͯʁʯ
    w 1.ʮ͍͍ͧʯ
    w ΅͘ʮ3FBDUͬͯͷͱ'MVYJCMFͬͯͷͰ443͕ʔʯ
    w 1.ʮ͡ΌΜ͡ΌΜߦ͜͏ʯ
    

    View Slide

44. 443ΛܾΊͨϑϩʔ
    w όοΫΤϯυ΁ͷෆ͔҆ΒSBJMTΤϯδχΞΛௐୡ
    w SBJMT͔ΒWJFXΛग़͢ͷ͸ઈରʹݏͩͬͨ ޙड़
    
    w 1.ʮJ04൛͸ઈରಉ࣌ʹϦϦʔε͢Δͧʯ
    w αʔϏεϦϦʔε౰ॳ͔Β"1*͕ඞཁ
    w SBJMTαʔόʔ͔ΒWJFXΛग़ྗ͢Δͱɺ"1*ͱWJFX
    Ͱೋॏʹ࣮૷͕ඞཁʹͳͬͯ͠·͏
    

    View Slide

45. 443ΛܾΊͨϑϩʔ
    w αʔϏε͸UVNCMS΍JOTUBHSBNͷΑ͏ͳʮλΠϜϥ
    Πϯʯ͕جຊϏϡʔɺϖʔδϯά࣮૷͕ඞਢ
    w SVCZͷJUFNUFNQMBUFʹKTͷJUFNUFNQMBUFΛ
    ॻ͍ͯ9)3ͰKTPOΛೖखͯ͠ΰϦΰϦϖʔδϯ
    άɺΈ͍ͨͳ஍ࠈ͸ಘͨ͘ͳ͍
    w ΋͔ͯ͠͠8FC΋ҰͭͷΫϥΠΞϯτͱݟͳͤ͹Α
    ͍ͷͰ͸ɺOPEFαʔόʔΛʮ8FC#SPXTFS޲͚ͷ
    ΞϓϦʯͬͯݴ͍ுΕͳ͍ͩΖ͏͔
    

    View Slide

46. 443ΛܾΊͨϑϩʔ
    w ʮ8FCϒϥ΢β޲͚ͷΞϓϦʯͱ͍͏ঢ়ଶʹͳΔͱ
    ωΠςΟϒΞϓϦͱίϯςΩετ͕ڞ༗Ͱ͖Δ
    w "1*ͷར༻ํ๏ʹؔͯ͠஌ݟڞ༗͕Մೳɺ࣮૷ί
    ετΛݮΒͤΔ
    w SBJMTͷ࣮૷΋KTPO͚ͩΛ஻Ε͹Α͘ͳΔɺUFNQMBUF
    ࣮૷͕ඞཁͳ͍ͷͰ࣮૷ίετΛݮΒͤΔ
    

    View Slide

47. 443ΛܾΊͨϑϩʔ
    w .$ͱ7ͷؒʹΞʔΩςΫνϟͷน͕͋Δ͜ͱͰ
    ʮUFNQMBUFʹ͔͠ଘࡏ͠ͳ͍ม਺ʯ͕ੜଘͰ͖ͳ
    ͍ɺϝϯςφϯείετ͕ݮΒͤΔ
    w ΫϥΠΞϯτ޲͚࣮૷͕ޓ͍ʹґଘੑΛ࣋ͨͳ͍
    w ͋ΔϓϥοτϑΥʔϜ͕ಛఆͷػೳΛαϙʔτ͢Δ
    ͔Ͳ͏͔͸ɺ७ਮʹ༏ઌ౓ͷ໰୊ʹू໿͞ΕΔ
    

    View Slide

48. 443ΛܾΊͨϑϩʔ
    w KTͰੜ੒͢Δίϯςϯπ͕4&0తʹΞϨ͕ΞϨ͔ͩ
    ΒΞϨɺΈ͍ͨͳ࿩Λ͠ͳͯ͘Α͘ͳΔ ౰࣌
    
    w OPEFKTαʔόʔΛSBJMTαʔόʔͱ͸ผʹཱͯͯ443
    ͠Α͏ͥɺͱ͍͏ྲྀΕʹઆಘྗ͕༩͑ΒΕͨ
    

    View Slide

49. 443ΛܾΊͨϑϩʔ
    w 443͕໾ཱͪͦ͏ͳγʔϯ
    w ΠςϨʔτ͢ΔϦονίϯςϯπΛఏڙ͍ͨ͠
    w ςϯϓϨʔτͷೋॏ࣮૷Λආ͚͍ͨ
    w ϞόΠϧͱಉ࣌ϦϦʔε "1*͕࠷ॳ͔Βඞཁ
    
    

    View Slide

50. σϝϦοτ
    

    View Slide

51. σϝϦοτ
    w ॏ͍ɺ͍͍ͩͨͷ΋ͷ͕ॏ͍ɺͱʹ͔͘ॏ͍
    

    View Slide

52. σϝϦοτ
    w αʔόʔαΠυͰ΋"1*ϦΫΤετ͸)551
    w Φʔόʔϔου͕େ͖͍ɺϨεϙϯεʹ͔͔Δ͕࣌ؒ
    Ұ൪ॏ͍ͱ͜ΖͰT͘Β͍͔͔ͬͯ͠·͏
    w 3FOEFSFS͸Ұ੾ͷಛݖΛ࣋ͨͳ͍ͨΊɺϢʔβʔ͕ϩά
    Πϯ͍ͯ͠Δ͔Ͳ͏͔Λ"1*ͷGFUDIແ͠ʹ஌Γಘͳ͍ɺ
    ϧʔςΟϯάޙͷTUPSFͷঢ়ଶΛݟͯ൑ఆ͢Δ͔͠ͳ͍
    w ͦͷͨΊʮ1SPNJTFBMMͰϦΫΤετΛશฒྻʹͯ͠ζ
    υϯʯͷΑ͏ʹ୯७ʹ͸͍͔ͳ͍ɺ4LFUDIͰ͸443࣌
    ʹฒྻϦΫΤετΛճʹ෼͚ͯૹ͍ͬͯΔ
    

    View Slide

53. σϝϦοτ
    w ഑৴͢ΔKT͕ංେԽ͕ͪ͠
    w XFCQBDLͰશͯΛUSBOTQJMF͢ΔͱKTίʔυʹDTT΋
    ؚ·ΕΔ͜ͱʹͳΔ
    w ݱ࣌఺ͰϑΝΠϧαΠζ͸.#ɺϞόΠϧΞϓ
    Ϧ͕ແ͍αʔϏεͰ͋Ε͹ݱ࣮తͳαΠζͰ͸ͳ͍
    w XFCQBDLͷMPBEFSઃఆʹґଘ͢ΔͷͰະѹॖՕॴΛ૞
    ࡧ͢Δͷ͕ࠔ೉ ͜ͳ͍ͩDTTͷॏෳͱະѹॖͷͱ͜
    ݟ͚ͭͯ.#͘Β͍ݮΒͨ͠
    
    

    View Slide

54. σϝϦοτ
    w ಄ͷ͓͔͍͠ίʔυ͕ॻ͚ͳ͍
    w σʔλ͸"1*͔Β͔͠औͬͯ͜Εͳ͍͠ɺ͍ͬͺ
    ͍औΔͱͦΕ͚ͩϨεϙϯε͕஗͘ͳΔ
    w ͓·͚ʹKT͕མͪΔͱαʔόʔ͕ΤϥʔΛు͘
    w ख਺ΑΓ΋ઃܭʹଟ͘ͷ࣌ؒΛׂ͘͜ͱʹͳΔ
    w ʮԿ೔·Ͱʹ͜Ε࣮૷͠ͱ͍ͯʂϤϩγΫʂʯͬ
    ͯͳͬͨ࣌ʹͭΒ͍ɺ֬อ͠ͳ͚Ε͹͍͚ͳ͍࣌
    ͕ؒগ͠ଟ͘ͳΔ
    

    View Slide

55. ϝϦοτ
    

    View Slide

56. ϝϦοτ
    w ಄ͷ͓͔͍͠ίʔυ͕ॻ͚ͳ͍
    w KTࣗ਎͕σʔλΛೖखͯ͠දݱ͢ΔͷͰɺ༝དྷͷ
    ෆ໌ͳσʔλ͕ଘࡏ͠ͳ͍ʢςϯϓϨʔτʹྲྀ͠
    ࠐ·Ε͍ͯΔม਺ͳͲʣ
    w ࣮૷͸େม͚ͩͲɺશମ૾Λ೺Ѳͨ͠ਓ͕ॻ͘ͱ
    ͍͍ͩͨಉ͡Α͏ͳίʔυʹͳΔ
    

    View Slide

57. ϝϦοτ
    w ϓϥοτϑΥʔϜͷ֦ுੑ͕ߴ͍
    w શͯͷϓϥοτϑΥʔϜ͕ʮ"1*ͱΫϥΠΞϯτ
    ΞϓϦʯͱ͍͏ಉҰͷϞσϧʹͳΔ
    w ޻਺͑֬͞อͰ͖Ε͹ϦϦʔε͔࣌Βશͯͷϓϥο
    τϑΥʔϜ޲͚ʹΞϓϦ͕࡞੒Ͱ͖Δ
    

    View Slide

58. ϝϦοτ
    w ϓϥοτϑΥʔϜؒͷґଘੑ͕௿͍
    w "1*ΛؚΉϓϥοτϑΥʔϜؒͷґଘੑ͕௿͍ͷͰɺ
    ೚ҙͷλΠϛϯάͰΞϓϦ΍ػೳͷ։ൃΛ։࢝͠ɺ೚
    ҙͷλΠϛϯάͰఀࢭͰ͖Δ
    w 4LFUDIͰ͸"1*ʹSBJMTΛ࠾༻͍ͯ͠Δ͕ɺࣾ಺ͷ஌ݟɾ
    ϦϦʔε࣌ظɾઃܭϑϩʔͳͲͷ౎߹Ͱͨ·ͨ·࠾༻
    ͞Ε͍ͯΔ͚ͩ
    w ྫ͑͹ʮKTPO͔͠஻Βͳ͍͠(Pʹஔ͖׵͑Α͏ͥʯ
    ͱ͍͏࿩΋Ͱ͖Δ
    

    View Slide

59. ϝϦοτ
    w ೋॏ࣮૷ͷօࡴ͠
    w ϒϥ΢βଆͰϖʔδϯάͨ͠ΓQVTI4UBUFΛαϙʔτ
    ͨ͠Γ͢Δࡍɺॳճग़ྗͱܧ͗଍͢༻ͷςϯϓϨʔτ
    Λೋॏʹߟྀ͢Δඞཁ͕ͳ͍
    w ίʔυϕʔε͕ಉ͡+BWB4DSJQUͳͷͰͦͷ··࢖͍
    ճͤ͹͍͍
    w ܧ͗଍͞ΕΔՕॴͷΈΞʔΩςΫνϟΛ·͍ͨͩڞ༗
    ͷςϯϓϨʔτʹ͢Δͱ͔ɺ)5.-Λ"1*3FTQPOTFʹ
    ຒΊࠐΉͱ͔ɺͦ͏͍͏͜ͱΛ͠ͳ͍͍ͯ͘
    

    View Slide

60. w ϝϦοτͱσϝϦοτ͕͋ΔɺશͯͷΞϓϦέʔγϣ
    ϯͷύλʔϯʹద߹͢ΔສೳༀͰ͸ͳ͍
    w ԼهͷΑ͏ͳϞνϕʔγϣϯʹରͯ͠༗༻
    w ೋॏ࣮૷Λආ͚͍ͨ
    w αʔϏεΛϦονͳ41"ͱͯ͠ߏங͍ͨ͠
    w ෳ਺ͷϓϥοτϑΥʔϜΛಉ࣌ʹαϙʔτ͍ͨ͠
    w ͱʹ͔͘ԿͰ΋͍͍͔Β443͕͍ͨ͠
    

    View Slide

61. ͦͷଞ
    

    View Slide

62. SFTQPOTF
    w )551ϦΫΤετ͕ϘτϧωοΫʹͳΔ
    w ͳΔ΂͘଎͘͢ΔͨΊ1SPNJTFBMMΛ࢖ͬͯฒྻԽ
    w BTZODBXBJUͰ1SPNJTFBMMͨ͠΍ͭΛBXBJU͢Δ
    w ͜͜͸֎෦ґଘʹͳΔͨΊɺඞͣλΠϜΞ΢τΛઃ
    ఆ͢Δ
    

    View Slide

63. SFTQPOTF
    srv.use(async (req, res, next) => {
    try {
    await Promise.all([
    request1,
    request2,
    request3,
    ]);
    next();
    } catch (error) {
    next(error);
    }
    });
    ͜͏͍͏ײ͡
    

    View Slide

64. 6OIBOEMFE3FKFDUJPO
    w ඞͣVOIBOEMFE3FKFDUJPOΛ؂ࢹ͢Δ
    w ์ஔ͢ΔͱɺΤϥʔʹૺ۰ͨ͠ϢʔβʔͷϨεϙ
    ϯεΛλΠϜΞ΢τͷݶք·Ͱ଴ػͯ͠͠·͏
    w ௚͙ͯ͢͠σϓϩΠͰ͖ΔΑ͏ʹ؂ࢹ͓ͯ͘͠
    w TFSWFS QSPDFTTPO VOIBOEMFE3FKFDUJPO 'VOD
    
    w DMJFOU XJOEPXPOVOIBOEMFESFKFDUJPO'VOD
    

    View Slide

65. FYQSFTTFSSPSIBOEMF
    w FYQSFTTͰ͸BSJUZ͕ͷGVODUJPOΛVTF͓ͯ͘͠ͱΤ
    ϥʔ࣌ͷGBMMCBDLʹͳΔ
    w ͍ͭ͜ͰIUNMͳͲΛฦ٫͢ΔΑ͏ʹ͓ͯ͘͠
    w ࠷ۙ·Ͱ๨ΕͯͯੜΤϥʔϖʔδ͕ग़͍ͯͨʢ໓ଟʹΤϯόά͠ͳ͔ͬͨͷ
    Ͱؾ෇͔ͳ͔ͬͨʣ
    

    View Slide

66. CBCFMMPBEFS
    w TFSWFSͱDMJFOUͰXFCQBDLͷCBCFMMPBEFSઃఆΛม
    ͑Δ
    w OPEFWҎ্Λ࢖༻͍ͯ͠Ε͹ɺBTZODBXBJUΛ
    αϙʔτ͍ͯ͠ΔͷͰCBCFMͷSFHFOFSBUPSͰ
    QPMZpMM͢Δඞཁ͕ͳ͍
    w CBCFMQSFTFUFOWΛ࢖͍TFSWFSଆΛOPEF
    DVSSFOUͱ͢Ε͹Α͍ɺQSPDFTTWFSTJPO͔Βద
    ੾ͳQSFTFUΛબ୒ͯ͘͠ΕΔ
    

    View Slide

67. $PNQPOFOU࠶ར༻
    w ͳΔ΂͘$PNQPOFOUΛ࠶ར༻͢Δ
    w ϨϯμϦϯά΋KTͷ഑৴αΠζ΋ίʔυΛॻ࣌͘
    ؒ΋όάͷಛఆ΋ɺ଎͘খ͘͞Ͱ͖Δ
    w DTTͷϚ΢ϯτɾΞϯϚ΢ϯτ΋Χ΢ϯλʔॲཧ
    ͰऴΘΔͷͰΫϥΠΞϯτͷύϑΥʔϚϯε΋☝
    

    View Slide

68. $PNQPOFOU࠶ར༻
    Button FollowButton
    ݟͨ໨ͷ੍ޚ
    Click
    ϑΥϩʔঢ়ଶͷ੍ޚ
    Button
    ݟͨ໨ͷ͜ͱ͚ͩ ঢ়ଶͷ؅ཧ͚ͩ
    

    View Slide

69. QBDLBHFKTPO
    w XFCQBDLͰ͸QBDLBHFKTPOͰNBJOΩʔͷଞʹ΋ɺ
    CSPXTFSͱ͍͏Ωʔ͕ೝࣝͰ͖Δ
    w ϑΥϧμʹQBDLBHFKTPOΛஔ͍ͱ͍ͯɺͦͷ
    QBDLBHFKTPOʹCSPXTFSͱ͍͏ΩʔΛઃఆ͢Δ
    w ϒϥ΢βଆͷϏϧυͰ͸CSPXTFSͷϑΝΠϧΛ࢖
    ͍ɺαʔόʔଆͷϏϧυͰ͸NBJOΛ࢖͏ɺͱ͍
    ͏࢖͍෼͚͕Ͱ͖Δ
    w )551ͷϦΫΤελʔ͸͜ΕΛ࢖ͬͯ෼͚͍ͯΔ
    

    View Slide

70. QBDLBHFKTPO
    

    View Slide

71. MPDBM4UPSBHF
    w MPDBM4UPSBHFΛར༻͢ΔͷΛ΍Ίɺ$PPLJFΛ4UPSBHF
    ͱͯ͠ར༻͢Δ
    w ͨͱ͑͹ϞόΠϧ޲͚ͷΞϓϦ༠ಋϔομʔͷද
    ࣔɾඇද੍ࣔޚ
    w 443࣌ʹϨϯμϦϯάͰ͖͍ͯͨํ͕SFQBJOU͕
    ൃੜ͠ͳ͍ɺ$PPLJFʹ͍࣋ͬͯͨํ͕ॳظϩʔ
    υύϑΥʔϚϯεͷ޲্ΛݟࠐΊΔ
    

    View Slide

72. ΤϯυϙΠϯτ
    w ͠͹Β͘ͷؒɺαʔόʔଆͷ಺෦ϦΫΤετͷΤϯ
    υϙΠϯτʹ΋IUUQTTLFUDIQJYJWOFUͱ͍͏ϑ
    ϧͷ63-Λ࢖͍ͬͯͨ
    w ໊લղܾͰ͍ͬͨΜ֎ʹग़Δ෼ͱɺIUUQTͰड͚Δ
    DQVফඅ෼Λճආ͢ΔͨΊɺαʔόʔϦΫΤετͰ
    ͸ϑϩϯταʔόʔ΁ͷ*1Λ࢖͏Α͏ઃఆͨ͠
    

    View Slide

73. w ςετ͸KFTUͩͱ͔σϓϩΠ͸TIJQJUͩͱ
    ͔ SFBDU@QFSGͩͱ͔αʔϏεॳظͰ͸γʔυσʔ
    λͷूΊํ͕Ұ൪େࣄͩͱ͔&4-JOUͩͱ͔BTZOD
    BXBJUͩͱ͔%0.ͷྔΛ཈੍͢Δख๏ͩͱ͔).3
    ͩͱ͔47(ΞΠίϯͩͱ͔ը૾ͷϋογϡϏϧυͩ
    ͱ͔Ϧϩʔυͳ͠Ͱݴޠ੾Γସ͑ΒΕΔͩͱ͔Ұ൪
    ϝϞϦফඅͷগͳ͍TUPSFͷઃܭख๏ͩͱ͔σΟϨ
    ΫτϦอकํ਑ͱ͔Կ͔͍Ζ͍Ζ͋Γ͗ͯ͢࿩͖͠
    Εͳ͍
    w ͕࣌ؒ଍Γͳ͍ɺؾʹͳͬͨΒฉ͍͍ͯͩ͘͞
    

    View Slide

74. ·ͱΊ
    w 443͸͍͍ͧ
    

    View Slide

75. Ҏ্
    

    View Slide