MacとVSCodeでDjangoアプリケーションの開発環境を構築する

##はじめに
Mac&VSCode環境化でDjangoを使用したWebアプリケーションを作成する機会があったので備忘をかねての投稿です。Pythonのインストールからプロジェクトの作成まで順を追って解説していきます。
#Pythonのインストール
はじめてPythonで開発をするという方はこちらからはじめます。今回はHomebrewを使用してインストールをすすめていきます！
###pyenvのインストール
Pythonをインストールする前に、複数のPythonのバージョンを管理するためのツール「pyenv」をインストールします。ターミナルを開き下記のコマンドを実行します。

```
brew install pyenv
pyenv -v #バージョンを表示して正常にインストールされているか確認する
```

正常にインストールが完了したらpyenvのパスを設定していきましょう。ターミナルで`echo $SHELL`を実行すると下記のどちらかが表示されると思います。

```
/bin/bash #パターン1
/bin/zsh　#パターン2
```

パターン1：`/bin/bash`の場合　※ひとつずつ入力しても何も起こりませんが設定はできてます

```
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
```

パターン2：`/bin/zsh`の場合

```
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc
source ~/.zshrc
```

以上で以上でpyenvのpathの設定は完了です。
###Pythonのインストール
つづいてPythonをインストールしていきます。まずはpyenvのコマンドをつかってインストール可能なPythonのバージョンを確認します。

```
pyenv install --list 
```
使用可能なバージョンが多数表示されますが、今回は3.8.0をインストールします。

```
pyenv install 3.8.0　#インストールするバージョンに合わせる
```

下記のコマンドでpyenvがインストールしているPythonのバージョンを確認できます。

```
pyenv versions
```

最後にMacにデフォルトで入っているPython2が作動しないように下記の設定をして完了です。

```
pyenv global 3.8.0 #インストールしたバージョン
〜〜〜〜〜
python3 --version #使用するバージョンの確認
```
##VSCodeの設定
今回はエディタとして Visual Studio Code（VSCode） を使用しますので、こちらでPythonの開発ができるよう最低限の設定をしていきます。
###VSCodeのインストール
VSCodeのインストールが済んでいない場合は[こちら](https://code.visualstudio.com/download)でMac版をインストールします。
![vsc_1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/26227340-9927-5a6c-ec40-a47628b520c9.png)
ダウンロードされた.zipファイルを展開するとVisual Studio Code.appが作成されます。これでインストールは完了です。
###拡張機能の追加
VSCodeでPythonを使用するには拡張機能を追加する必要があります。VSCodeのウェルカムウィンドウで下記のアイコンをクリックします。![vsc_2_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/d78bc4aa-6d28-6026-5d84-59f15dd31f9f.png)
検索窓に"python"と入力すると、関連する拡張機能がいくつかヒットします。下記のとおり選択してクリックしてください。![vsc_2_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/6de015e8-69cf-310a-6759-f57b366f8aba.png)
画像ではすでにインストール済みのため表示が違いますが、未インストールの場合は緑枠部分にインストールボタンがあるのでクリックします。![vsc_2_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/69d9ca0a-957d-76a7-5c36-6651e805e7a3.png)
これでPythonコードを編集するための、最低限の準備が整いました。
##仮想環境の作成とDjangoのインストール
###仮想環境とは
自身のコンピュータのローカルで、バージョン（Django自体やライブラリ）の異なるDjangoアプリケーションを一括に管理しようとするとエラーが発生してしまいます。 そこでアプリケーションごとに、それぞれに適した環境を用意してあげる必要があります。これが仮想環境です。
###仮想環境の作成
まずは今回のプロジェクトで使用するフォルダを作成します。フォルダ名はわかりやすいように「Django」にしました。![env_1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/64e4af1b-d059-3abc-f768-6a726e73154b.png)
続いてDjangoフォルダ内に仮想環境をつくります。
次のコマンドをターミナルで実行します。（`python3 -m venv 仮想環境名`）

```
cd Django
python3 -m venv my-app
```

正しく実行されると、次の画像のようにDjangoフォルダ内に「my-app」という仮想環境が確認できます。![env_1_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/9b2974c5-f09f-c1ef-dd3a-a7068683008d.png)
作成された仮想環境を使用するには、ターミナルでアクティベートを実行する必要があります。
（`source 仮想環境名/bin/activate`）

```
 source my-app/bin/activate
```
アクティベートに成功すると、次の画像のように先頭に(my-app)と表示されるようになります。![env_1_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/c2adea04-1ac6-f1fa-82c4-6878c3273df0.png)
以上で仮想環境の作成は完了です。（ディアクティベートはターミナル`deactivate`を入力実行）
###Djangoのインストール
続いてDjangoのインストールをしていきます。Djangoのインストールにはpipコマンドを使用します。pipとはPythonのライブラリを管理するためのツールで、Pythonをインストールした時点で使用できます。
作業は簡単で、仮想環境をアクティベートした状態で次のコマンドを実行してください。

```
pip install Django
```
![env_1_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/0382d7f6-2b89-d65a-3e57-e6d15591868b.png)
Successfully installed... と表示されたら仮想環境へのDjangoのインストールは完了です。
##プロジェクトの作成
###プロジェクトとは
Djangoにはプロジェクトとアプリと呼ばれる2つのディレクトリが存在します。 プロジェクトでは、主にアプリケーション全体に関連する設定等を行います

ex) 時間設定・言語設定・個々のアプリの登録・データベース etc..
###プロジェクトの作成
ターミナルを開いて次のコマンドを実行するとプロジェクトが作成されます。今回はサンプルとして「簡易ツイッター」を作成する予定なので、プロジェクト名は`simple_twitter`としました。

```
django-admin startproject simple_twitter
```
`Django`フォルダを開くと新たに`simple_twitter`プロジェクトが作成されているのが確認できます。![pjc_1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/29d95bd4-2569-1c00-aa42-ba4955c2b650.png)
次にプロジェクトの中身を見ていきます。`manage.py`と`simple_twitter`フォルダが確認できます。 `manage.py`は今後サーバーを動かす際やDBの変更がある場合に使用しますので、その際に説明をします。 `simple_twitter`フォルダをクリックしてさらに中身を見ていきましょう。![pjc_1_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/4bec2754-768e-ea42-4672-309d602f8e1c.png)フォルダを開くと、5つのPythonファイルが確認できます。各ファイルの役割は下記のとおりです。

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

###サーバーを立ち上げる
ターミナルを開き、cdコマンドで`Desktop/Django/simple_twitter`に移動します。そして`simple_twitter`フォルダ内に`manage.py`が存在することをlsコマンドで確認し、次のコマンドでサーバーを立ち上げます。

```
python manage.py runserver
```
![srv_1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/27647659-1062-1d9e-9a7d-e632fa515247.png)
`Starting development server at http://127.0.0.1:8080/Quit the server with CONTROL-C.` の表示が確認できれば、サーバーの立ち上げは成功です。この状態で[` http://127.0.0.1:8080/ `]( http://127.0.0.1:8080/ )にアクセスしてみます。
![srv_1_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636551/aae9cda7-fdf1-fe29-dcc6-7b150fd91a88.png)
上のようなページが表示されれば環境構築は完了です。あとは自身で作成したいアプリケーションの追加等をすれば開発をはじめることができます！
##さいごに
長々と書きましたが、慣れている人からしたらほんの数分で終わる作業だと思います。この記事が初めてDjangoで開発を始める方の参考になれば幸いです。また、メインのアプリケーション作成についても、時間があれば記事にしてみたいと思います！