DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年

by Shinichi Nakagawa

Slide 1

Slide 1 text

DjangoͱVue.jsɺͦͯ͠ #SHOWTIME PythonistaͷͨΊͷʮೋ౛ྲྀʯߨ࠲ʢద౰ʣ Shinichi NAKAGAWAʢ໺ٿΤϯδχΞʣ PyLadies Tokyo - 4प೥ه೦ύʔςΟ 2018/10/8

Slide 2

Slide 2 text

Who am Iʢ͓લ୭Αʣ • όοΫΤϯυ͔Β෼ੳɺϑϩϯτΤϯυ  ౳ͳͲɺԿ౛ྲྀ͔ͯ͠Δ໺ٿΤϯδχΞͰ͢ • Shinichi NAKAGAWA(@shinyorke) • ʢגʣωΫετϕʔε ໺ٿΤϯδχΞ݉CTO • Python΋͘΋ࣗ͘शࣨʢ#rettypyʣΦʔΨφΠβʔ • Software Design 2018೥9݄߸ʮ໺ٿͱITɺϓϩͷݱ৔ͷ࢓ࣄͱ͸ʁʯ • #Python #Vuejs #Baseball #SABRmetrics #ڕྉཧ

Slide 3

Slide 3 text

໺ٿͰ౤ଧͷೋ౛ྲྀͱ͍͑͹ʁ ΋͸΍ΫΠζͰ͢Βͳ͍Ͱ͢Ͷʢ࡯͠ʣ

Slide 4

Slide 4 text

ʲ౴ʳେ୩ᠳฏબख • MLBϩαϯθϧεɾΤϯδΣϧεͷ౤ख  ˞ొ࿥্ͷ࿩Ͱ͢ʢ࣮ࡍ͸࡯͠ʣ • ࠓγʔζϯͷ੒੷ • 10ࢼ߹(51 2/3ճ)/4উ2ഊ/๷3.31/63ୣࡾৼ • 104ࢼ߹(326ଧ਺)/ଧ཰.285/22ຊྥଧ/10౪ྥ • ϝδϟʔϦʔάͰ͍ͭͨѪশ͕ʮ#SHOWTIMEʯ

Slide 5

Slide 5 text

SHOWTIME͞Μͷੌ͞ΛோΊͯΈΔ PyCon JP 2018ʮPythonistaͷબٿ؟ʯͷσϞΛ࢖͍  SHOWTIME͞Μ͜ͱେ୩ᠳฏબखͷੌ͞Λ࠶֬ೝʢσʔλ͸ϨΪϡϥʔγʔζϯʣ

Slide 6

Slide 6 text

ࠨɿଧٿɹӈɿ౤ٿ

Slide 7

Slide 7 text

ࠨɿଧٿɹӈɿ౤ٿ

Slide 8

Slide 8 text

#SHOWTIME ͷੌ͞ͱ܏޲ • ౤खͱͯ͠ • ଎ٿ͸Max 160 km/hͷେ୆Λίϯελϯτʹ • ఻Ոͷๅ౛εϓϦοτ΋ٿ଎͕ҟৗʹ଎͍ • ೔ຊਓ཭Εͨ͠౤ٿ಺༰ • ଧऀͱͯ͠ • ଧٿ଎౓180 km/h୆Λίϯελϯτʹୟ͖ग़͢ϙςϯγϟϧ  ˠMLBͷύϫʔώολʔʢຊྥଧԦΫϥεʣ͕ग़͢Α͏ͳ਺ࣈΛ࿈ൃ • ଧٿ֯౓΋্͕ΓؾຯʹͳͬͯΔͷ͕ຊྥଧྔ࢈ʹͭͳ͕͍ͬͯΔ • ೔ຊਓ཭Εͨ͠ύϫʔώολʔ • ౤खͱͯ͠͸ʮճస࣠ʢճస਺Ͱ͸ͳ͍ʣʯɺଧऀͱͯ͠͸ʮόϨϧκʔϯʯʹண໨͢Δͱ໘ന͍  ˠBaseball GeeksʢϕʔεϘʔϧΪʔΫεʣʯ͍ͬͯ͏αΠτΛΈͯͶʢએ఻ʣ

Slide 9

Slide 9 text

