はじめに

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

おわりに

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

はじめに

構築予定のWebアプリ

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

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

Djangoとは

Reactとは

おわりに

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