repost-oss

Transcript

1. 3BJMTͰ೔ใڞ༗ΞϓϦέʔγϣϯΛ 044ͱͯ͠։ൃ͍ͯ͠Δ࿩ 
   3BJMT
   %FWFMPQFST
   .FFUVQ
   
   મਆ
   ༟ٓʢ!LBNJ@[Iʣ
2. ൃදΛͱ͓ͯ͠ͷ໨ඪ w 3FQPTUͷ։ൃΛͱ͓ͨ͠஌ݟ
   Λ΋ͱʹ
 3FEVY
   8FCQBDLFS
   FUD
   w 3BJMTΞϓϦͷ։ൃܦݧ͸͋Δ͚Ͳ41"͸ະܦݧͷํ
   Λର৅ʹ
   w 3BJMT
   º
   41"ͷ։ൃࣄྫ
   ʹ৮Εͯ΋Β͏͜ͱ 2
3. ࣗݾ঺հ w મਆ
   ༟ٓʢͥʹ͕Έ
   ͻΖ͖ʣ
   w
   
   
   
   
   !LBNJ[I
   
   
   
   
   
   !LBNJ@[I
   w גࣜձࣾສ༿
   ٕज़։ൃ෦
   w ۽ຊग़਎ʢߴઐɾઐ߈Պ·Ͱʣ
   ‎
   େֶӃ͔Βઍ༿ʙ౦ژ
   w ৽ଔ͔Β਺೥ؒ͸8FCαʔϏεͷ6*ઃܭ΍اըͳͲΛ୲౰
   w ʙ೥લ͔ΒΤϯδχΞʹΫϥενΣϯδ 3
5. ͞·͟·ͳऔΓ૊Έʢൈਮʣ w 3VCZίϛϡχςΟ΁ͷεϙϯαʔυ
 3VCZ,BJHJ
   38$
   3BJMT(JSMT
   FUD
   w ΧϯϑΝϨϯε΁ͷࢀՃඅࢧԉ
 3VCZ,BJHJ!޿ౡ΋ෛ୲
   
   ͳ͘ࢀՃͰ͖ͨ
   
   w ։ൃίϯςετ
 ۀ຿࣌ؒ΍ࣾ಺ϦιʔεΛ͔ͭͬͯ։ൃͰ͖ͨ 5
6. ໨࣍  3FQPTUͱ͸
    3FQPTUͷσʔλϑϩʔ
    3BJMT
    ͱ3FQPTU
    ޻෉ͨ͜͠ͱ
    ൓ল఺ 6
7. όʔδϣϯ৘ใʢݱࡏʣ w 3FQPTU
   W
   
   w 3VCZ
   W
   
   w 3VCZ
   PO
   3BJMT
   W
   
   w 8FCQBDLFS
   W
   
   w 3FEVY
   W
    7
8. 
   3FQPTUͱ͸
9. 3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU
10. 3FQPTUͱ͸ w Φʔϓϯιʔεͷ೔ใڞ༗ΞϓϦέʔγϣϯʢWʣ
    w .BSLEPXOͰॻ͚ΔʢϦΞϧλΠϜϓϨϏϡʔʣ
    w ֆจࣈʹΑΔϦΞΫγϣϯػೳ
    w νϟϯωϧػೳ
 ͱ͋ΔνʔϜͷϝϯόʔ͚ͩͷ౤ߘΛදࣔͰ͖Δ
    w Α͋͘Δػೳ
 هࣄͷετοΫ
    4MBDL࿈ܞ
    ݖݶ؅ཧ
    FUD 10
14. ࣮૷͍ͨ͠ػೳҰཡ w ίϝϯτػೳ
    w ௨஌ػೳ
    w هࣄதͷֆจࣈ
    
    ΍ϦϓϥΠɺը૾ʹରԠ
 %SBGU+4
    1MVHJOT
    w ଟݴޠରԠ
    w ݕࡧػೳ
    w %FQMPZ
    UP
    )FSPLV 14
15. 3FQPTUͷσʔλϑϩʔ
    3FEVY 3BJMTͰ41"Λઃܭ͢ΔࡍͷࢀߟʹMMMMMMMM
16. ᶃ 7JFX͕มԽ͢Δ
    ‎
    "DUJPO͕࣮ߦ͞ΕΔ
    ᶄ ඞཁʹԠͯ͡"1*ʹϦΫΤετΛૹΔ
    ᶅ 3FEVDFSͷఆٛʹ͕ͨͬͯ͠4UPSF಺ͷ4UBUF͕มԽ͢Δ
    ᶆ ͜ͷ4UBUFΛߪಡ͍ͯ͠Δ7JFX͕ߋ৽͞ΕΔ 16 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY ᶃ ᶄ ᶅ ᶆ
17. ۩ମྫ
    w ྫɿ֎෦αʔϏε࿈ܞʢ࣮૷͕࠷΋γϯϓϧͩͬͨʣ
    w આ໌͠΍͍͢Α͏࣮ࡍͷίʔυΛมߋɾলུ͍ͯ͠·͢ 17 app/ controllers/ api/ └─ services_controller.rb javascript/ actions/ └─ servicesActions.js features/ └─ Services.jsx reducers/ └─ services.js
19. 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY
20. 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
21. 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY
22. w 7JFX͔Βݺ͹ΕΔ"DUJPO
    w ࣍ͷΑ͏ͳܗͰ"1*ʹର͢ΔϦΫΤετΛఆٛ
    w )551ΫϥΠΞϯτ༻ͷϛυϧ΢ΣΞΛಋೖ͍ͯ͠Δ
 SFEVYBYJPTNJEEMFXBSF 22 export function fetchServices() { return { type: 'FETCH_SERVICES', payload: { request: { url: '/api/services.json' } } } } BQQKBWBTDSJQUBDUJPOTTFSWJDFT"DUJPOTKT
23. 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY
24. 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
25. 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY
26. 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
27. 7JFX "DUJPOT %JTQBUDIFS
    .JEEMFXBSFT "1* 4UPSF
    3FEVDFST 3VCZ
    PO
    3BJMT 3FEVY
28. w 4UBUFΛ1SPQTʹϚοϓ
    w 4UBUF͕มԽ͢Δͱίϯϙʔωϯτʹ౉͢ύϥϝʔλ΋มԽ͢Δ
 7JFX͕ߋ৽͞ΕΔ 28 class Services extends Component { render() { return ( <div> <ServiceList services={this.props.services} /> </div> ) } } function mapStateToProps(state) { return { services: state.services } } BQQKBWBTDSJQUGFBUVSFT4FSWJDFTKTY
29. ͜͜·Ͱͷ·ͱΊ w 7JFX
    ‎
    "DUJPO
    ‎
    "1*
    ‎
    3FEVDFS
    ‎
    7JFX
    w 'MVYΞʔΩςΫνϟͷ֓೦Λཧղ͢Δඞཁ͕͋Δ
 3FQPTUͰ͍͏ͱ3FEVYͷ࢓૊Έ
    w σʔλϑϩʔ͕୯ํ޲ͳͷͰઃܭ͠΍͍͢
    w "1*͸3BJMTͷࢿ࢈
    
    Λ࢖͑Δ 29
30. ʢࢀߟʣ.BTUPEPO
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    IUUQTHJUIVCDPNUPPUTVJUFNBTUPEPO w 3BJMTΞϓϦͰ3FEVY 3FBDUΛ࠾༻
    w app/javascript
    Լͷߏ੒΍
    package.json
    ͕ࢀߟʹͳΔ
    ˞ 41"Ͱ͸ͳ͍ 30
31. 3BJMT
     ͱ3FQPTU
32. 8FCQBDLFS w +BWB4DSJQUΞϓϦέʔγϣϯΛ3BJMTͰ؅ཧ͢ΔͨΊͷ
 8FCQBDLΛ༻͍ͨπʔϧ
    w 3FQPTU͸"1*Λ3BJMTɺϑϩϯτΤϯυΛ3FEVY 3FBDU
    w Ͳ͏΍ͬͯ͜ͷ؀ڥΛߏங͢Δ͔
    ‎
    3BJMT
    Ͱಋೖ͞Εͨ8FCQBDLFS΍:BSOʹΑΓγϯϓϧʹ࿈ܞͰ͖Δ 32
33. w rails new
    ͢Δͱ͖ʹ
    --webpack=react
    ΦϓγϣϯΛ͚ͭΔ
 webpacker:install
    ΍
    yarn install
    ͕૸Δ
    w ͜ͷ࣌఺Ͱ3FBDUͷͻͳܗ͕Ͱ͖͍ͯΔ
    w ඞཁʹԠͯ͡
    redux
    ͳͲͷϥΠϒϥϦΛΠϯετʔϧ͢Δ
 yarn add
    ͰΠϯετʔϧ
    w ։ൃ࣌͸
    webpack-dev-server
    Λ࣮ߦ͢Δ
 ίʔυมߋ࣌ʹ)PU
    .PEVMF
    3FQMBDFNFOUͯ͘͠ΕΔ 33 $ rails new foo --webpack=react $ bin/yarn add redux react-redux react-router-redux ... $ bin/webpack-dev-server
34. w &4ΛτϥϯεύΠϧ͢ΔͨΊͷ#BCFMͷઃఆ΋͋Δ
    w ܥ͸ଟ͘ͷઃఆ͕ϥΠϒϥϦଆʹٵऩ͞Εͨ
    ‎
    ΞϓϦέʔγϣϯଆͷઃఆΛγϯϓϧʹอͯΔ
    w 3FQPTUͷ8FCQBDLFS͸·ͩܥ
 ΧελϚΠζΛ͍ͯ͠Δ͜ͱ΋͋ΓઃఆϑΝΠϧ͕ଟ͍ 34
35. w 8FCQBDLFSͰϏϧυͨ͠ϑΝΠϧΛ
 8FCQBDLFSͷ
    javascript_pack_tag
    Λͱ͓ͯ͠ಡΉ
    w ݟͨ໨͸͢΂ͯ+BWB4DSJQU 35 <!DOCTYPE html> <html> <head> <title>Repost</title> <%= stylesheet_pack_tag 'application' %> </head> <body> <%= javascript_pack_tag 'application' %> </body> </html> BQQWJFXTMBZPVUTBQQMJDBUJPOIUNMFSC
36. :BSO w +BWB4DSJQUͷύοέʔδ؅ཧπʔϧ
    w 3BJMT
    ͔Β:BSOΛαϙʔτ
    w ύοέʔδͷґଘ؅ཧɺΠϯετʔϧͷߴ଎ԽɺηΩϡΞԽͳͲ
 OQNͱͷൺֱ
    w ௚઀ؔΘΔΠϯλϑΣʔε͸
    install
    
    add
    
    remove
    ͘Β͍
    ‎
    8FCQBDLFSͱ:BSOʹΑΓ+BWB4DSJQUͷΤίγεςϜΛ

    ಋೖ͢Δͷ͕ͱͯ΋؆୯ʹͳͬͨʢ3FEVYͳͲʣ 36
37. "DUJPO%JTQBUDI4ZTUFN5FTU$BTF w 3BJMT
    ͔Βఏڙ͞Εͨɺ&&ςετΛ࣮ߦ͢ΔͨΊͷΫϥε
    w ಺෦Ͱ$BQZCBSB%4-ͳͲΛΠϯΫϧʔυ
    w τϥϯβΫγϣϯ؅ཧΛͯ͘͠ΕΔ
    ‎
    σʔλϕʔεͷΫϦΞͳͲͷઃఆ͕ෆཁ
    w 3BJMTͷϨʔϧʹ৐ͬͨ··
 +BWB4DSJQUΛؚΜͩϖʔδͷ&&ςετ·Ͱॻ͚Δ
    ‎
    3BJMTͰͷ41"։ൃ͕ΑΓεϜʔζʹ 37
38. ʢࢀߟʣ.JOJUFTU3FUSZ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    IUUQTHJUIVCDPNZZBHJNJOJUFTUSFUSZ w &&ςετ͕$*্Ͱͨ·ʹམͪΔʢ3FCVJME͢Δͱύε͢Δʜʜʣ
    ‎
    ೝূʹ༻͍Δ৘ใΛϩʔΧϧετϨʔδʹ֨ೲ͍ͯ͠Δ
    w ςετέʔε͕ࣦഊͨ͠ͱ͖ʹࢦఆճ਺ϦτϥΠͯ͘͠ΕΔ
    w 3FQPTUͷςετ͸.JOJUFTU
    w ͜ͷϥΠϒϥϦͷ͓͔͛Ͱ҆ఆͨ͠
    ‎
    ࠜຊతͳղܾΛ͍ͨ͠ 38
39. ޻෉ͨ͜͠ͱ
40. ςετΛॻ͘ର৅ w ࣍ͷςετΛ͔ͬ͠Γॻ͍ͨ
    w 3BJMTͷϢχοτςετʢϞσϧ"1*ʣ
    w &&ςετ
    w +BWB4DSJQUͷϢχοτςετ͸ॻ͔ͳ͔ͬͨ
    ‎
    3FEVY͸4UBUFΛ؅ཧ͢ΔίϯςφҎ֎͸७ؔ਺ςετ͠΍͍͢
    ‎
    Ћ൛ͳͷͰ6*Λࢼߦࡨޡ͍ͨ͠
    ‎
    &&ςετͰ໢ཏ 40
41. w ςετΛॻ͘ͱେ෯ͳϦϑΝΫλϦϯάΛ҆৺ͯ͠Ͱ͖Δ
    ‎
    +BWB4DSJQUͷߏ੒ɺ3FEVDFSͷઃܭͳͲͷ஌ݟ͕ͳ͔ͬͨ
    ‎
    ࢼߦࡨޡ͕ඞཁͳͱ͜Ζ͸ϦϑΝΫλϦϯά͕ଟ͘ͳΔ
    ‎
    ςετΛ͔ͬ͠Γॻ͍͓ͯ͘ͱΑͦ͞͏ʁ
    
    ͱߟ͑ͨ
    w ͨͱ͑͹͜ΜͳϦϑΝΫλϦϯάΛͯ͠΋;Δ·͍͕อূ͞ΕΔ
 
 
 
 41
42. 4QSPDLFUT͸࡟আͨ͠ w ͦΕͧΕͷ୲౰ൣғ
    w 8FCQBDLFS
    +BWB4DSJQUΞϓϦέʔγϣϯΛ؅ཧ
    w 4QSPDLFUT
    3BJMTͷίϯτϩʔϥϏϡʔ͝ͱͷΞηοτΛ؅ཧ

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ‎
    "TTFU
    1JQFMJOFͰ࿈݁
    w 3FQPTU͸41"ͳͷͰ4QSPDLFUT͸ඞཁͳ͔ͬͨ
    w ΞϓϦέʔγϣϯͷੑ࣭ʹԠͯ͡બ୒͋Δ͍͸૊Έ߹ΘͤΔ
 ྫɿ3FEVYͱ3BJMTͷϏϡʔ͕ڞଘ͢ΔՄೳੑ΋͋Δ 42
43. ηοτΞοϓΛָʹ͢Δ w bin/setup
    
    bin/update
    Λϝϯςφϯε͢Δ
    w େ஥͞Μʢ!POLʣͷεϥΠυͰ஌ͬͨ
    w ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ։ൃ
 IUUQTXXXTMJEFTIBSFOFUUBLBGVNJPOBLBSBJMT
    w git clone/pull
    ͨ͠ޙʹ͜ΕΛୟ͚ͩ͘Ͱ͢΂ͯͷ४උ͕੔͏ 43
44. w 3FQPTU͸044
    w ίϯτϦϏϡʔτͷҙࢥΛ΋ͬͨਓ͕͙͢ʹ։ൃΛ͸͡ΊΒΕΔ
 ؀ڥΛఏڙ͢Δ͜ͱ͕ॏཁͩͱߟ͑ͨ 44
45. w ؔ࿈͢Δ13Λཱͯͨ
 IUUQTHJUIVCDPNSBJMTSBJMTQVMM
    w BTTJHOFF͕!EIIͳͷͰݫͦ͠͏ʜʜ
 
 
 
 
 
 
 45
46. ൓ল఺
47. Ϟʔμϧ͸৻ॏʹಋೖ͢Δ w 4UBUFͷ؅ཧͰ࣮૷͕ෳࡶʹͳΔ
 ྫɿϑΥʔϜɺλϒ
    w &&ςετ͕ॻ͖ͮΒ͍ɾ஗͘ͳΔ
 ྫɿϞʔμϧΛ։͘ɺͱ͍͏ΞΫγϣϯ͕ඞཁʹͳΔ
    w Ϟʔμϧͩͱ࢖͍ͮΒ͍έʔε΋͋Δ
 ྫɿด͡Δɺͱ͍͏ΞΫγϣϯ͕ඞཁ 47
48. w ࠷ॳ͸ઃఆؔ࿈Λ͢΂ͯϞʔμϧͰ࣮૷͍ͯͨ͠
    ‎
    ్தͰ͢΂ͯॻ͖௚ͨ͠
    ‎
    ςετΛ͔ͬ͠Γॻ͍͓ͯ͘ͱॻ͖௚͠΋҆৺
    
    ͯ͠Ͱ͖Δ
    w ͦͷػೳ͕ຊ౰ʹϞʔμϧͰͳ͚Ε͹ͳΒͳ͍͔ߟ͑Δ 48
49. 3BJMTͷࢿ࢈Λ׆༻͢Δ w ࢿ࢈
    ɿ5VSCPMJOLT΍'PSN)FMQFSͳͲ
    w 3FQPTUͷߏ੒͸3FEVY 3FBDUͰ41"ʢษڧͷͨΊʣ
    w ઃఆը໘ͳͲɺ࣮૷޻਺͸͔͔Δ͕࢖༻ස౓͕௿͍ػೳ΋ଟ͍
 ΋ͪΖΜ։ൃऀͷεΩϧʹΑΔ 49
50. w 5VSCPMJOLT΍'PSN)FMQFSͳͲͷ׆༻Λݕ౼͢Δ
    ‎
    هࣄͷҰཡ΍දࣔɺ౤ߘίϯϙʔωϯτ͸3FEVYͰΑͦ͞͏
    ‎
    .BTUPEPO͸ϋΠϒϦουܕʢઃఆͳͲΛ3BJMTଆͰ΍͍ͬͯΔʣ 50
51. ༨ஊ
52. Ϟνϕʔγϣϯͷอͪํ
53. w தଜ͞Μʢ!SLBNVSBʣͷεϥΠυ
    w ݸਓ։ൃͷ΍͍͖ͬͯํ
 IUUQTTQFBLFSEFDLDPNSLBNVSBHFSFOLBJGBGBMTFZBUVUFJLJGBOH
    w ΤλΒͳ͍ͨΊʹ
 ΤλΒͳ͍
    
    ϞνϕʔγϣϯΛอͪଓ͚Δ
    w ࣗ෼ʹͱͬͯͳʹ͕։ൃͷϞνϕʔγϣϯͳͷ͔Λ
 ݟग़͢͜ͱ͕ॏཁ 53
54. w ࠷৽ͷ3BJMTͷػೳΛࢼ͢৔ͱͯ͠࢖͏
    w స৬׆ಈͷͱ͖ʹ໊ࢗ୅ΘΓʹ࢖͏ 54
55. w ࢲͷ৔߹͸
    ஌తཉٻۦಈ։ൃ
    w ࣗ෼ֶ͕ͼ͍ٕͨज़Λ࠾༻͢Δ
    ‎
    ͍Βͳ͘ͳͬͨΒফ͢
    w ීٴͨ͠ΒελοΫΛબఆ͢Δඞཁ͕͋Δ͕ɺͦΕ·Ͱ͸
 ͭ͘Γ͍ͨΑ͏ʹͭ͘Δ 55
57. w 8FCαʔϏεͱͯ͠ެ։ͨ͠΋ͷ΋͍͔ͭ͋͘Δ
    w ๏຿΍ܦཧͳͲ͕໘౗
    ‎
    ٛ຿ײ͕ੜ·Εͨ
    w 044ͩͱ͕͠ΒΈ͕ͳ͍ 57
58. w Ϟνϕʔγϣϯ͸ਓͦΕͧΕҧ͏
    w ࣗ෼ͷϞνϕʔγϣϯ͕ͳʹ͔Λߟ͑ɺͦΕΛ࣠ʹ
 ։ൃ͢ΔͱΑͦ͞͏
    w ࠓ΍Γ͍ͨͷ͸5ZQF4DSJQUɺ"DUJWF4UPSBHFͳͲ 58
59. ·ͱΊ
60. w 3BJMTͰͷ41"͸3BJMT
     Ͱ։ൃ͠΍͘͢ͳͬͨ
 8FCQBDLFS
    :BSO
    w "DUJPO%JTQBUDI4ZTUFN5FTU$BTFʹΑΓ41"ͷςετ΋
 Ϩʔϧʹ৐ͬͨ··ॻ͚Δ
    w +BWB4DSJQUͰॻ͔͘ɺ3BJMTͷࢿ࢈Λ׆༻͢Δ͔͸
 ͔ͬ͠Γͱݕ౼͢Δ 60
61. 3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU