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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 謎のWebアプリが完成しました。。!

    Inputタグに文
    字を入力してボ
    タンをポチると
    下の表に情報
    が追加されま
    す。。!

    View full-size 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 full-size slide

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

    View full-size slide