Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
ReactとPython/Djangoで何か作りたい
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
hoda
May 13, 2019
Technology
750
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ReactとPython/Djangoで何か作りたい
Python入門者の集い #8
https://python-nyumon.connpass.com/event/113338/
のLT資料です。
hoda
May 13, 2019
More Decks by hoda
See All by hoda
Stable Diffusion楽しいぞい というお気持ちの共有
hodanov
0
270
なぜ私はVimを使うことになったのか
hodanov
2
690
Docker入門ハンズオン.pdf
hodanov
6
2.5k
Other Decks in Technology
See All in Technology
手を動かして実感する、Kiro が変える開発体験
inariku
0
420
認知負荷を吸収し、プロダクトをまたぐPR Preview基盤の設計事例
taiki45
2
550
Lambda MicroVMsは常駐サーバーの代わりに なるか? Kiro Crew を動かして検証してみた / Kiro Crew on Lambda MicroVMs
k_adachi_01
2
340
AI Native Platform Engineering 〜PlatformとAgileで“作る速さ”を“価値”へ〜
uya116
0
500
形式手法を使って仕様をコーディングしよう
mikanichinose
0
140
いちAWSエンジニアのAI活用を振り返る #devio2026 / devio osaka 2026 kawahara
masahirokawahara
1
290
AIに賢く動いてもらうためのコンテキスト〜Snowflake女子会 vol.8
snowwmn0824
0
200
行動するAIのためのオントロジー | DevRev — Encraft #26.pdf
dvrv_tknrszk
1
610
あなたの知らないAmazon VPC Route Server/Amazon VPC Route Server you don't know about
masakiokuda
0
160
Incremental HTTP
kazuho
4
1.5k
生成AIを使って「人が」考える技術 ― AI時代の人機共想と実践ノウハウ|UNITT AC2026
ishiirikie
0
450
Claude起点の仕様駆動開発
tanakaseiya
0
230
Featured
See All Featured
Claude Code のすすめ
schroneko
67
230k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
Building a Scalable Design System with Sketch
lauravandoore
464
34k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
850
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.8k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
450
My Coaching Mixtape
mlcsv
0
330
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
890
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.6k
Transcript
ReactとPython/Django で何か作りたい
Whois - 職業:Webエンジニア - 業務経験: Python/DjangoベースのWebアプリ改修・開発支援など (Pythonはまだまだスキル不足。お勉強中) - Twitter:@1031hoda
今日お話しすること 新しいフロントエンド技術のキャッチアップのために、Reactや Vue.jsとPython/Djangoで何か作りたい →試してみました!
Reactってなに。。?Djangoって? - React: UIを構築するためのJavaScriptのライブラリ 仮想DOMとかJSXとか謎の技術を使っている。。 - Django: Pythonベースのフルスタック型フレームワーク Ruby on
Railsの翌年(2005)にリリース
構成...Dockerで3つのコンテナに分離 (フロントとバック、DB) JSON形式の REST API データ ベース JSONデータを 拾って整形 Django
React Postgres
謎のWebアプリが完成しました。。! ← Inputタグに文 字を入力してボ タンをポチると 下の表に情報 が追加されま す。。!
工夫した点 - フロントエンド側(React)ではAxiosをimportし、Webページの再読み込み無しで データを更新 - バックエンド側(Python)ではDjango REST Frameworkというライブラリを使用して Web APIを構築
- フロントエンドとバックエンドは完全に独立しており、ドメインが異なる。そのため django-cors-headersライブラリを使用し、クロスドメインでのRequestを許可してい る。 ソースコード: https://github.com/hodanov/react-django-postgres-sample-app
- Reactは難しかったです(小並感) ReactやVue.jsの登場により、業界全体でフロントエンド主体の 開発にシフトしているようです。DjangoやRailsのようなフルスタッ ク型のフレームワークを使う場合もJSON形式のWeb APIを返す 方法をとり、ReactやVue.jsの持ち味を活かせるような開発を心 がけます。 がんばるぞい 終わり まとめ