Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年
Shinichi Nakagawa
October 08, 2018
Programming
3
11k
DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年
#PyLadiesTokyo 4周年記念LT
#DjangoRESTFramework #Vuejs #Nuxtjs #ShoheiOhtani #BarrelZone
Shinichi Nakagawa
October 08, 2018
Tweet
Share
More Decks by Shinichi Nakagawa
See All by Shinichi Nakagawa
shinyorke
0
89
shinyorke
1
380
shinyorke
6
6.1k
shinyorke
0
340
shinyorke
0
1.5k
shinyorke
0
3.6k
shinyorke
1
3.3k
shinyorke
0
220
shinyorke
0
2.9k
Other Decks in Programming
See All in Programming
kulkarniankita09
0
270
borkdude
1
170
hanhan1978
14
3.4k
patorash
0
130
bamboooo
1
110
kamilahsantos
0
130
kalupas226
0
140
manfredsteyer
PRO
0
290
adarapata
1
440
imk2o
0
190
progate
2
480
ykpythemind
0
140
Featured
See All Featured
jonyablonski
21
1.3k
gr2m
83
11k
reverentgeek
167
7.3k
cromwellryan
104
6.3k
malarkey
392
61k
cassininazir
347
20k
jakevdp
776
200k
62gerente
586
200k
holman
462
280k
morganepeng
94
14k
orderedlist
PRO
330
36k
geoffreycrofte
25
1k
Transcript
DjangoͱVue.jsɺͦͯ͠ #SHOWTIME PythonistaͷͨΊͷʮೋྲྀʯߨ࠲ʢదʣ Shinichi NAKAGAWAʢٿΤϯδχΞʣ PyLadies Tokyo - 4पه೦ύʔςΟ 2018/10/8
Who am Iʢ͓લ୭Αʣ • όοΫΤϯυ͔ΒੳɺϑϩϯτΤϯυ ͳͲɺԿྲྀ͔ͯ͠ΔٿΤϯδχΞͰ͢ • Shinichi NAKAGAWA(@shinyorke) •
ʢגʣωΫετϕʔε ٿΤϯδχΞ݉CTO • Pythonࣗ͘͘शࣨʢ#rettypyʣΦʔΨφΠβʔ • Software Design 20189݄߸ʮٿͱITɺϓϩͷݱͷࣄͱʁʯ • #Python #Vuejs #Baseball #SABRmetrics #ڕྉཧ
ٿͰଧͷೋྲྀͱ͍͑ʁ ΫΠζͰ͢Βͳ͍Ͱ͢Ͷʢ͠ʣ
ʲʳେ୩ᠳฏબख • MLBϩαϯθϧεɾΤϯδΣϧεͷख ˞ొ্ͷͰ͢ʢ࣮ࡍ͠ʣ • ࠓγʔζϯͷ • 10ࢼ߹(51 2/3ճ)/4উ2ഊ/3.31/63ୣࡾৼ •
104ࢼ߹(326ଧ)/ଧ.285/22ຊྥଧ/10౪ྥ • ϝδϟʔϦʔάͰ͍ͭͨѪশ͕ʮ#SHOWTIMEʯ
SHOWTIME͞Μͷੌ͞ΛோΊͯΈΔ PyCon JP 2018ʮPythonistaͷબٿ؟ʯͷσϞΛ͍ SHOWTIME͞Μ͜ͱେ୩ᠳฏબखͷੌ͞Λ࠶֬ೝʢσʔλϨΪϡϥʔγʔζϯʣ
ࠨɿଧٿɹӈɿٿ
ࠨɿଧٿɹӈɿٿ
#SHOWTIME ͷੌ͞ͱ • खͱͯ͠ • ٿMax 160 km/hͷେΛίϯελϯτʹ • ՈͷๅεϓϦοτٿ͕ҟৗʹ͍
• ຊਓΕͨ͠ٿ༰ • ଧऀͱͯ͠ • ଧٿ180 km/hΛίϯελϯτʹୟ͖ग़͢ϙςϯγϟϧ ˠMLBͷύϫʔώολʔʢຊྥଧԦΫϥεʣ͕ग़͢Α͏ͳࣈΛ࿈ൃ • ଧٿ্͕֯ΓؾຯʹͳͬͯΔͷ͕ຊྥଧྔ࢈ʹͭͳ͕͍ͬͯΔ • ຊਓΕͨ͠ύϫʔώολʔ • खͱͯ͠ʮճస࣠ʢճసͰͳ͍ʣʯɺଧऀͱͯ͠ʮόϨϧκʔϯʯʹண͢Δͱ໘ന͍ ˠBaseball GeeksʢϕʔεϘʔϧΪʔΫεʣʯ͍ͬͯ͏αΠτΛΈͯͶʢએʣ
PythonistaʹΦεεϝͷೋྲྀ • Django REST FrameworkͰόοΫΤϯυ • Vue.jsͰSPAʢSingle Page Applicationʣ ˞ࠓճNuxt.jsʢVue.jsͷFrameworkʣͰ࡞
• طʹWeb͞ΜͷਓɺσʔλαΠΤϯεͷਓʢࢤ ऀؚΉʣɺ࠷ॳWebͰϑϩϯτͱόοΫΤϯ υΛΕΔ΄͏͕৭ʑͱḿΔͷͰΦεεϝͰ͢
ઌ΄ͲͷσϞͷશମ૾
ઌ΄ͲͷσϞͷશମ૾ ࠓͷͷൣғ
ઌ΄ͲͷσϞͷશମ૾ ࠓͷͷൣғ ͋ͬ
#PyLadiesTokyo 4प͓ΊͰͱ͏͍͟͝·͢ʂ ਏ͍Ͱ͢…͡Όͳͯ͘خ͍͠Ͱ͢ʢదʣ ※ਏ͍μʔͱޢຎߦؔ͋Γ·ͤΜ
Django REST Framework
RESTͰचͭͳ͗ʢHATEOASʣ • σʔλଧܸɾٿผʑʹ͍ͨ͠ • APIผʑʹ͢Δˠ͜ΕͬͯࡶʹͳΒͳ͍ʁʢؒҧ͍ͳ͘ࡶʹͳΔʣ • ʮ࣍ͷߦಈɾϦιʔεΛࣔ͢ʯઃܭͱͯ͠ɺ HATEOASͱ͍͏ߟ͑ํ͕͋Δˠ͜ΕͰղܾͦ͠͏ https://www.django-rest-framework.org/topics/rest-hypermedia-hateoas/ •
HATEOASΛDjango REST FrameworkͰ࣮ ˠHyperlinkedIdentityFieldౕͬͯΛserializerͰ͏ • ͨͩ͠ɺURLͷෳύϥϝʔλʹରԠͯ͠ͳ͍ͷͰɺࣗલͰ࡞Δඞཁ͋Γ ˠ https://github.com/encode/django-rest-framework/issues/1024 • ԿAPIݺͿ͜ͱʹͳΔͷͰ߹ΘͤͯCACHEઓཱུͯΔ ˠ۩ମతʹAPIଆͰΩϟογϡػߏΛ࣮ɺRedisαʔόʔཱͯͨ
ઌ΄ͲͷSPAཪͷAPI ٿͷσʔλ
ઌ΄ͲͷSPAཪͷAPI ٿͷσʔλ ଧٿͷσʔλ
ίʔυ্͜Μͳײ͡ʢงғؾʣ
ίʔυ্͜Μͳײ͡ʢงғؾʣ ͜ΕࣗͰॻ͘
ίʔυ্͜Μͳײ͡ʢงғؾʣ ※ࣄ্࣮ɺOhtani-Sanઐ༻serializerʹwww ͜ΕࣗͰॻ͘ class OhtaniSanSerializer
Vue.jsʢNuxt.jsʣ
REST͔ΒσʔλΛऔಘ͢Δ • JavaScriptͷPromiseʢඇಉظॲཧʣ ͷΈΛ্ख͘͏ • ࣮axiosͱ͍͏ఆ൪ϥΠϒϥϦ͕Φεεϝ • Vue.jsͷmethodsʹऔಘ༻function ΛඇಉظͰ࡞ͬͯ͋͛Δ
Vue.js͔Βचͭͳ͗ʢྫʣ <script> import axios from 'axios' const HTTP_HEADER = {headers:
{'Content-Type': 'application/json'}} export default { name: "player-search", data() { return { // লུ } }, methods: { search: async function (url) { const response = await axios.get(url, HTTP_HEADER) if (response.status !== 200) { console.error('Τϥʔ࣌ͷॲཧ') process.exit() } const body = response.data this.getBatterSumallyMonth(body.url_batter_summary_month) }, getBatterSumallyMonth: async function (url) { const response = await axios.get(url, HTTP_HEADER) if (response.status !== 200) { console.error('Τϥʔ࣌ͷॲཧ') process.exit() } const body = response.data // TODO σʔλΛຒΊࠐΉ }, // TODO ଓ͘ } </script>
·ͱΊ • ϑϩϯτΤϯυͱόοΫΤϯυͰೋྲྀ͢ΔͳΒHATEOASڧ͍ • HATEOASDjango REST FrameworkͰ͍͍ײ͡ʹ࡞ΕΔ ʢͨͩͪ͠ΐͬͱบ͋Δʣ • ↑ͷࢥPyCon
JP 2018ͷ@c_bata_͞ΜൃදͰֶΜͩ ʢ͋Γ͕ͱ͏͍͟͝·͢ʂʣ https://www.slideshare.net/c-bata/django-rest-framework-api-pycon-jp-2018- 114941317 • ͍͖ͳΓSPA͡Όͳͯ͘ɺϑϩϯτͱόοΫΤϯυೋྲྀͰ͖Δͱ͍͍Αʂ • Pythonʮ͚ͩʯ͡Όͳͯ͘JavaScriptΑΖ͘͠Ͷʂ
ήʔϜηοτ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ·͢·͢ͷ͝ൃలΛʂ Shinichi Nakagawa(Twitter/Facebook/etc… @shinyorke)