Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

hoda
May 13, 2019

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

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

のLT資料です。

hoda

May 13, 2019
Tweet

More Decks by hoda

Other Decks in Technology

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