Django+Reactで学ぶプログラミング基礎(1): ゴールと概要

はじめに

Django+Reactのアプリ開発を、手を動かして体験しながら、
プログラミング基礎も楽しく身につける、を目指しています。

構築予定のWebアプリ

カンバン方式のタスク管理アプリを作成します。
以下機能を実現します。

• カンバンボードで、リストとカードを使ってタスク進捗を可視化
  • ボードに付箋を貼るようにカードを並べ
  • 進捗状況に合わせ、Todo、Doing、Doneリストに振り分ける
• ボード上で可能な操作
  • リスト/カードの作成/編集
  • リスト内でカード移動
  • リスト間でカード移動
• ユーザーログイン/管理

プログラミング基礎の内容

• 要件定義
• 基本設計
• フローチャート
• シーケンス図
• ER図
• オブジェクト指向(クラス)

使用する開発言語やツール

• 開発言語
  • Python
  • JavaScript
  • HTML
  • CSS
• Webアプリケーションフレームワーク
  • Django(バックエンド)
  • React(フロントエンド)
  • Redux(フロントエンド)
• データベース
  • MySQL
• その他開発ツール
  • Python関連コマンド
  • OS関連コマンド
  • Visual Studio Code

Djangoとは

Wikipediaから、Django(ジャンゴ)とは

• Pythonで実装されたWebアプリケーションフレームワーク
  • Webアプリケーション開発に必要な機能が予め用意された骨組み
  • 目的は、Web開発で用いられる共通した作業に伴う労力の軽減
• MVCデザインパターンに緩やかに従う
  • Model-View-Controller(MVC、モデル・ビュー・コントローラ)とは
    • UIを持つソフトウェアに適用されるソフトウェアアーキテクチャの一種
      
• Djangoの目的
  • 複雑なウェブサイト構築を簡単に
• Djangoの機能
  • コンポーネントの再利用性
  • プラガビリティ(pluggability)
    • 外部ライブラリ/フレームワーク/追加機能を組み込むこと
  • 素早い開発
  • DRY原則(Don't repeat yourself)
• データベース管理のCRUDインターフェイスを提供
  • CRUDとは、Create/Read/Update/Delete
  • インタフェースは動的生成され、データモデル定義により完全構成可能
• Djangoのコンポーネント
  
  ※ 引用元: https://djangobook.com/django-tutorials/beginner-lesson-2-how-django-works/
  • Djangoフレームワークのコア部分
    • O/Rマッピング(O/Rマッパー/ORM)
      • データモデル(Pythonクラス)とリレーショナルデータベースの間を仲介
    • 正規表現に基づくURLディスパッチャ
    • リクエストを処理するビューシステム
    • テンプレートシステム
• バンドルされるアプリケーション
  • 拡張可能な認証機構
  • 動的な管理インターフェイス
  • RSSとAtom配信用フィードの生成ツール
  • 柔軟なコメントシステム
  • Sitemapsを生成するツール
  • クロスサイトリクエストフォージェリ(CSRF)の防止ツール
  • TextileやMarkdownなど軽量マークアップ言語を使用可能なテンプレートライブラリ
• 公式サポートされるデータベース
  • PostgreSQL
  • MySQL
  • SQLite
  • Oracle

Reactとは

Wikipediaから、React(リアクト)とは

• ユーザインタフェース構築のためのJavaScriptライブラリ
• SPA(シングルページアプリケーション)やモバイルアプリケーション開発のベースとして使用
  • SPAとは、単一Webページのみから構成することで
    • デスクトップアプリケーションのようなユーザ体験を提供
    • 必要コードの読み込み方法
      • 最初にまとめて読み込む
      • または、ユーザ操作に応じて動的にサーバと通信し、必要なものだけ読み込む
• 複雑なReactアプリケーションでは、状態管理・ルーティング・APIとの対話のため追加ライブラリが必要
  • 例えば、Reduxを状態管理に使用
    • アプリケーションの状態管理のためのオープンソースのJavaScriptライブラリ
    • ユーザーインターフェイスを構築するため、ReactやAngularなどのライブラリで最もよく使用される
• Reactの機能
  • 宣言的UI(テンプレーティング)
    • JSX & ReactDOM
  • データバインディング(data ⇒ UI)
    • state hook
  • コンポーネント化
    • 関数コンポーネント/React.Componentクラス
  • 高効率レンダリング
    • 仮想DOM

おわりに

本記事のゴールと概要を説明しました。
次回から、実践スタートします。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(2): 開発環境構築(Django/VS Code)