repost-oss

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

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

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

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

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

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

3FQPTUͱ͸

3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU

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

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

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

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

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

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

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

3FEVY

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

3FEVY

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

3FEVY

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

3FEVY

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

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

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

3BJMT ͱ3FQPTU

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

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

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

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

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

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

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

޻෉ͨ͜͠ͱ

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

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

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

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

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

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

൓ল఺

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

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

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

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

༨ஊ

Ϟνϕʔγϣϯͷอͪํ

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

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

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

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

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

·ͱΊ

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

3FQPTU IUUQTHJUIVCDPNLBNJ[ISFQPTU

repost-oss

repost-oss

More Decks by Hiroki Zenigami

Other Decks in Programming

Featured

Transcript