Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
repost-oss
Hiroki Zenigami
September 28, 2017
Programming
1
800
repost-oss
Hiroki Zenigami
September 28, 2017
Tweet
Share
More Decks by Hiroki Zenigami
See All by Hiroki Zenigami
文章を書く前に決めるべき3つのこと / How to plan document
zenizh
0
180
小さいチームでRailsアプリをつくるならMountable Engineがいいよ、というはなし / Mountable Engine for Small Team
zenizh
0
530
コアバリューをとおしたサービス開発 / Core-Value Driven Development
zenizh
1
320
RailsでOSSのWebアプリケーションを書くための"ことはじめ" / rails-oss-startup-guide
zenizh
2
220
Other Decks in Programming
See All in Programming
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
110
良質な技術記事を量産する秘訣 / #MeetsPro
jnchito
16
4.6k
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
410
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
510
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
250
Step Functions Distributed Map を使ってみた
codemountains
0
110
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
120
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
350
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
jq at the Shortcuts
cockscomb
1
440
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.9k
Featured
See All Featured
Teambox: Starting and Learning
jrom
124
7.9k
In The Pink: A Labor of Love
frogandcode
132
21k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Debugging Ruby Performance
tmm1
67
11k
Design by the Numbers
sachag
271
18k
Writing Fast Ruby
sferik
613
58k
Typedesign – Prime Four
hannesfritz
34
1.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Fireside Chat
paigeccino
16
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Transcript
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
None
͞·͟·ͳऔΓΈʢൈਮʣ 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
None
None
None
࣮͍ͨ͠ػೳҰཡ 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
None
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
7JFX "DUJPOT %JTQBUDIFS .JEEMFXBSFT "1* 4UPSF 3FEVDFST 3VCZPO3BJMT
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
7JFX "DUJPOT %JTQBUDIFS .JEEMFXBSFT "1* 4UPSF 3FEVDFST 3VCZPO3BJMT
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
7JFX "DUJPOT %JTQBUDIFS .JEEMFXBSFT "1* 4UPSF 3FEVDFST 3VCZPO3BJMT
3FEVY
w 3FEVDFS4UPSFͷ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
7JFX "DUJPOT %JTQBUDIFS .JEEMFXBSFT "1* 4UPSF 3FEVDFST 3VCZPO3BJMT
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*3FEVDFS7JFX 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:installyarn 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ͷϢχοτςετॻ͔ͳ͔ͬͨ 3FEVY4UBUFΛཧ͢ΔίϯςφҎ֎७ؔςετ͍͢͠
Ћ൛ͳͷͰ6*Λࢼߦࡨޡ͍ͨ͠&&ςετͰཏ 40
w ςετΛॻ͘ͱେ෯ͳϦϑΝΫλϦϯάΛ҆৺ͯ͠Ͱ͖Δ +BWB4DSJQUͷߏɺ3FEVDFSͷઃܭͳͲͷݟ͕ͳ͔ͬͨ ࢼߦࡨޡ͕ඞཁͳͱ͜ΖϦϑΝΫλϦϯά͕ଟ͘ͳΔ ςετΛ͔ͬ͠Γॻ͍͓ͯ͘ͱΑͦ͞͏ʁͱߟ͑ͨ w ͨͱ͑͜ΜͳϦϑΝΫλϦϯάΛͯ͠;Δ·͍͕อূ͞ΕΔ
41
4QSPDLFUTআͨ͠ w ͦΕͧΕͷ୲ൣғ w 8FCQBDLFS+BWB4DSJQUΞϓϦέʔγϣϯΛཧ w 4QSPDLFUT3BJMTͷίϯτϩʔϥϏϡʔ͝ͱͷΞηοτΛཧ "TTFU1JQFMJOFͰ࿈݁ w 3FQPTU41"ͳͷͰ4QSPDLFUTඞཁͳ͔ͬͨ
w ΞϓϦέʔγϣϯͷੑ࣭ʹԠͯ͡બ͋Δ͍Έ߹ΘͤΔ ྫɿ3FEVYͱ3BJMTͷϏϡʔ͕ڞଘ͢ΔՄೳੑ͋Δ 42
ηοτΞοϓΛָʹ͢Δ w bin/setup bin/updateΛϝϯςφϯε͢Δ w େ͞Μʢ!POLʣͷεϥΠυͰͬͨ w ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ։ൃ IUUQTXXXTMJEFTIBSFOFUUBLBGVNJPOBLBSBJMT w
git clone/pullͨ͠ޙʹ͜ΕΛୟ͚ͩ͘Ͱͯ͢ͷ४උ͕͏ 43
w 3FQPTU044 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
None
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