pixiv SketchのSSRの話

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ΞʔΩςΫνϟ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

۩ମతʹͲ͏΍Μͷʁ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 ͔ΜͨΜʂʂ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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ͯ͠౉͢

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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  ͢ΔϝιουΛ౉͢

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

DTTͷ͜ͱৄ͘͠

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

$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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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 ͔Βఏڙ͞ΕΔϚ΢ϯλʔ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

443Λબ୒ͨ͠ཧ༝

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

443ΛܾΊͨϑϩʔ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

σϝϦοτ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

ϝϦοτ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

ͦͷଞ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

QBDLBHFKTPO

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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