DRF × Vue.js 実践講座【まとめ】— 講座一覧
本記事は、Django REST Framework (DRF) × Vue 3 (SPA) によるフルスタックWeb開発実践講座のまとめページです。各講の記事へは、下のリンクから移動できます。
講座構成
本講座は以下の四部構成で進めていきます。
- 第一部：全体像・環境構築編
- 第二部：バックエンド開発編（Django REST Framework）
- 第三部：フロントエンド開発編（Vue 3 + TypeScript）
- 第四部：フルスタック統合・実務応用編
講座一覧
第一部：全体像・環境構築編
| 講 | タイトル | 内容 |
|---|---|---|
| 第一講 | フルスタックSPAの全体像とシステムアーキテクチャ | SPA × REST API の基本概念、採用技術スタック、NGINX・Uvicorn・DRF・Vueの役割分担、通信フロー全体像 |
| 第二講 | 環境構築と生成AI時代にコードを学ぶ意味 | 生成AI時代の開発変化とレビュー負担、3つの負債、人間の設計責任、Python・Node.js・VS Codeの環境準備 |
| 第三講 | プロジェクト初期セットアップとパッケージ導入 | コマンドプロンプトの基本、Vue 3 (Vite+TS)・Axios・Vuetify導入、Python仮想環境、Django/DRF初期プロジェクト・アプリ作成とディレクトリ構成 |
第二部：バックエンド開発編（Django REST Framework）
| 講 | タイトル | 内容 |
|---|---|---|
| 第四講 | DRFの全体構造とDjangoモデルによるデータ設計 | REST APIの基本動作、DjangoとDRFの協力関係、1リクエスト処理シーケンス、オブジェクト指向の基本、Djangoモデル（ORM）定義とデータ設計アーキテクチャ |
第三部：フロントエンド開発編（Vue 3 + TypeScript）
第四部：フルスタック統合・実務応用編
この講座で学べること
【第一部】全体像・環境構築編
- 第一講 … 現代Web開発の標準である「DRF × Vue 3」の全体アーキテクチャや通信フロー、Webサーバー（NGINX/Uvicorn）の役割を押さえます。
- 第二講 … 生成AI時代の開発変化（レビュー増加・3つの負債・人間の設計責任）と、開発の土台となる Python・Node.js・VS Code の環境準備を学びます。
- 第三講 … コマンドプロンプトの基本から、Vue 3 (Vite + TypeScript)・Axios・Vuetifyの導入、Python仮想環境、Django/DRFの初期化とフォルダ構成を学びます。
【第二部】バックエンド開発編（Django REST Framework）
- 第四講 … DRFの全体構造やリクエスト処理シーケンスを図解で把握し、オブジェクト指向の考え方からDjangoモデル（ORM）による本格的なデータ設計（フィールド型・オプション・Metaクラス）を学びます。
第一部：全体像・環境構築編（第一講〜第三講）の学習、お疲れ様でした！
フルスタックSPAの全体通信フローから、AI時代の設計責任、そしてコマンドラインによる Vue 3 (Vite + TypeScript) と Django / DRF の初期立ち上げまで、これからの開発を支える強固な土台を築くことができました。
次のステップへ
「全体像・環境構築編」を終え、いよいよ次は 第二部：バックエンド開発編（Django REST Framework） へ進みます！
次回からは、今回作成したディレクトリ構成をもとに、データベース設計（ORMモデル）、シリアライザによるデータ変換、そしてView / Routerを用いたRESTful APIの本格的な実装に入っていきます。
各講へのフィードバックや応援があれば、いいね（LGTM）やストック、コメント等で応援してもらえると筆者の大変励みになります。今後ともぜひ、学んだ知識を実務に活かしていってください！