VSCode+Django+Mac開発環境構築

# VSCode+Django+Mac開発環境構築
## 0.前提条件
・Python3インストール済み（ターミナルで　python3 --version）
・VSCodeインストール済み

## 1.VSCode拡張機能の追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/02ab60dc-6a90-ab94-3ed2-d89a0c4ee299.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/8900667d-54d0-7aed-7e63-4df1bfe3283d.png)

## 2.仮想環境の作成
### 2.1仮想環境とは
自身のコンピュータのローカルで、バージョン（Django自体やライブラリ）の異なるDjangoアプリケーションを一括に管理しようとするとエラーが発生してしまいます。 そこでアプリケーションごとに、それぞれに適した環境を用意してあげる必要があります。これが仮想環境です。

### 2.2Djangoフォルダを作成し、my-appという仮想環境を作成する。
```
$mkdir Django
$cd Django
$python3 -m venv my-app
```
正しく実行されると、次の画像のようにDjangoフォルダ内に「my-app」という仮想環境が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/07b88bb7-baed-dde9-eb2b-8a865ad5cd96.png)


### 2.3作成された仮想環境を使用するには、ターミナルでアクティベートを実行する必要があります。
```
#Djangoフォルダ以内
$source my-app/bin/activate
```
以上で仮想環境の作成は完了です。（ディアクティベートはターミナルdeactivateを入力実行）

## 3.Djangoのインストール
pipとはPythonのライブラリを管理するためのツールで、Pythonをインストールした時点で使用できます。
仮想環境をアクティベートした状態で次のコマンドを実行してください。
```
$ pip3 install Django
```
```
Successfully installed... 
```
と表示されたら仮想環境へのDjangoのインストールは完了です。

## 4.プロジェクトの作成
### 4.1ターミナルを開いて次のコマンドを実行するとプロジェクトが作成されます。
今回はサンプルとして作成する予定なので、プロジェクト名は「test_project」としました。
```
$ django-admin startproject test_project
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/64ef653e-f576-4d06-62c2-9aabf81800bb.png)

### 4.2次にプロジェクトの中身を見ていきます。
```
$ cd test_project
$ ls
```
manage.pyとtest_projectフォルダが確認できます。 manage.pyは今後サーバーを動かす際やDBの変更がある場合に使用します。

### 4.3test_projectフォルダを開くと、5つのPythonファイルが確認できます。
|フォルダ名  |概要  |
|---|---|
|__init__.py  |このファイルを含むディレクトリをPythonにパッケージとして認識させる役割があります  |
|asgi.py  |非同期処理に対応したWebアプリケーションを動作させるための、Python製Webサーバーです  |
|settings.py  |ファイル名のとおり様々な設定を書いていくファイルです  |
|urls.py  |アプリケーションの軸となるURLを設定していくファイルです  |
|wsgi.py  |本番環境等にデプロイする際にサーバーの設定を行います  |

## 5.サーバーを立ち上げる
### 5.1ターミナルを開き、test_projectフォルダに移動します。
```
$cd test_project
# manage.pyが存在することをlsコマンドで確認します。
$ls
# データーベースが変更されたことがある場合は、まずmigrateを実行ください。
$ python manage.py migrate  
# サーバ起動
$ python manage.py runserver
```
ターミナルに下記のように出力しましたら、Djangoサーバを正しく起動できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/2d262fd5-8328-8d9e-0fe9-d1f15a54d468.png)

### 5.2ブラウザを開き、http://127.0.0.1:8000/にアクセスしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/0dd1fe30-23a7-e878-2390-f8d77e45f266.png)

### 5.3上のようなページが表示されればDjangoが正しくインストールされました。
サーバーを終了したい場合は、ターミナルで「control+c」を押すと終了できます。

## 6.VSCodeでDjangoプロジェクトの開発
### 6.1作成した Django プロジェクトを開きます。
VSCodeに仮想環境のセッテイングを認識させるため、プロジェクトフォルダ（test_project）ではない、先ほど作った仮想環境のフォルダ（my-app）を含むフォルダ（Django）を開きください。

VSCodeで仮想環境のフォルダ（my-app）を含むフォルダ（Django）を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/1f0152b7-9b8e-bc13-812b-bb6b09464102.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/d2ace632-dfb5-ed51-37dd-abe706711a8f.png)

### 6.2Python インタプリタを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/2374b4f8-808b-f5d5-0e97-06df647bdfea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/e028c144-6d51-2749-93f6-4f6d2f88342d.png)

venv(my-app)がついている仮想環境を選びましょう。
フォルダを開いた中に Python の仮想環境があると、自動的に認識されるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/a7cc5856-8d97-d298-d73f-0b3cf440deb0.png)

### 6.3デバッガを起動してみる
まずはデバッグ環境を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/e736faf0-bdfb-45ef-2ad5-ab5f736b7ab0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/f1bdb159-0070-12c8-3c2a-45b5802df790.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/fcbb673b-8e25-decb-2cd1-a4be832b9ed4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/7529cf07-e06f-1f90-4618-490eb075cd31.png)

manage.py のパスを指定します。
（この手順の場合は、${workspaceFolder}/test_project/manage.py　になります。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/710dda91-cc27-acc6-9b38-f7c7a898b50e.png)

あとは 「実行とデバッグ」 のボタンを押せばターミナルが起動して実行状態になるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/bacbe785-685d-66f5-9df6-6ae9edeab383.png)

実行状態になったら URL をブラウザにコピペしてアクセスしてみましょう。
（ブラウザを開き、http://127.0.0.1:8000/にアクセスしてみましょう。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3363033/733a7567-cf21-ed88-5161-3b513f0f1877.png)

### 6.4上のようなページが表示されれば、VSCode上でDjangoのデバッグ環境が正しくインストールされました。
サーバーを終了したい場合は、ターミナルで「control+c」を押すと終了できます。