【python初学者向け】pipenvとVisual Studio Codeを使ってpython製Webフレームワークの開発環境を整える

# Visual Studio CodeでWebフレームワーク(Django)の開発環境を整える
<a href="https://code.visualstudio.com/">Visual Studio Code</a>を使ってpythonのWebフレームワークの開発環境を整える手順書エントリです.
Webフレームワークは<a href="https://www.djangoproject.com/">Django</a>, OSはmacを想定していますが, 

「使いたいのはDjangoじゃなくてflaskだよ!」
「OSはmacじゃなくてwindowsだよ!」
という人でも大凡同じ流れで設定できるはずです.

## pipenvでpythonの仮想環境を構築する
### pipenv
<a href="https://pipenv-ja.readthedocs.io/ja/translate-ja/">pipenv</a>
Python公式からも利用を推奨されている, pythonの仮想環境を管理・構築するスゲーやつ.
「pythonはこのバージョンを使って, パッケージはあれとこれとそれを使って....」
といった設定は, 仮想環境にパッケージングしておいて, どのプラットフォームでも同じように実行可能にしておくのが理想です.

### 構築手順
それでは, 以下の手順に従って仮想環境の構築をしていきましょう.

1. ```pipenv```コマンドが実行可能か確認. <a href="https://qiita.com/subarunari/items/dcbdad68ba1809b721b9">ここ</a>などを参照にインストール
2. プロジェクトを作成するフォルダに移動
3. **環境変数```PIPENV_VENV_IN_PROJECT```をtrueにする.  <br>(これやっとかなくても開発自体はできますが,　設定しておくことを推奨)**<br>
4. ```pipenv install```で仮想環境を作成<br>
このコマンドで, Pipfile, Pipfile.lock, .venvが生成されているはずです.
5. ```pipenv install django```を実行し, Djangoをインストール
6. ```pipenv shell```を実行し, python仮想環境を立ち上げる(bashの名前がちょっと変わったはず)
7. ```pip list```で正しくDjangoがインストールされていることを確認
<img width="301" alt="スクリーンショット 2018-08-02 0.49.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/3e2d989f-d761-d335-a3b4-d6a8a1be5850.png">

8. 7.の状態で以下のコマンドを実行し, Djangoのサーバーが立ち上がることを確認.  
```django-admin startproject mysite```
```cd mysite```
```python manage.py migrate```
```python manage.py runserver```

<img width="572" alt="スクリーンショット 2018-08-02 1.18.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/22c47f31-e9cb-e566-1543-3f5e60a934d4.png">


Djangoについて, 詳しくは<a href="https://docs.djangoproject.com/ja/2.0/intro/">公式チュートリアル</a>を参照のこと.
これでpythonの仮想環境設定は終了です.

## Visual Studio Code上でF5(デバッグ)を押したらDjangoのサーバーを立ち上げるようにする
pipenvでDjangoをインストールし, ```pipenv shell```後, ```python manage.py runserver```でDjangoサーバーが立ち上がることは確認できましたか?
それではワークスペースのフォルダをVSCodeで開き, 各種設定をしていきましょう.

### pythonのアドインをVSCodeに入れる
何はともあれ<a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python">これ</a>がないと何もできないので, インストールした後VSCodeをリロード.

### デバッグ構成を追加する

デバッグに関する設定は虫ちゃんマークのアイコンから行えます. 
<img width="58" alt="スクリーンショット 2018-08-02 1.39.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/50bbf6a5-5bb0-85a0-c07b-6eafe4ce1130.png">

次にビルド構成のギアアイコンを選択.
<img width="316" alt="スクリーンショット 2018-08-02 1.39.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/0ac3a5e3-f695-4bfe-6b0e-28a507b6baa8.png">

VSCodeにインストール済みのビルド構成の言語パック一覧が表示されると思いますので, **python Experimental**を選択します.
<img width="662" alt="スクリーンショット 2018-08-02 1.39.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/5b3e1515-c016-cfb8-61a5-d900baef2736.png">

### launch.jsonの一部を書き換える
ここまででlaunch.jsonファイルが生成されていると思います.
中を見ると, 中に色々とデバッグ構成が書かれています.
今回はDjangoを起動したいので, launch.jsonの一部(nameがDjangoのもの)を以下のように書き換えてあげて下さい.

```json
        {
            "name": "Python Experimental: Django",
            "type": "pythonExperimental",
            "request": "launch",
            # ワークスペースのルートから見た正しい`manage.py`の場所を指定しましょう
            "program": "${workspaceFolder}/mysite/manage.py",
            # pipenvで生成した.venv中にあるpythonへのパスを通しましょう
            "pythonPath": "${workspaceFolder}/.venv/bin/python",
            "console": "integratedTerminal",
            "args": [
                "runserver",
                "--noreload",
                "--nothreading"
            ],
            "django": true
        },
```

```pythonPath```と ```manage.py``` へのパスを通すのがポイント.

(2018/8月現在, Djangoのサーバーを立ち上げる設定がPython Experimentalに含まれていることを確認しています)

### デバッグ実行してサーバーが立ち上がるか試してみる
さて, ここまで上手くいっていれば, Visual Studio Code上からDjangoサーバーの立ち上げができるようになっています.
デバッグ構成が「Python Experimental: Django」になっている事を確認して, F5かデバッグボタンを押してデバッグ実行後, http://127.0.0.1:8000/ をブラウザで開いてみましょう.
<img width="528" alt="スクリーンショット 2018-08-02 9.13.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/53baa1fc-edf8-3755-1c43-b048172761e0.png">

<img width="572" alt="スクリーンショット 2018-08-02 1.18.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/139940/22c47f31-e9cb-e566-1543-3f5e60a934d4.png">

できましたね! :ok_woman:
お疲れ様でした.

## つまづきポイントやよくある質問
### 「.venv」がワークスペース内にない
環境変数:```PIPENV_VENV_IN_PROJECT```をtrueにした状態でないと, ```pipenv install```しても, ワークスペース内に.venvは作成されませんので注意して下さい.

### gitでめっちゃ変更が出る
「.venv」や「.vscode」はgitのバージョン管理対象外の隠しフォルダです. .gitignoreファイルに追記しておきましょう.

### なぜVisual Studio Code?
**タダだから**

...というのは半分で, 

**タダでPython/html/css/Javascriptを透過的に扱えるエディタだから**
**python以外でも使い道が豊富だから**
というのが大きいです. 各種アドインも便利.
pythonで飯食ってく覚悟が決まった人は<a href="https://www.jetbrains.com/pycharm/features/editions_comparison_matrix.html">PyCharm Professional Edition</a>を買えば良いと思います :)