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

##### [前回] [Django+Reactで学ぶプログラミング基礎(1): ゴールと概要](https://qiita.com/mingchun_zhao/items/e0dbed5d91b97f35bc79)

## はじめに

事始めは、開発環境構築から。
まず、VS CodeとDjangoをインストールします。

## 開発環境情報

- Windows 10
- Python 3.10
- Django 4.0
- VS Code(Visual Studio Code) 1.67
    - ソースコードエディタ
    - 機能
        - デバッグ
        - 埋め込みGitコントロール
        - シンタックスハイライト
        - インテリジェントなコード補完
        - スニペット表示
        - コードリファクタリングをサポート

## VS Codeをインストール

- `https://code.visualstudio.com/`から最新版をインストール
- VS Codeを起動
- VS Codeのターミナルを`Command Prompt`に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/bd4323ef-8367-00a4-2cfe-f7f595c51165.png)

## Pythonをインストール

- `https://www.python.org/`から最新版をインストール
- バージョンを確認
```
> python -V
Python 3.10.4
```

## Pipenvをインストール

- pipとは
    - Pythonで書かれたパッケージソフトウェアを、インストール/管理するためのパッケージ管理システム
    - Pythonパッケージは、通常Python Package Index(PyPI)に公開される
- pipenvとは
    - Pythonのプロジェクト管理ツール
    - ライブラリのバージョンをPipfileに記録
    - Pipfileに合わせ、プロジェクト用の仮想環境を自動作成可能
    - Pipfileは、`requirements.txt`からインポート/エクスポートできる
- pipenvをインストール
```
> pip install pipenv
```

## ユーザー環境変数Pathにパスを追加

- Windowsキーを押して、`env`と入力
- `環境変数を編集`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/52e74bb3-32c8-db93-3e25-b32aeacfb377.png)
- ユーザー環境変数のPathを編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4330ba82-0783-6f2c-f017-86ef93b16168.png)

- 環境変数Pathに以下を追加
```
C:\Users\user\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\LocalCache\local-packages\Python310\Scripts
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/d229fec5-6216-fa40-0db8-648af826f326.png)

## 仮想環境作成

- 仮想環境とは
    - Pythonを使った開発やテストでは、用途に応じて専用の実行環境を作成し、切り替えて使用
    - 仮想環境とは、このように一時的に作成する実行環境のこと
- 仮想環境作成
```
> md C:\kanban\venv
> cd C:\kanban\venv
> pipenv --python 3.10
Creating a virtualenv for this project...
Pipfile: C:\kanban\venv\Pipfile
... ...
Successfully created virtual environment!
Virtualenv location: C:\kanban\venv\.venv
Creating a Pipfile for this project...
```

- 仮想環境をアクティベート
```
C:\kanban\venv>.venv\Scripts\activate
(venv) C:\kanban\venv>
```

## 作成した仮想環境内にDjangoインストール

- pipを最新化
```
(venv)  C:\kanban\venv>pip install --upgrade pip
```
- Djangoをインストール

```
(venv)  C:\kanban\venv>pip install django
```
```
Collecting django
... ...
Installing collected packages: tzdata, sqlparse, asgiref, django
Successfully installed asgiref-3.5.2 django-4.0.5 sqlparse-0.4.2 tzdata-2022.1
```

##  Djangoプロジェクトを作成

- 下記コマンドでプロジェクト作成
```
(venv)  C:\kanban\venv>django-admin startproject kanban
```

## プロジェクトのサーバーを起動

```
(venv)  C:\kanban\venv>cd kanban
(venv)  C:\kanban\venv\kanban>python manage.py runserver
```
```
Watching for file changes with StatReloader
Performing system checks...

Django version 4.0.5, using settings 'kanban.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
- ブラウザで`http://127.0.0.1:8000/`にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/a2efe5a0-ba99-d534-5f62-85de1b3d13aa.png)


Djangoを正常に導入/実行できました。

## おわりに

開発環境構築の一環として、Windows環境にDjango、VS Codeをインストールしました。
次回も続きます。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(3): 開発環境構築(React)](https://qiita.com/mingchun_zhao/items/505a4fe76dfb8aa73023)