Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyL...

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

#PyLadiesTokyo 4周年記念LT

#DjangoRESTFramework #Vuejs #Nuxtjs #ShoheiOhtani #BarrelZone

Avatar for Shinichi Nakagawa

Shinichi Nakagawa

October 08, 2018
Tweet

More Decks by Shinichi Nakagawa

Other Decks in Programming

Transcript

  1. Who am Iʢ͓લ୭Αʣ • όοΫΤϯυ͔Β෼ੳɺϑϩϯτΤϯυ
 ౳ͳͲɺԿ౛ྲྀ͔ͯ͠Δ໺ٿΤϯδχΞͰ͢ • Shinichi NAKAGAWA(@shinyorke) •

    ʢגʣωΫετϕʔε ໺ٿΤϯδχΞ݉CTO • Python΋͘΋ࣗ͘शࣨʢ#rettypyʣΦʔΨφΠβʔ • Software Design 2018೥9݄߸ʮ໺ٿͱITɺϓϩͷݱ৔ͷ࢓ࣄͱ͸ʁʯ • #Python #Vuejs #Baseball #SABRmetrics #ڕྉཧ
  2. #SHOWTIME ͷੌ͞ͱ܏޲ • ౤खͱͯ͠ • ଎ٿ͸Max 160 km/hͷେ୆Λίϯελϯτʹ • ఻Ոͷๅ౛εϓϦοτ΋ٿ଎͕ҟৗʹ଎͍

    • ೔ຊਓ཭Εͨ͠౤ٿ಺༰ • ଧऀͱͯ͠ • ଧٿ଎౓180 km/h୆Λίϯελϯτʹୟ͖ग़͢ϙςϯγϟϧ
 ˠMLBͷύϫʔώολʔʢຊྥଧԦΫϥεʣ͕ग़͢Α͏ͳ਺ࣈΛ࿈ൃ • ଧٿ֯౓΋্͕ΓؾຯʹͳͬͯΔͷ͕ຊྥଧྔ࢈ʹͭͳ͕͍ͬͯΔ • ೔ຊਓ཭Εͨ͠ύϫʔώολʔ • ౤खͱͯ͠͸ʮճస࣠ʢճస਺Ͱ͸ͳ͍ʣʯɺଧऀͱͯ͠͸ʮόϨϧκʔϯʯʹண໨͢Δͱ໘ന͍
 ˠBaseball GeeksʢϕʔεϘʔϧΪʔΫεʣʯ͍ͬͯ͏αΠτΛΈͯͶʢએ఻ʣ
  3. PythonistaʹΦεεϝͷೋ౛ྲྀ • Django REST FrameworkͰόοΫΤϯυ • Vue.jsͰSPAʢSingle Page Applicationʣ
 ˞ࠓճ͸Nuxt.jsʢVue.jsͷFrameworkʣͰ࡞੒

    • طʹWeb԰͞Μͷਓ΋ɺσʔλαΠΤϯεͷਓʢࢤ ๬ऀؚΉʣ΋ɺ࠷ॳ͸WebͰϑϩϯτͱόοΫΤϯ υΛ΍ΕΔ΄͏͕৭ʑͱḿΔͷͰΦεεϝͰ͢
  4. 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αʔόʔ΋ཱͯͨ
  5. 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>
  6. ·ͱΊ • ϑϩϯτΤϯυͱόοΫΤϯυͰೋ౛ྲྀ͢ΔͳΒ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΋ΑΖ͘͠Ͷʂ