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

Transcript

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

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

   ʢגʣωΫετϕʔε ໺ٿΤϯδχΞ݉CTO • Python΋͘΋ࣗ͘शࣨʢ#rettypyʣΦʔΨφΠβʔ • Software Design 2018೥9݄߸ʮ໺ٿͱITɺϓϩͷݱ৔ͷ࢓ࣄͱ͸ʁʯ • #Python #Vuejs #Baseball #SABRmetrics #ڕྉཧ

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

4. ʲ౴ʳେ୩ᠳฏબख • MLBϩαϯθϧεɾΤϯδΣϧεͷ౤ख
 ˞ొ࿥্ͷ࿩Ͱ͢ʢ࣮ࡍ͸࡯͠ʣ • ࠓγʔζϯͷ੒੷ • 10ࢼ߹(51 2/3ճ)/4উ2ഊ/๷3.31/63ୣࡾৼ •

   104ࢼ߹(326ଧ਺)/ଧ཰.285/22ຊྥଧ/10౪ྥ • ϝδϟʔϦʔάͰ͍ͭͨѪশ͕ʮ#SHOWTIMEʯ

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

6. ࠨɿଧٿɹӈɿ౤ٿ

7. ࠨɿଧٿɹӈɿ౤ٿ

8. #SHOWTIME ͷੌ͞ͱ܏޲ • ౤खͱͯ͠ • ଎ٿ͸Max 160 km/hͷେ୆Λίϯελϯτʹ • ఻Ոͷๅ౛εϓϦοτ΋ٿ଎͕ҟৗʹ଎͍

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

9. PythonistaʹΦεεϝͷೋ౛ྲྀ • Django REST FrameworkͰόοΫΤϯυ • Vue.jsͰSPAʢSingle Page Applicationʣ
 ˞ࠓճ͸Nuxt.jsʢVue.jsͷFrameworkʣͰ࡞੒

   • طʹWeb԰͞Μͷਓ΋ɺσʔλαΠΤϯεͷਓʢࢤ ๬ऀؚΉʣ΋ɺ࠷ॳ͸WebͰϑϩϯτͱόοΫΤϯ υΛ΍ΕΔ΄͏͕৭ʑͱḿΔͷͰΦεεϝͰ͢

10. ઌ΄ͲͷσϞͷશମ૾

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

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

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

14. Django REST Framework

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

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

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

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

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

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

21. Vue.jsʢNuxt.jsʣ

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

23. 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>

24. ·ͱΊ • ϑϩϯτΤϯυͱόοΫΤϯυͰೋ౛ྲྀ͢ΔͳΒ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΋ΑΖ͘͠Ͷʂ

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