PythonistaʹΦεεϝͷೋ౛ྲྀ • Django REST FrameworkͰόοΫΤϯυ • Vue.jsͰSPAʢSingle Page Applicationʣ  ˞ࠓճ͸Nuxt.jsʢVue.jsͷFrameworkʣͰ࡞੒ • طʹWeb԰͞Μͷਓ΋ɺσʔλαΠΤϯεͷਓʢࢤ ๬ऀؚΉʣ΋ɺ࠷ॳ͸WebͰϑϩϯτͱόοΫΤϯ υΛ΍ΕΔ΄͏͕৭ʑͱḿΔͷͰΦεεϝͰ͢

Slide 10

Slide 10 text

ઌ΄ͲͷσϞͷશମ૾

Slide 11

Slide 11 text

ઌ΄ͲͷσϞͷશମ૾ ࠓ೔ͷ࿩ͷൣғ

Slide 12

Slide 12 text

ઌ΄ͲͷσϞͷશମ૾ ࠓ೔ͷ࿩ͷൣғ ͋ͬ

Slide 13

Slide 13 text

#PyLadiesTokyo 4प೥͓ΊͰͱ͏͍͟͝·͢ʂ ਏ͍Ͱ͢…͡Όͳͯ͘خ͍͠Ͱ͢ʢద౰ʣ ※ਏ͍μʔͱޢຎߦ͸ؔ܎͋Γ·ͤΜ

Slide 14

Slide 14 text

Django REST Framework

Slide 15

Slide 15 text

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αʔόʔ΋ཱͯͨ

Slide 16

Slide 16 text

ઌ΄ͲͷSPAཪͷAPI ౤ٿͷσʔλ

Slide 17

Slide 17 text

ઌ΄ͲͷSPAཪͷAPI ౤ٿͷσʔλ ଧٿͷσʔλ

Slide 18

Slide 18 text

ίʔυ্͸͜Μͳײ͡ʢงғؾʣ

Slide 19

Slide 19 text

ίʔυ্͸͜Μͳײ͡ʢงғؾʣ ͜Ε͸ࣗ෼Ͱॻ͘

Slide 20

Slide 20 text

ίʔυ্͸͜Μͳײ͡ʢงғؾʣ ※ࣄ্࣮ɺOhtani-Sanઐ༻serializerʹwww ͜Ε͸ࣗ෼Ͱॻ͘ class OhtaniSanSerializer

Slide 21

Slide 21 text

Vue.jsʢNuxt.jsʣ

Slide 22

Slide 22 text

REST͔ΒσʔλΛऔಘ͢Δ • JavaScriptͷPromiseʢඇಉظॲཧʣ  ͷ࢓૊ΈΛ্ख͘࢖͏ • ࣮૷͸axiosͱ͍͏ఆ൪ϥΠϒϥϦ͕Φεεϝ • Vue.jsͷmethodsʹऔಘ༻function  ΛඇಉظͰ࡞ͬͯ͋͛Δ

Slide 23

Slide 23 text

Vue.js͔Β਺चͭͳ͗ʢྫʣ 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 ଓ͘ }

Slide 24

Slide 24 text

·ͱΊ • ϑϩϯτΤϯυͱόοΫΤϯυͰೋ౛ྲྀ͢ΔͳΒHATEOAS͸ڧ͍ • HATEOAS͸Django REST FrameworkͰ͍͍ײ͡ʹ࡞ΕΔ  ʢͨͩͪ͠ΐͬͱบ͋Δʣ • ↑ͷࢥ૝͸PyCon JP 2018ͷ@c_bata_͞ΜൃදͰֶΜͩ  ʢ͋Γ͕ͱ͏͍͟͝·͢ʂʣ  https://www.slideshare.net/c-bata/django-rest-framework-api-pycon-jp-2018- 114941317 • ͍͖ͳΓSPA͡Όͳͯ͘΋ɺϑϩϯτͱόοΫΤϯυೋ౛ྲྀͰ͖Δͱ͍͍Αʂ • Pythonʮ͚ͩʯ͡Όͳͯ͘JavaScript΋ΑΖ͘͠Ͷʂ

Slide 25

Slide 25 text

ήʔϜηοτ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ·͢·͢ͷ͝ൃలΛʂ Shinichi Nakagawa(Twitter/Facebook/etc… @shinyorke)