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
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
PRO
2
2.2k
Terraform, GitHub Actions, Cloud Buildでデータ基盤をProvisioningする / Data Platform provisioning for Google Cloud and Terraform
shinyorke
PRO
2
3k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
PRO
9
3.5k
自らを強いエンジニアにするための3つの習慣 / I need to be myself, I can't be no one else
shinyorke
PRO
82
80k
阪神タイガース優勝のひみつ - Pythonでシュッと調べた件 / SABRmetrics for Python
shinyorke
PRO
1
1.4k
Pythonとクラウドと野球の推し活. / Baseball Data Platform for Python and Google Cloud
shinyorke
PRO
2
2.8k
月額コーヒー3.34杯分のコストでオオタニサンの活躍を見守るデータ基盤のはなし / Pyhack Con
shinyorke
PRO
2
480
俺のDXを実現するためのサーバレスなデータ基盤開発と運用 / Serverless Data Platform and Baseball
shinyorke
PRO
5
12k
機械学習エンジニアが目指すキャリアパスとその実話 / My Journey to Become a ML Engineer
shinyorke
PRO
10
17k
Other Decks in Programming
See All in Programming
Writing documentation can be fun with plugin system
okuramasafumi
0
130
CloudNativePGを布教したい
nnaka2992
0
100
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
860
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
color-scheme: light dark; を完全に理解する
uhyo
7
470
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
GoとPHPのインターフェイスの違い
shimabox
2
200
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
820
Featured
See All Featured
Side Projects
sachag
452
42k
Embracing the Ebb and Flow
colly
84
4.6k
Speed Design
sergeychernyshev
27
800
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Unsuck your backbone
ammeep
669
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Done Done
chrislema
182
16k
Facilitating Awesome Meetings
lara
52
6.2k
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)