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で二刀流しよう #PyL...
Search
Shinichi Nakagawa
PRO
October 08, 2018
Programming
3
15k
DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年
#PyLadiesTokyo 4周年記念LT
#DjangoRESTFramework #Vuejs #Nuxtjs #ShoheiOhtani #BarrelZone
Shinichi Nakagawa
PRO
October 08, 2018
Tweet
Share
More Decks by Shinichi Nakagawa
See All by Shinichi Nakagawa
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
410
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
PRO
2
3k
Terraform, GitHub Actions, Cloud Buildでデータ基盤をProvisioningする / Data Platform provisioning for Google Cloud and Terraform
shinyorke
PRO
2
3.2k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
PRO
9
4k
自らを強いエンジニアにするための3つの習慣 / I need to be myself, I can't be no one else
shinyorke
PRO
82
85k
阪神タイガース優勝のひみつ - Pythonでシュッと調べた件 / SABRmetrics for Python
shinyorke
PRO
1
1.4k
Pythonとクラウドと野球の推し活. / Baseball Data Platform for Python and Google Cloud
shinyorke
PRO
2
2.9k
月額コーヒー3.34杯分のコストでオオタニサンの活躍を見守るデータ基盤のはなし / Pyhack Con
shinyorke
PRO
2
520
俺のDXを実現するためのサーバレスなデータ基盤開発と運用 / Serverless Data Platform and Baseball
shinyorke
PRO
5
12k
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
32k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
VS Code Update for GitHub Copilot
74th
1
480
GoのGenericsによるslice操作との付き合い方
syumai
3
700
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
640
エラーって何種類あるの?
kajitack
5
320
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
330
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Rails Girls Zürich Keynote
gr2m
94
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
A better future with KSS
kneath
239
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Producing Creativity
orderedlist
PRO
346
40k
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)