ReactとPython/Djangoで何か作りたい

Python入門者の集い #8
https://python-nyumon.connpass.com/event/113338/

のLT資料です。

Transcript

1. ReactとPython/Django
   で何か作りたい
   

   View Slide

2. Whois
   - 職業：Webエンジニア
   - 業務経験：
   Python/DjangoベースのWebアプリ改修・開発支援など
   （Pythonはまだまだスキル不足。お勉強中）
   - Twitter：@1031hoda
   

   View Slide

3. 今日お話しすること
   新しいフロントエンド技術のキャッチアップのために、Reactや
   Vue.jsとPython/Djangoで何か作りたい
   →試してみました！
   

   View Slide

4. Reactってなに。。？Djangoって？
   - React:
   UIを構築するためのJavaScriptのライブラリ
   仮想DOMとかJSXとか謎の技術を使っている。。
   - Django:
   Pythonベースのフルスタック型フレームワーク
   Ruby on Railsの翌年（2005）にリリース
   

   View Slide

5. 構成...Dockerで3つのコンテナに分離
   　　（フロントとバック、DB）
   JSON形式の
   REST API
   データ
   ベース
   JSONデータを
   拾って整形
   Django React
   Postgres
   

   View Slide

6. 謎のWebアプリが完成しました。。！
   ←
   Inputタグに文
   字を入力してボ
   タンをポチると
   下の表に情報
   が追加されま
   す。。！
   

   View Slide

7. 工夫した点
   - フロントエンド側（React）ではAxiosをimportし、Webページの再読み込み無しで
   データを更新
   - バックエンド側（Python）ではDjango REST Frameworkというライブラリを使用して
   Web APIを構築
   - フロントエンドとバックエンドは完全に独立しており、ドメインが異なる。そのため
   django-cors-headersライブラリを使用し、クロスドメインでのRequestを許可してい
   る。
   ソースコード： https://github.com/hodanov/react-django-postgres-sample-app
   

   View Slide

8. - Reactは難しかったです（小並感）
   ReactやVue.jsの登場により、業界全体でフロントエンド主体の
   開発にシフトしているようです。DjangoやRailsのようなフルスタッ
   ク型のフレームワークを使う場合もJSON形式のWeb APIを返す
   方法をとり、ReactやVue.jsの持ち味を活かせるような開発を心
   がけます。
   がんばるぞい　　　終わり
   まとめ
   

   View Slide