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
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
180
エンジニア向け採用ピッチ資料
inusan
0
160
NPOでのDevinの活用
codeforeveryone
0
190
技術同人誌をMCP Serverにしてみた
74th
1
350
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Practical Orchestrator
shlominoach
188
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Done Done
chrislema
184
16k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
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)