Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年
Search
Shinichi Nakagawa
October 08, 2018
Programming
3
14k
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
Terraform, GitHub Actions, Cloud Buildでデータ基盤をProvisioningする / Data Platform provisioning for Google Cloud and Terraform
shinyorke
2
2.1k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
8
2.2k
自らを強いエンジニアにするための3つの習慣 / I need to be myself, I can't be no one else
shinyorke
76
53k
阪神タイガース優勝のひみつ - Pythonでシュッと調べた件 / SABRmetrics for Python
shinyorke
1
1k
Pythonとクラウドと野球の推し活. / Baseball Data Platform for Python and Google Cloud
shinyorke
2
2.3k
月額コーヒー3.34杯分のコストでオオタニサンの活躍を見守るデータ基盤のはなし / Pyhack Con
shinyorke
2
390
俺のDXを実現するためのサーバレスなデータ基盤開発と運用 / Serverless Data Platform and Baseball
shinyorke
5
11k
機械学習エンジニアが目指すキャリアパスとその実話 / My Journey to Become a ML Engineer
shinyorke
6
14k
一人でも小さく始められるGoogle Cloudで実現するほぼサーバレスなデータ基盤 / Serverless Dataplatform for Google Cloud
shinyorke
0
450
Other Decks in Programming
See All in Programming
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
18
2.5k
ペパボOpenTelemetry革命
pyama86
2
1.2k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
230
The grand strategy of Ruby Parser
yui_knk
5
330
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
620
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
AppRouter Panel Talk
yosuke_furukawa
PRO
1
530
Good first issues of TypeProf
mame
4
760
CQRS meets modern Java
simas
PRO
2
480
Featured
See All Featured
Practical Orchestrator
shlominoach
183
9.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
For a Future-Friendly Web
brad_frost
172
9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Typedesign – Prime Four
hannesfritz
36
2.1k
How to name files
jennybc
65
94k
Code Review Best Practice
trishagee
56
15k
It's Worth the Effort
3n
180
27k
What the flash - Photography Introduction
edds
64
11k
In The Pink: A Labor of Love
frogandcode
138
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
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)