Tweet
Tweet

Slide 1

Slide 1 text

3BJMTͰ೔ใڞ༗ΞϓϦέʔγϣϯΛ 044ͱͯ͠։ൃ͍ͯ͠Δ࿩  3BJMT%FWFMPQFST.FFUVQ મਆ༟ٓʢ!LBNJ@[Iʣ

Slide 2

Slide 2 text

ൃදΛͱ͓ͯ͠ͷ໨ඪ w 3FQPTUͷ։ൃΛͱ͓ͨ͠஌ݟΛ΋ͱʹ
 3FEVY 8FCQBDLFS FUD w 3BJMTΞϓϦͷ։ൃܦݧ͸͋Δ͚Ͳ41"͸ະܦݧͷํΛର৅ʹ w 3BJMTº41"ͷ։ൃࣄྫʹ৮Εͯ΋Β͏͜ͱ 2

Slide 3

Slide 3 text

ࣗݾ঺հ w મਆ༟ٓʢͥʹ͕ΈͻΖ͖ʣ w !LBNJ[I!LBNJ@[I w גࣜձࣾສ༿ٕज़։ൃ෦ w ۽ຊग़਎ʢߴઐɾઐ߈Պ·Ͱʣ‎େֶӃ͔Βઍ༿ʙ౦ژ w ৽ଔ͔Β਺೥ؒ͸8FCαʔϏεͷ6*ઃܭ΍اըͳͲΛ୲౰ w ʙ೥લ͔ΒΤϯδχΞʹΫϥενΣϯδ 3

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

͞·͟·ͳऔΓ૊Έʢൈਮʣ w 3VCZίϛϡχςΟ΁ͷεϙϯαʔυ
 3VCZ,BJHJ 38$ 3BJMT(JSMT FUD w ΧϯϑΝϨϯε΁ͷࢀՃඅࢧԉ
 3VCZ,BJHJ!޿ౡ΋ෛ୲ͳ͘ࢀՃͰ͖ͨ w ։ൃίϯςετ
 ۀ຿࣌ؒ΍ࣾ಺ϦιʔεΛ͔ͭͬͯ։ൃͰ͖ͨ 5

Slide 6

Slide 6 text

໨࣍  3FQPTUͱ͸  3FQPTUͷσʔλϑϩʔ  3BJMT ͱ3FQPTU  ޻෉ͨ͜͠ͱ  ൓ল఺ 6

Slide 7

Slide 7 text

όʔδϣϯ৘ใʢݱࡏʣ w 3FQPTUW  w 3VCZW  w 3VCZPO3BJMTW  w 8FCQBDLFSW  w 3FEVYW  7

Slide 8

Slide 8 text

3FQPTUͱ͸

Slide 9

Slide 9 text

3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU

Slide 10

Slide 10 text

3FQPTUͱ͸ w Φʔϓϯιʔεͷ೔ใڞ༗ΞϓϦέʔγϣϯʢWʣ w .BSLEPXOͰॻ͚ΔʢϦΞϧλΠϜϓϨϏϡʔʣ w ֆจࣈʹΑΔϦΞΫγϣϯػೳ w νϟϯωϧػೳ
 ͱ͋ΔνʔϜͷϝϯόʔ͚ͩͷ౤ߘΛදࣔͰ͖Δ w Α͋͘Δػೳ
 هࣄͷετοΫ 4MBDL࿈ܞ ݖݶ؅ཧ FUD 10

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

࣮૷͍ͨ͠ػೳҰཡ w ίϝϯτػೳ w ௨஌ػೳ w هࣄதͷֆจࣈ΍ϦϓϥΠɺը૾ʹରԠ
 %SBGU+41MVHJOT w ଟݴޠରԠ w ݕࡧػೳ w %FQMPZUP)FSPLV 14

Slide 15

Slide 15 text

3FQPTUͷσʔλϑϩʔ 3FEVY 3BJMTͰ41"Λઃܭ͢ΔࡍͷࢀߟʹMMMMMMMM

Slide 16

Slide 16 text

ᶃ 7JFX͕มԽ͢Δ‎"DUJPO͕࣮ߦ͞ΕΔ ᶄ ඞཁʹԠͯ͡"1*ʹϦΫΤετΛૹΔ ᶅ 3FEVDFSͷఆٛʹ͕ͨͬͯ͠4UPSF಺ͷ4UBUF͕มԽ͢Δ ᶆ ͜ͷ4UBUFΛߪಡ͍ͯ͠Δ7JFX͕ߋ৽͞ΕΔ 16 7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY ᶃ ᶄ ᶅ ᶆ

Slide 17

Slide 17 text

۩ମྫ w ྫɿ֎෦αʔϏε࿈ܞʢ࣮૷͕࠷΋γϯϓϧͩͬͨʣ w આ໌͠΍͍͢Α͏࣮ࡍͷίʔυΛมߋɾলུ͍ͯ͠·͢ 17 app/ controllers/ api/ └─ services_controller.rb javascript/ actions/ └─ servicesActions.js features/ └─ Services.jsx reducers/ └─ services.js

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY

Slide 20

Slide 20 text

w ࿈ܞதͷ֎෦αʔϏεҰཡΛදࣔ͢Δ$POUBJOFS$PNQPOFOU
 هࣄ౤ߘ࣌ͷ௨஌ઌ4MBDLͳͲ w componentDidMount()͔ΒΞΫγϣϯΛ࣮ߦ͍ͯ͠Δ
 3FBDUͷϥΠϑαΠΫϧ 20 import * as servicesActions from '../actions/servicesActions' class Services extends Component { componentDidMount() { this.props.fetchServices() } } function mapDispatchToProps(dispatch) { return bindActionCreators(servicesActions, dispatch) } BQQKBWBTDSJQUGFBUVSFT4FSWJDFTKTY

Slide 21

Slide 21 text

7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY

Slide 22

Slide 22 text

w 7JFX͔Βݺ͹ΕΔ"DUJPO w ࣍ͷΑ͏ͳܗͰ"1*ʹର͢ΔϦΫΤετΛఆٛ w )551ΫϥΠΞϯτ༻ͷϛυϧ΢ΣΞΛಋೖ͍ͯ͠Δ
 SFEVYBYJPTNJEEMFXBSF 22 export function fetchServices() { return { type: 'FETCH_SERVICES', payload: { request: { url: '/api/services.json' } } } } BQQKBWBTDSJQUBDUJPOTTFSWJDFT"DUJPOTKT

Slide 23

Slide 23 text

7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY

Slide 24

Slide 24 text

w "1*͸3BJMTͰ࣮૷͢Δ w ϞσϧΛͱ͓ͯ͠࿈ܞதͷ֎෦αʔϏεҰཡΛऔಘ
 ࿈ܞ਺͸ଟ͘ͳΒͳ͍͜ͱΛ૝ఆͯ͠.allͰऔಘ w +CVJMEFSʹΑΓ7JFX͕ඞཁͱ͢Δ৘ใΛ+40/ܗࣜͰฦ͢ 24 class Api::ServicesController < Api::ApplicationController def index @services = Service.all # JbuilderͰJSONΛฦ͢ end end BQQDPOUSPMMFSTBQJTFSWJDFT@DPOUSPMMFSSC

Slide 25

Slide 25 text

7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY

Slide 26

Slide 26 text

w 3FEVDFS͸4UPSFͷ4UBUFͷมԽΛఆٛͨؔ͠਺ w ϦΫΤετ͕੒ޭͨ͠৔߹_SUCCESSͱ͍͏઀ඌ͕͍ࣙͭͨ
 λΠϓ͕ฦ٫͞ΕΔ
 SFEVYBYJPTNJEEMFXBSFͷ;Δ·͍ w "1*ͷϨεϙϯε͕4UBUFʹอ࣋͞ΕΔ
 ͜ͷ৔߹࿈ܞதͷ֎෦αʔϏεҰཡ 26 function services(state = initialState, action) { switch (action.type) { case 'FETCH_SERVICES_SUCCESS': return action.payload.data // ࿈ܞதͷαʔϏεҰཡ default: return state } } BQQKBWBTDSJQUSFEVDFSTTFSWJDFTKT

Slide 27

Slide 27 text

7JFX "DUJPOT %JTQBUDIFS  .JEEMFXBSFT "1* 4UPSF  3FEVDFST 3VCZPO3BJMT 3FEVY

Slide 28

Slide 28 text

w 4UBUFΛ1SPQTʹϚοϓ w 4UBUF͕มԽ͢Δͱίϯϙʔωϯτʹ౉͢ύϥϝʔλ΋มԽ͢Δ
 7JFX͕ߋ৽͞ΕΔ 28 class Services extends Component { render() { return (
) } } function mapStateToProps(state) { return { services: state.services } } BQQKBWBTDSJQUGFBUVSFT4FSWJDFTKTY

Slide 29

Slide 29 text

͜͜·Ͱͷ·ͱΊ w 7JFX‎"DUJPO‎"1*‎3FEVDFS‎7JFX w 'MVYΞʔΩςΫνϟͷ֓೦Λཧղ͢Δඞཁ͕͋Δ
 3FQPTUͰ͍͏ͱ3FEVYͷ࢓૊Έ w σʔλϑϩʔ͕୯ํ޲ͳͷͰઃܭ͠΍͍͢ w "1*͸3BJMTͷࢿ࢈Λ࢖͑Δ 29

Slide 30

Slide 30 text

ʢࢀߟʣ.BTUPEPO IUUQTHJUIVCDPNUPPUTVJUFNBTUPEPO w 3BJMTΞϓϦͰ3FEVY 3FBDUΛ࠾༻ w app/javascriptԼͷߏ੒΍package.json͕ࢀߟʹͳΔ ˞ 41"Ͱ͸ͳ͍ 30

Slide 31

Slide 31 text

3BJMT ͱ3FQPTU

Slide 32

Slide 32 text

8FCQBDLFS w +BWB4DSJQUΞϓϦέʔγϣϯΛ3BJMTͰ؅ཧ͢ΔͨΊͷ
 8FCQBDLΛ༻͍ͨπʔϧ w 3FQPTU͸"1*Λ3BJMTɺϑϩϯτΤϯυΛ3FEVY 3FBDU w Ͳ͏΍ͬͯ͜ͷ؀ڥΛߏங͢Δ͔ ‎3BJMTͰಋೖ͞Εͨ8FCQBDLFS΍:BSOʹΑΓγϯϓϧʹ࿈ܞͰ͖Δ 32

Slide 33

Slide 33 text

w rails new͢Δͱ͖ʹ--webpack=reactΦϓγϣϯΛ͚ͭΔ
 webpacker:install΍yarn install͕૸Δ w ͜ͷ࣌఺Ͱ3FBDUͷͻͳܗ͕Ͱ͖͍ͯΔ w ඞཁʹԠͯ͡reduxͳͲͷϥΠϒϥϦΛΠϯετʔϧ͢Δ
 yarn addͰΠϯετʔϧ w ։ൃ࣌͸webpack-dev-serverΛ࣮ߦ͢Δ
 ίʔυมߋ࣌ʹ)PU.PEVMF3FQMBDFNFOUͯ͘͠ΕΔ 33 $ rails new foo --webpack=react $ bin/yarn add redux react-redux react-router-redux ... $ bin/webpack-dev-server

Slide 34

Slide 34 text

w &4ΛτϥϯεύΠϧ͢ΔͨΊͷ#BCFMͷઃఆ΋͋Δ w ܥ͸ଟ͘ͷઃఆ͕ϥΠϒϥϦଆʹٵऩ͞Εͨ ‎ΞϓϦέʔγϣϯଆͷઃఆΛγϯϓϧʹอͯΔ w 3FQPTUͷ8FCQBDLFS͸·ͩܥ
 ΧελϚΠζΛ͍ͯ͠Δ͜ͱ΋͋ΓઃఆϑΝΠϧ͕ଟ͍ 34

Slide 35

Slide 35 text

w 8FCQBDLFSͰϏϧυͨ͠ϑΝΠϧΛ
 8FCQBDLFSͷjavascript_pack_tagΛͱ͓ͯ͠ಡΉ w ݟͨ໨͸͢΂ͯ+BWB4DSJQU 35 Repost <%= stylesheet_pack_tag 'application' %> <%= javascript_pack_tag 'application' %> BQQWJFXTMBZPVUTBQQMJDBUJPOIUNMFSC

Slide 36

Slide 36 text

:BSO w +BWB4DSJQUͷύοέʔδ؅ཧπʔϧ w 3BJMT͔Β:BSOΛαϙʔτ w ύοέʔδͷґଘ؅ཧɺΠϯετʔϧͷߴ଎ԽɺηΩϡΞԽͳͲ
 OQNͱͷൺֱ w ௚઀ؔΘΔΠϯλϑΣʔε͸installaddremove͘Β͍ ‎8FCQBDLFSͱ:BSOʹΑΓ+BWB4DSJQUͷΤίγεςϜΛ
 ಋೖ͢Δͷ͕ͱͯ΋؆୯ʹͳͬͨʢ3FEVYͳͲʣ 36

Slide 37

Slide 37 text

"DUJPO%JTQBUDI4ZTUFN5FTU$BTF w 3BJMT͔Βఏڙ͞Εͨɺ&&ςετΛ࣮ߦ͢ΔͨΊͷΫϥε w ಺෦Ͱ$BQZCBSB%4-ͳͲΛΠϯΫϧʔυ w τϥϯβΫγϣϯ؅ཧΛͯ͘͠ΕΔ ‎σʔλϕʔεͷΫϦΞͳͲͷઃఆ͕ෆཁ w 3BJMTͷϨʔϧʹ৐ͬͨ··
 +BWB4DSJQUΛؚΜͩϖʔδͷ&&ςετ·Ͱॻ͚Δ ‎3BJMTͰͷ41"։ൃ͕ΑΓεϜʔζʹ 37

Slide 38

Slide 38 text

ʢࢀߟʣ.JOJUFTU3FUSZ IUUQTHJUIVCDPNZZBHJNJOJUFTUSFUSZ w &&ςετ͕$*্Ͱͨ·ʹམͪΔʢ3FCVJME͢Δͱύε͢Δʜʜʣ ‎ೝূʹ༻͍Δ৘ใΛϩʔΧϧετϨʔδʹ֨ೲ͍ͯ͠Δ w ςετέʔε͕ࣦഊͨ͠ͱ͖ʹࢦఆճ਺ϦτϥΠͯ͘͠ΕΔ w 3FQPTUͷςετ͸.JOJUFTU w ͜ͷϥΠϒϥϦͷ͓͔͛Ͱ҆ఆͨ͠ ‎ࠜຊతͳղܾΛ͍ͨ͠ 38

Slide 39

Slide 39 text

޻෉ͨ͜͠ͱ

Slide 40

Slide 40 text

ςετΛॻ͘ର৅ w ࣍ͷςετΛ͔ͬ͠Γॻ͍ͨ w 3BJMTͷϢχοτςετʢϞσϧ"1*ʣ w &&ςετ w +BWB4DSJQUͷϢχοτςετ͸ॻ͔ͳ͔ͬͨ ‎3FEVY͸4UBUFΛ؅ཧ͢ΔίϯςφҎ֎͸७ؔ਺ςετ͠΍͍͢ ‎Ћ൛ͳͷͰ6*Λࢼߦࡨޡ͍ͨ͠‎&&ςετͰ໢ཏ 40

Slide 41

Slide 41 text

w ςετΛॻ͘ͱେ෯ͳϦϑΝΫλϦϯάΛ҆৺ͯ͠Ͱ͖Δ ‎+BWB4DSJQUͷߏ੒ɺ3FEVDFSͷઃܭͳͲͷ஌ݟ͕ͳ͔ͬͨ ‎ࢼߦࡨޡ͕ඞཁͳͱ͜Ζ͸ϦϑΝΫλϦϯά͕ଟ͘ͳΔ ‎ςετΛ͔ͬ͠Γॻ͍͓ͯ͘ͱΑͦ͞͏ʁͱߟ͑ͨ w ͨͱ͑͹͜ΜͳϦϑΝΫλϦϯάΛͯ͠΋;Δ·͍͕อূ͞ΕΔ
 
 
 
 41

Slide 42

Slide 42 text

4QSPDLFUT͸࡟আͨ͠ w ͦΕͧΕͷ୲౰ൣғ w 8FCQBDLFS+BWB4DSJQUΞϓϦέʔγϣϯΛ؅ཧ w 4QSPDLFUT3BJMTͷίϯτϩʔϥϏϡʔ͝ͱͷΞηοτΛ؅ཧ
 ‎"TTFU1JQFMJOFͰ࿈݁ w 3FQPTU͸41"ͳͷͰ4QSPDLFUT͸ඞཁͳ͔ͬͨ w ΞϓϦέʔγϣϯͷੑ࣭ʹԠͯ͡બ୒͋Δ͍͸૊Έ߹ΘͤΔ
 ྫɿ3FEVYͱ3BJMTͷϏϡʔ͕ڞଘ͢ΔՄೳੑ΋͋Δ 42

Slide 43

Slide 43 text

ηοτΞοϓΛָʹ͢Δ w bin/setup bin/updateΛϝϯςφϯε͢Δ w େ஥͞Μʢ!POLʣͷεϥΠυͰ஌ͬͨ w ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ։ൃ
 IUUQTXXXTMJEFTIBSFOFUUBLBGVNJPOBLBSBJMT w git clone/pullͨ͠ޙʹ͜ΕΛୟ͚ͩ͘Ͱ͢΂ͯͷ४උ͕੔͏ 43

Slide 44

Slide 44 text

w 3FQPTU͸044 w ίϯτϦϏϡʔτͷҙࢥΛ΋ͬͨਓ͕͙͢ʹ։ൃΛ͸͡ΊΒΕΔ
 ؀ڥΛఏڙ͢Δ͜ͱ͕ॏཁͩͱߟ͑ͨ 44

Slide 45

Slide 45 text

w ؔ࿈͢Δ13Λཱͯͨ
 IUUQTHJUIVCDPNSBJMTSBJMTQVMM w BTTJHOFF͕!EIIͳͷͰݫͦ͠͏ʜʜ
 
 
 
 
 
 
 45

Slide 46

Slide 46 text

൓ল఺

Slide 47

Slide 47 text

Ϟʔμϧ͸৻ॏʹಋೖ͢Δ w 4UBUFͷ؅ཧͰ࣮૷͕ෳࡶʹͳΔ
 ྫɿϑΥʔϜɺλϒ w &&ςετ͕ॻ͖ͮΒ͍ɾ஗͘ͳΔ
 ྫɿϞʔμϧΛ։͘ɺͱ͍͏ΞΫγϣϯ͕ඞཁʹͳΔ w Ϟʔμϧͩͱ࢖͍ͮΒ͍έʔε΋͋Δ
 ྫɿด͡Δɺͱ͍͏ΞΫγϣϯ͕ඞཁ 47

Slide 48

Slide 48 text

w ࠷ॳ͸ઃఆؔ࿈Λ͢΂ͯϞʔμϧͰ࣮૷͍ͯͨ͠ ‎్தͰ͢΂ͯॻ͖௚ͨ͠ ‎ςετΛ͔ͬ͠Γॻ͍͓ͯ͘ͱॻ͖௚͠΋҆৺ͯ͠Ͱ͖Δ w ͦͷػೳ͕ຊ౰ʹϞʔμϧͰͳ͚Ε͹ͳΒͳ͍͔ߟ͑Δ 48

Slide 49

Slide 49 text

3BJMTͷࢿ࢈Λ׆༻͢Δ w ࢿ࢈ɿ5VSCPMJOLT΍'PSN)FMQFSͳͲ w 3FQPTUͷߏ੒͸3FEVY 3FBDUͰ41"ʢษڧͷͨΊʣ w ઃఆը໘ͳͲɺ࣮૷޻਺͸͔͔Δ͕࢖༻ස౓͕௿͍ػೳ΋ଟ͍
 ΋ͪΖΜ։ൃऀͷεΩϧʹΑΔ 49

Slide 50

Slide 50 text

w 5VSCPMJOLT΍'PSN)FMQFSͳͲͷ׆༻Λݕ౼͢Δ ‎هࣄͷҰཡ΍දࣔɺ౤ߘίϯϙʔωϯτ͸3FEVYͰΑͦ͞͏ ‎.BTUPEPO͸ϋΠϒϦουܕʢઃఆͳͲΛ3BJMTଆͰ΍͍ͬͯΔʣ 50

Slide 51

Slide 51 text

༨ஊ

Slide 52

Slide 52 text

Ϟνϕʔγϣϯͷอͪํ

Slide 53

Slide 53 text

w தଜ͞Μʢ!SLBNVSBʣͷεϥΠυ w ݸਓ։ൃͷ΍͍͖ͬͯํ
 IUUQTTQFBLFSEFDLDPNSLBNVSBHFSFOLBJGBGBMTFZBUVUFJLJGBOH w ΤλΒͳ͍ͨΊʹ
 ΤλΒͳ͍ϞνϕʔγϣϯΛอͪଓ͚Δ w ࣗ෼ʹͱͬͯͳʹ͕։ൃͷϞνϕʔγϣϯͳͷ͔Λ
 ݟग़͢͜ͱ͕ॏཁ 53

Slide 54

Slide 54 text

w ࠷৽ͷ3BJMTͷػೳΛࢼ͢৔ͱͯ͠࢖͏ w స৬׆ಈͷͱ͖ʹ໊ࢗ୅ΘΓʹ࢖͏ 54

Slide 55

Slide 55 text

w ࢲͷ৔߹͸஌తཉٻۦಈ։ൃ w ࣗ෼ֶ͕ͼ͍ٕͨज़Λ࠾༻͢Δ‎͍Βͳ͘ͳͬͨΒফ͢ w ීٴͨ͠ΒελοΫΛબఆ͢Δඞཁ͕͋Δ͕ɺͦΕ·Ͱ͸
 ͭ͘Γ͍ͨΑ͏ʹͭ͘Δ 55

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

w 8FCαʔϏεͱͯ͠ެ։ͨ͠΋ͷ΋͍͔ͭ͋͘Δ w ๏຿΍ܦཧͳͲ͕໘౗‎ٛ຿ײ͕ੜ·Εͨ w 044ͩͱ͕͠ΒΈ͕ͳ͍ 57

Slide 58

Slide 58 text

w Ϟνϕʔγϣϯ͸ਓͦΕͧΕҧ͏ w ࣗ෼ͷϞνϕʔγϣϯ͕ͳʹ͔Λߟ͑ɺͦΕΛ࣠ʹ
 ։ൃ͢ΔͱΑͦ͞͏ w ࠓ΍Γ͍ͨͷ͸5ZQF4DSJQUɺ"DUJWF4UPSBHFͳͲ 58

Slide 59

Slide 59 text

·ͱΊ

Slide 60

Slide 60 text

w 3BJMTͰͷ41"͸3BJMT Ͱ։ൃ͠΍͘͢ͳͬͨ
 8FCQBDLFS :BSO w "DUJPO%JTQBUDI4ZTUFN5FTU$BTFʹΑΓ41"ͷςετ΋
 Ϩʔϧʹ৐ͬͨ··ॻ͚Δ w +BWB4DSJQUͰॻ͔͘ɺ3BJMTͷࢿ࢈Λ׆༻͢Δ͔͸
 ͔ͬ͠Γͱݕ౼͢Δ 60

Slide 61

Slide 61 text

3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU