DRF × Vue.js 実践講座【第三講】プロジェクト初期セットアップとパッケージ導入

Lecture 03: Project Initial Setup & Package Installation

← DRF × Vue.js 実践講座：まとめページに戻る | ← 第二講：環境構築と生成AI時代にコードを学ぶ意味

はじめに

第二講では、生成AI時代に開発者が持つべき設計責任やレビュー文化、そして開発の土台となる Python、Node.js、VS Code のインストールを行いました。

いよいよ第三講からは、実際のプロジェクトをゼロから立ち上げていきます！

本講では、本格的なコーディングやディレクトリ設計に入る前の第一歩として、フロントエンド（Vue 3）の初期化と必須ライブラリ（Axios・Vuetify）の導入、そしてPython仮想環境（venv）の構築とバックエンドパッケージ群（Django・DRFなど）のインストールまでを進めます。

1. はじめに：コマンドプロンプト（cmd）の基本を押さえる

これからの開発作業では、ターミナルとして Windows 標準の コマンドプロンプト（cmd） を使用して進めていきます。
（※ PowerShell ではセキュリティ設定によってスクリプト実行ポリシーのエラーが出ることがありますが、cmd であればトラブルなくスムーズに環境構築を進められるためです）

「黒い画面でのコマンド操作に少し苦手意識がある……」という方のために、まず最低限覚えておきたい基本操作をおさらいしておきましょう。

■ CLI（コマンドライン）で操作する理由

GUI（マウス操作）でもフォルダの作成やファイルの移動はできますが、現代のWeb開発では以下の理由から CLI が主流です。

• 正確性: コマンドによって誰が実行しても同じ環境・設定を一瞬で再現できる
• 自動化: パッケージ管理ツール（npm や pip）を使った一括ダウンロードや依存関係の解決ができる
• 開発サーバーの制御: ローカルサーバーの起動・停止・ログ監視をリアルタイムで行える

■ 最低限知っておきたい cmd の基本コマンド

■ これからどこでコマンドを打つ？（作業フォルダの準備）

「コマンドプロンプトを開いたけれど、どこでコマンドを打てばいいの？」と迷う方も多いはずです。
難しく考える必要はまったくありません！普段使っているエクスプローラーから作ってOKです。

1. エクスプローラーでフォルダを新規作成:
   デスクトップや「ドキュメント」など、自分の分かりやすい場所にマウス右クリックで新しいフォルダ（例: drf-vue-project）を作成します。
2. そのフォルダに移動する:
   コマンドプロンプトを開いて、cd コマンドで作成したフォルダへ移動します。

   cd C:\Users\ユーザー名\Documents\drf-vue-project
   

本講でこれ以降に実行するコマンドは、すべてこの作成した作業用フォルダ（例: drf-vue-project）の中で実行していきます！

2. 【復習】これから構築する通信フローをかみ砕いて再確認！

実際にコマンドを打って環境を作り始める前に、「いま自分は何を作ろうとしているのか？」「Vue と DRF はどう連携するのか？」を1枚の図でサクッとおさらいしておきましょう。

■ そもそも「SPA（Single Page Application）」とは？

本講座で作るフロントエンドは SPA（シングルページアプリケーション） と呼ばれる仕組みを採用しています。

• 文字通り「1枚きりのHTML（Single Page）」で動くWebアプリ:
  従来のWebサイト（従来のDjangoなど）は、別のページへ行くたびにサーバーから丸ごと新しいHTMLを読み直すため、画面全体が一瞬真っ白になってチカチカとリロードされていました。
• SPAならスマホアプリのようにサクサク動く:
  SPAでは、最初に読み込むHTMLはたったの1枚だけです。その後のページ移動やボタン操作では、画面全体をリロードせず、JavaScript（Vue）が裏側でデータだけを取得し、必要な部分だけをサッと書き換えます（差分更新）。
• 身近なSPAの例:
  Gmail、X（旧Twitter）、Googleマップなど、操作しても画面がチカチカ再読み込みされず、滑らかに動くサービスの多くがこのSPAで作られています。

■ 通信の基本ステップ（①〜⑥）

上記の図をもう一度見てみると、「画面を作る仕組み」と「データを扱う仕組み」が綺麗に分かれていることがよく分かります。

1. ①〜③ 画面の枠組み（Vueアプリ）を読み込む:
   ユーザーがブラウザでアクセスすると、Webサーバーから HTML・CSS・JavaScript（Vue）が届き、ブラウザ上にアプリが起動します。
2. ④〜⑤ 欲しいデータだけをリクエスト＆取得する:
   「商品一覧が見たい」「ログインしたい」といった時、画面全体を再読み込みするのではなく、必要なデータだけをバックエンド（DRF）にリクエストします。DRF は重たいHTMLではなく JSON形式の純粋なデータ だけを素早く返します。
3. ⑥ JavaScript（Vue）が画面を部分的に書き換える:
   届いた JSON データをもとに、Vue がページ全体をリロードすることなく、必要なパーツだけをサッと書き換え（差分更新）ます。

この構造が頭に入っていると、「なぜフロント（Vue）とバック（Django）で別々にプロジェクトを作り、別々にパッケージを入れるのか」がとてもスムーズに理解できます。

それでは、まずは画面側を担当する Vue 3 の立ち上げ から進めていきましょう！

3. フロントエンド（Vue 3 + Vite）の立ち上げ

まずはフロントエンド側から作成していきます。
Vue 3 では、公式推奨のスキャフォールディングツール create-vue (npm init vue@latest) を使うことで、Vite をベースにした最適な構成（TypeScript、Vue Router、Pinia など）を対話形式で簡単にセットアップできます。

■ 3-1. Vue公式ツールでプロジェクトを生成

作業用フォルダ（例: drf-vue-project）をVS Codeで開き、コマンドプロンプトで以下のコマンドを実行します。

npm init vue@latest

コマンドを実行すると、対話形式でいくつかの質問が表示されます。
第一講で整理したアーキテクチャ（ルーティングや状態管理）に合わせて、以下のように選択してください。

T  Vue.js - The Progressive JavaScript Framework
|
o  Project name (target directory):
|  frontend
|
o  Use TypeScript?
|  Yes
|
*  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
|  [ ] JSX Support
|  [•] Router (SPA development)
|  [•] Pinia (state management)
|  [ ] Vitest (unit testing)
|  [ ] End-to-End Testing
|  [•] Linter (error prevention)
|  [•] Prettier (code formatting)
|  ↑/↓ to navigate • Space: select • Enter: confirm
|
*  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
|  [ ] Replace Prettier with Oxfmt
|  [ ] Vue 3.6 (Release Candidate)
|  ↑/↓ to navigate • Space: select • Enter: confirm
|
o  Skip all example code and start with a blank Vue project?
|  No

Scaffolding project in ...\frontend...
|
—  Done.

選択が完了すると、自動的に frontend ディレクトリが生成され、Vue 3 + Vite + TypeScript に加えて Vue Router と Pinia の初期構成まで一気に整います！

■ 3-2. 依存関係のインストールと起動確認

画面の指示に従って生成された frontend ディレクトリに移動し、パッケージのインストール・フォーマット実行・ローカル開発サーバーの起動を行います。

cd frontend
npm install
npm run format
npm run dev

ターミナルに以下のような表示が出れば成功です。

  VITE v5.x.x  ready in 250 ms

  ➜  Local:   http://localhost:5173/

ブラウザで http://localhost:5173/ にアクセスし、Vue のウェルカム画面（Vite + Vue ロゴ）が表示されることを確認してください。

確認できたら、ターミナルで Ctrl + C を押して一度サーバーを停止しておきます。

■ 3-3. 生成されたフロントエンドのディレクトリ構成

生成された frontend フォルダの中身を確認してみましょう。VS Code のエクスプローラーを開くと、以下のような構造になっています。

主要なファイルやフォルダの役割を押さえておきましょう。

• プロジェクト直下（設定・管理ファイル）:
  • index.html: ブラウザが最初に読み込むHTMLエントリ。<div id="app"></div> に Vue アプリがマウントされます。
  • package.json: プロジェクトで使うライブラリ（依存関係）や実行スクリプト（dev, build 等）を管理。
  • vite.config.ts: Vite のビルド・開発サーバーの設定ファイル。
• src/ ディレクトリ（アプリケーションの本体）:
  • main.ts: JavaScript/TypeScript のエントリポイント。Vue アプリを初期化し、Router や Pinia を登録して起動します。
  • App.vue: 最上位のルートコンポーネント。共通レイアウトやページ切り替え用タグ（<router-view>）を配置します。
  • router/: ページ遷移（URL と表示画面の紐付け）を定義する Vue Router の設定置き場。
  • stores/: ログイン状態やユーザー情報など、アプリ全体で共有したいデータを管理する Pinia ストア置き場。
  • views/: 「ホーム画面」「About画面」など、ページ単位の画面コンポーネント。
  • components/: ボタン、ヘッダー、カードなど、複数の画面で繰り返し使い回す再利用可能な UI パーツ。

4. フロントエンドの必須パッケージを追加（Axios & Vuetify）

フルスタックWeb開発に必要な2つの超重要ライブラリを追加します。

1. Axios: バックエンドのDRFとHTTP通信を行うためのクライアントライブラリ
2. Vuetify: マテリアルデザインに準拠した美しいUIコンポーネントライブラリ

■ 4-1. Axios のインストール

バックエンドの REST API と非同期通信（データの取得や送信）を行うため、Axios（アクシオス） を導入します。

npm install axios

■ 4-2. Vuetify のインストール

ボタン、フォーム、ダイアログ、ナビゲーションバーなどをゼロからCSSで書くことなく、美しくレスポンシブな画面を構築できる Vuetify 3 と、アイコンパッケージを導入します。

npm install vuetify @mdi/font

これで、フロントエンド側の基本パッケージの追加は完了です！

5. Python の「仮想環境（venv）」を理解して構築する

続いてバックエンド（Django / DRF）のセットアップに移りますが、その前にPython開発において最も重要な「仮想環境」の考え方を理解しておきましょう。

■ なぜ仮想環境が必要なのか？

Pythonをパソコンにインストールした直後の状態（グローバル環境）でそのままライブラリを入れてしまうと、プロジェクト間でバージョン衝突（片方を更新するともう片方が動かなくなる問題）が発生してしまいます。

図のように、プロジェクトごとに仮想環境を分けて管理することで、ライブラリのバージョン衝突を防ぎ、安全に開発を進めることができます。

■ 5-1. backend フォルダの作成と仮想環境の構築

プロジェクトのルート階層にフロントエンド（frontend）と並ぶバックエンド用のフォルダ（backend）を作成し、その中に仮想環境を構築します。

一旦 frontend ディレクトリから抜けてプロジェクトルートに戻り、backend フォルダを作成して移動しましょう。

cd ..
mkdir backend
cd backend
python -m venv .venv

これで、以下のようにフロントエンドとバックエンドが綺麗に分かれた構成になります。

drf-vue-project/  (プロジェクトルート)
  ├─ frontend/    (Vue 3 プロジェクト)
  └─ backend/     (Django バックエンド)
       └─ .venv/  (専用のPython仮想環境)

■ 5-2. 仮想環境を有効化（アクティベート）

作成した仮想環境を使うため、backend ディレクトリの中でアクティベート（有効化）を行います。
本講座ではコマンドプロンプト（cmd）を使用しているため、以下のコマンドを実行します。

【Windows（コマンドプロンプト: cmd）の場合】

.venv\Scripts\activate.bat

※ .venv\Scripts\activate と拡張子を省略して実行しても構いません。

（参考：PowerShell の場合は .venv\Scripts\Activate.ps1、Mac/Linux の場合は source .venv/bin/activate となります）

有効化に成功すると、ターミナルの行頭に (.venv) と表示されます。
この表示が出ている間は、pip install したパッケージがすべて backend/.venv 内にのみ安全にインストールされます。

6. Django ＆ バックエンドパッケージのインストール

仮想環境がアクティベートされた状態（行頭に (.venv) がついている状態）で、バックエンド開発に必要なパッケージ群を一括インストールします。

今回導入するのは以下の4つです。

■ 6-1. pip でパッケージを一括インストール

以下のコマンドを実行します。

pip install django djangorestframework django-filter django-environ

■ 6-2. インストールの確認

正常にパッケージが導入されたかを pip list で確認してみましょう。

pip list

一覧の中に Django, djangorestframework, django-filter, django-environ が表示されていれば、バックエンドの基盤パッケージの導入は完了です！

■ 6-3. Django プロジェクトとアプリの作成

パッケージの準備ができたので、実際に Django の初期プロジェクトと、API の処理を担当するアプリケーションを作成します。
backend ディレクトリの中で、以下の2つのコマンドを順番に実行してください。

django-admin startproject project .
python manage.py startapp message

■ 6-4. 生成されたバックエンドのディレクトリ構成

コマンドを実行すると、VS Code のエクスプローラーには以下のようなフォルダ構成が完成します！

Django では、全体を管理する「プロジェクト（project）」の下に、機能ごとの「アプリ（message）」を作成して開発していきます。各ファイルが担う役割は以下の通りです。

• プロジェクト直下:
  • manage.py: 開発サーバーの起動（runserver）やDBへのマイグレーション（migrate）など、Django のあらゆる操作を受け付けるコマンド入口。
  • .venv/: 先ほど構築した仮想環境。外部パッケージが安全に隔離保存されています。
• project/（プロジェクト全体の設定・集約）:
  • settings.py: インストールしたアプリ（INSTALLED_APPS）の登録、データベース接続情報、DRFの設定などを一元管理する中核ファイル。
  • urls.py: サイト全体のURLルーティングを集約する親ファイル（各アプリのURLを読み込みます）。
  • asgi.py / wsgi.py: WebサーバーやASGIサーバー（Uvicorn等）が Django を起動するためのエントリポイント。
• message/（API機能ごとのアプリフォルダ）:
  • models.py: データベースのテーブル構造を Python クラスとして定義する ORM モデル。
  • views.py: リクエストを受け取り、シリアライザを介して JSON レスポンスを返す API ロジック（ViewSet など）。
  • admin.py: Django 組み込みの管理画面へのモデル登録。
  • apps.py: アプリの設定情報（AppConfig）。
  • serializers.py / urls.py: DRF の超重要コンポーネント（※これらは次回以降のDRF実装時に message/ フォルダ内に自分たちで作成・追加します）。

これで、フロントエンド（Vue 3）とバックエンド（Django / DRF）双方の初期準備とフォルダ構成の全体像が掴めました！

まとめ

第三講では、実務の現場で広く使われるフルスタック開発の土台として、フロントエンドとバックエンドのプロジェクト初期化と必須パッケージの導入を行いました。

• SPA × REST API 通信フローの復習:
  画面全体の再読み込みを行わずにパーツ単位でサクサク更新する「SPA（Vue）」と、純粋な JSON データのみを高速に返す「APIサーバー（DRF）」の役割分担を再確認。
• フロントエンド環境の構築（Vue 3 + Vite）:
  npm init vue@latest を使って TypeScript、Vue Router、Pinia を備えた Vite 環境を立ち上げ、API通信用の Axios と UIライブラリ Vuetify を追加導入。
• バックエンド環境の構築（Python 仮想環境）:
  グローバル環境の汚染やバージョン衝突を防ぐため、backend ディレクトリ内に専用の仮想環境（.venv）を構築してアクティベート。
• Django / DRF のパッケージ導入とプロジェクト初期化:
  django, djangorestframework, django-filter, django-environ を導入し、django-admin startproject project . および python manage.py startapp message でバックエンドの骨格を完成。

これで、開発をスタートするための準備がすべて整いました！

次回予告

次回は 【第四講】DRFの全体構造とDjangoモデルによるデータ設計 に進みます！

今回作成したバックエンドの骨格をもとに、いよいよ「第二部：バックエンド開発編」が本格スタートします。

• DRF の全体像とリクエスト処理フロー:
  REST API の基本動作から、ミドルウェア ➔ URLconf ➔ ViewSet ➔ Serializer ➔ ORM という一連の処理シーケンスを図解で徹底整理
• オブジェクト指向の前提知識:
  「クラス」「継承」「インスタンス」の考え方を整理し、なぜ Django モデルがそう書くのかを理解
• models.py によるデータ設計アーキテクチャ:
  Python のクラスを使ってテーブルを定義する「Django ORM」の基礎、フィールドクラスやオプション、Metaクラスの完全攻略

焦らず一歩ずつ、まずはすべての土台となる「データ設計」から固めていきましょう。お楽しみに！

← 第二講へ | まとめページに戻る | 第四講へ →