Django × Vue で学ぶAI時代の業務システム開発実践入門
無料で読める本
※本書は執筆中です。随時チャプターを追加していきます。 本書は 製造業の社内SE が、小規模体制で AI を活用した Django × Vue.js 業務システム開発 を行うために必要な知識・考え方を身につけるための入門書です。 現在、AI 活用が当たり前になっておりますが、現時点のAIでは全体整合性を担保したシステム構築は困難です。 AI を活かすには、要件の理解に加え、要件を設計に落とし込む力、保守しやすい設計・コーディングパターンを理解し、全体の整合性を担保する視点をもち、 AIが生成したコードを評価できることが大切です。 これからは「フロントもバックも全部自分で書ける人」ではなく、AI を活用して設計と実装をリードできる人材が求められます。 本書ではその力を養うために、実際に動作するコードと、設計の考え方について書いていきたいと思います。 本書が、フルスタックエンジニアを志す方の一助となれば幸いです。 ※本記事は以下の環境を前提として記載しています。 OS：Windows 11 Pro VisualStudio Code 1.104.0 Python 3.12.4 Django 5.2.6 Node.js v20.13.1 Vue 3.5.18 PostgreSQL 17 Git 2.45.0.windows.1 ・Python / Node.js / PostgreSQL / Git は各個人で インストールしておいてください
Chapters
0.0 はじめに
0.1 AI活用の基本と注意点
0.2 本書で目指す本番環境のシステム構成概要
1.1 Django × Vue で業務システムを刷新する（導入編）
1.2 Djangoを業務システム基盤として採用した理由
1.3 Vue 3を業務システムのフロント基盤に採用した理由
1.4 Django × Vue 業務システムのフォルダ構成と設計ルール
2.1 Django 単体と API ドリブン構成の違い
2.2 Django のモデルベース開発
2.3 Django REST Framework（DRF）入門
3.1 API 設計の実際（Django REST Framework 編）
3.2 Serializer 設計の実装パターン（Django REST Framework）
3.3 エラーハンドリングの実装パターン（Django REST Framework 編）
3.4 フィルタリングと検索の実装パターン（Django REST Framework 編）
3.5 パフォーマンス改善と N+1 対策（Django REST Framework 編）
3.6 レスポンス設計のベストプラクティス（Django REST Framework 編）
4.1 認証・ログインセッション管理（Django REST Framework + Vue 編）
4.2 JWT 認証の仕組みと実装（Django REST Framework + Vue 編）
4.3 Django 標準の権限の考え方
4.4 独自ロールモデルによる権限管理
4.5 メニュー制御の実装（業務単位での公開制御とUX設計）
コラム: メニュー設計は業務設計そのもの
4.6 JWT とセッション管理の実践
4.7 API 側の permission 実装パターン
4.8 Django 設定（CORS と認証まとめ）
4.9 django-allauth を使った統合認証（Okta ログイン）
4.10 Django 設定の実際（CORS・認証・メール・ログなど）
5.1 Vue 3 による SPA 化と AI活用のポイント
5.2 Vite + Vue 3 で Hello World
5.3 Vue の基本書き方（基礎文法編）
5.4 axios 入門（API 呼び出しの基本）
5.5 Pinia（状態管理）と認証ストア拡張
6.1 実践編）Django × Vue アプリ雛形の作成
6.2 実践編）Django 側の初期セットアップ
6.3 実践編）accounts アプリの作成とカスタムユーザモデル
6.4 実践編）ログイン API の実装
6.5 実践編）Vue プロジェクト作成（Pinia / Router / Vuetify 導入）
6.6 実践編）ログイン状態管理とメニュー画面+スナックバー
6.7 実践編）部署・権限によるメニュー制御（Django 側実装）
コラム:Postmanでバックエンド API をテストする
6.8 実践編）フロントエンドで階層メニューを表示する
7.1 実践編）お知らせアプリ（バックエンド編）
7.2 実践編）お知らせアプリ お知らせ一覧を作成(フロントエンド編)
7.3 実践編）お知らせアプリ バックエンド API を完成させる
7.4 実践編）お知らせアプリ フロントエンドでお知らせの登録・編集画面を完成させる
Author
Topics
