🕌

# 6.1 Django × Vue アプリ雛形の作成

に公開
Django
Vue.js
tech

ここからはいよいよ実践編に入る。
これまで Django と Vue の特徴や構成を整理してきたが、今回は実際に 雛形となるプロジェクト を作り、API とフロントをつないで動作確認まで行う。

前提環境

本記事の手順は以下の環境を前提としている。

  • OS：Windows 11 Pro
  • VisualStudio Code 1.104.0
  • Python 3.12.4
  • Node.js v20.13.1
  • PostgreSQL 17
  • Git 2.45.0.windows.1
  • Docker は使用しない
  • GitHub アカウントはある（リポジトリはまだ作っていない）
  • SourceTree を利用して Git 操作を行う

👉 Python / Node.js / PostgreSQL / Git は導入済みの状態から始める。

準備作業

1. PostgreSQL にデータベース作成

アプリで使うデータベースをあらかじめ作っておく。
pgAdminから作成してもOK。

# postgres ユーザーでログイン
psql -U postgres

# データベースとユーザーを作成（例）
CREATE DATABASE projectdb;
CREATE USER projectuser WITH PASSWORD 'projectpass';
GRANT ALL PRIVILEGES ON DATABASE projectdb TO projectuser;

\q

2. GitHub にリポジトリ作成

  • GitHub の Web 画面で「New repository」をクリック
  • 空のリポジトリを作る（例：リポジトリ名は project）
  • 今回はローカルから最初の commit を push するので、README はチェックせずに空リポジトリを作成

3. GitHub との SSH 接続

通常（1本のキーだけ使う場合）

  1. まだキーを持っていなければ生成
# PowerShell で実行
ssh-keygen -t ed25519 -C "your_email@example.com"

→ C:\Users\<ユーザー名>\.ssh\id_ed25519 に作られる

  1. 公開鍵 (id_ed25519.pub) を GitHub に登録
    GitHub → Settings → SSH and GPG keys → New SSH key

  2. 接続確認

ssh -T git@github.com

→ 「Hi ユーザー名! You've successfully authenticated...」と出ればOK

補足：複数のキーを使い分けたい場合

キーを分けたい場合は、~/.ssh/config を使って切り替える。

# 既存（会社用など）
Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_company
  IdentitiesOnly yes

# 新しいプロジェクト用
Host github-project
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_project
  IdentitiesOnly yes

👉 こうすると

  • git@github.com:company/repo.git → 会社用キーを使用
  • git@github-project:yourname/project.git → 新しいキーを使用
  1. 新しいキーで接続確認
ssh -T git@github-project

→ 「Hi yourname! You've successfully authenticated...」と出ればOK

4. SourceTree でリポジトリを管理

  1. ローカルに作業用ディレクトリを作成
mkdir project
cd project
git init

  1. SourceTree を開き「既存のローカルリポジトリを追加」で project を指定

  2. リモート設定で GitHub のリポジトリ URL を登録（SSH URL を選択）

    • 単一キーの場合 → git@github.com:yourname/project.git
    • 複数キーの場合 → git@github-project:yourname/project.git

  3. .gitignore を作成（不要ファイルを除外）

venv/
node_modules/
dist/
__pycache__/
  1. 初回 commit → push
git add .
git commit -m "first commit"
git branch -M main
git push -u origin main

👉 SourceTree の GUI 操作でも同じことができるが、上記コマンドを覚えておくとトラブル時に役立つ。

今回のゴール

  • Django で簡単な API を作る
  • Vue で API を呼び出して画面に表示する
  • 両者を接続して「Hello World」が通る雛形を完成させる

ディレクトリ構成

最終的にこういう形を目指す。

project/                ← 全体のルート（Git 管理対象）
  ├─ backend/           ← Django 側
  │   ├─ project/       ← Django プロジェクト名（settings, urls など）
  │   └─ manage.py
  └─ frontend/          ← Vue 側

作業の流れ

  1. Django プロジェクト作成

    • backend/ ディレクトリを作り、その中に project/ を生成
    • PostgreSQL の接続設定を追加
    • シンプルな API（例：/api/hello/）を実装

  2. Vue プロジェクト作成

    • frontend/ ディレクトリに Vue 3（Vite ベース）を導入
    • Django API を呼び出す簡単な画面を追加

  3. 接続確認

    • Vue 側から Django API を呼び出し、レスポンスを画面に表示

  4. GitHub へ push（SourceTree 経由、必要なら複数キー対応）

    • 初期コミットを作成し、GitHub のリポジトリに push
    • 雛形が共有可能になる

次の展開

今回で「Django と Vue がつながる最小構成」が完成する。
次回以降はさらに踏み込み、以下のテーマを扱っていく予定。

  • 認証・ログイン処理（JWT / セッション管理）
  • 業務メニューとナビゲーションバーの実装
  • 権限ごとの画面制御
  • 実際の業務アプリのモジュール化

👉 ここまでで「雛形を作って GitHub に push する準備」が整った。
次回はいよいよ Django 側の初期セットアップに入る。

Discussion