DjangoをVSCode+Anacondaで開発（Windows）

# 動機
データ分析や機械学習が絡むWEBアプリ開発において、Jupyter NotebookとVS Codeを併用したいと思った。
WEBアプリ自体は小規模で、まずは自分で試用するようなものを作る想定だった。（Googleカレンダーの予定を集計し、自身の行動分析や予定予測を行いたい。そのための分析基盤をDjangoからグラフィカルに提供したい。）



# 仮想環境の選択肢
Djangoでアプリ開発をする上で、選択肢に上がったのは以下。

* venv
* Anaconda
* Docker

まず小規模かつスピーディに行いたかったので、Dockerは選択肢から外した。
venvとAnacondaは以下のような違いがあると考えた。

* venv
  * python自体をOSにインストール必要がある
  * ゆえに環境の一部を管理できない。
  * python3に組み込まれていて手軽
  * 一方で、python自体のバージョンを管理できない
* Anaconda
  * anacondaのインストールは必要だが、pythonをOSにインストールしなくて済む
  * python自体のバージョンを管理できる
  * 使い慣れたJupyter Notebookと環境を共有しやすい
  * Jupyter Notebookを別途セットアップする必要がない

Anacondaの方がメリットが多いため、Anacondaを仮想環境に採用。



# 環境
* Winddows 10
* Anaconda 2.2.0
* VS Code 1.70.2



# セットアップ
AnacondaとVS Codeのセットアップは省略。
VS Codeeにはpythonの拡張機能もインストールしておく。
分からなければ、以下を参照。
https://www.nblog09.com/w/2020/11/23/windows-django/



# 仮想環境の構築
Anaconda Promptを起動する。
以下のコマンドで仮想環境を作成する。環境名は好きな名前を付ける。

```
conda create -n 環境名 python=〇.〇
```
例：
```:example
conda create -n homedb python=3.8
```

ここで付けた環境名は、Anaconda Navigatorの環境名となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/87e6260b-53b1-1739-56a5-31d07c8e9d7e.png)

環境を作成したら、環境をアクティベート。

```
conda activate 環境名
```
成功すると、プロンプト上でもbaseから環境（例だとhomedb）に切り替わった事が確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/a4378e21-1ee0-c5b5-9200-78bec2078739.png)

Django開発にあたり、必要なパッケージがあるなら、ここでインストールしておく。
Django自体もデフォルトではインストールされていないので、インストールしておく。
あとから追加することもできる。無理に今インストールする必要はない。
パッケージのインストールはプロンプトから行う他、Anaconda Navigatorからもインストールできる。後述。

```
conda install パッケージ名
```

```:Djangoのインストールをする場合
conda install django
```

主要なコマンドは以下。

| コマンド | 説明 |
|:-:|:-:|
| conda create -n 環境名 python=〇.〇 | 指定した環境名のpythonの仮想環境を指定したバージョンで作成    |
| conda activate 環境名               | 仮想環境をアクティベート                                   |
| conda deactivate                   | 仮想環境をディアクティベート                                |
| conda install パッケージ名          | パッケージをインストール                                   |
| conda uninstall パッケージ名        | パッケージをアンインストール                                |
| conda env list                     | 仮想環境一覧を表示                                         |
| conda list                         | アクティベートした環境でインストールされたパッケージ一覧を表示 |
| conda remove -n 環境名 (--all)     | 仮想環境を削除する(--allを付けた場合、全削除)  |


:::note info
**Anaconda Navigatorからパッケージをインストールする場合**
Environments > 環境名 からできる。デフォルトでインストール済み（installed）のパッケージ一覧が出ているので、プルダウンメニューからAllに切り替え。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/20d7372f-04bc-e5d5-0588-db09d94f35ff.png)

検索欄から目的のパッケージを検索する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/f523b707-2730-9afb-1ac5-1b9756a63024.png)

チェックボックスをOnにし、右下のApplyからインストール。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/a43498fa-72c8-7387-350b-96d2347c42d1.png)
:::



# Djangoのプロジェクトを作成
anaconda promptを起動。
cdコマンドでDjangoプロジェクトを作成したいディレクトリに移動。今回は「c:\dev\homedb\」に移動した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/2daff3ef-1b67-b7ea-4bac-96abeb8c32a5.png)

Djangoのプロジェクトを作成。末尾に「.(ドット)」を付けると、現在いるディレクトリ直下に作成できる。
```
django-admin startproject プロジェクト名
```
```:ディレクトリ直下に作成する場合
django-admin startproject プロジェクト名 .
```

成功するとDjangoのプロジェクトに必要なファイル一式が作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/05675f57-b9bb-4290-e3cb-80b1f55246e4.png)



# VS Code側でAnaconda Promptを使えるようにする
メニューバーの、File > Preferences > Settings、または、ショートカットの 「Ctrl+,」で、設定を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/4615d155-6dad-8ff9-0727-11e83d1636b9.png)

検索欄にterminal.integrated.profiles.windowsと入力。Edit in settings.jsonを押し、setting.jsonを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/e066cbfe-b04d-cdf2-2e83-129c31db976d.png)

開いたsettings.jsonの様子。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/bbb2b971-8896-051c-a3e9-a9058bc0f074.png)

設定を追加します。直前の設定の「}」の直後にカンマ(,)を打つことを忘れずに。
また、(ユーザー名)の箇所はご自身のユーザー名に合わせて記入。記入したら保存。
```json:settings.json
{
    "terminal.integrated.profiles.windows": {


        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell"
        },
        "Command Prompt": {
            "path": [
                "${env:windir}\\Sysnative\\cmd.exe",
                "${env:windir}\\System32\\cmd.exe"
            ],
            "args": [],
            "icon": "terminal-cmd"
        },
        "Git Bash": {
            "source": "Git Bash"
        },
        "Anaconda Prompt": {
            "path": "${env:windir}\\System32\\cmd.exe",
            "args": [
                "/K",
                "C:\\Users\\(ユーザー名)\\anaconda3\\Scripts\\activate.bat",
                "C:\\Users\\(ユーザー名)\\anaconda3",
            ],
            "icon": "terminal",
            "color": "terminal.ansiGreen",
        }
    }
}
```

:::note warn
**自身で設定を確認すべき箇所**
argsで設定している3つの値（/Kなど）は、自身の環境に依存する。以下の手順で確認できる。

スタートメニューでanaconda promptを検索。右クリック > ファイルの場所を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/8ead42f9-1bec-0e26-314f-f55529b1d602.png)

anaconda promptのショートカットファイルを右クリック > プロパティ。リンク先の欄のテキストをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/5615ef7b-56f1-bab1-fe94-c9f3a3848098.png)

このテキストは以下のようになっている。
```
%windir%\System32\cmd.exe "/K" C:\Users\(ユーザー名)\anaconda3\Scripts\activate.bat C:\Users\(ユーザー名)\anaconda3
```
argsには、上記のテキスを記していく。より具体的には「%windir%\System32\cmd.exe」より右の値（オプション）を1つずつargsの値に記入する。
:::

:::note info
※設定項目の詳細な説明は下記を参照。
https://qiita.com/take_me/items/47f192a126d75a9264a9
:::

これで、terminalとしてanaconda promptを使えるようになった。
ctrl+@でterminalを開くと、shellの候補にAnaconda Promptが現れている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/64c76b5c-679f-04b7-972b-2d8bdf178996.png)

このままだと、VS Codeを起動する度にshellを切り替える必要があるため、少々手間である。
お好みで、Anaconda Promptをデフォルトに設定する。

再び、Fiie > Preferences > settingsの検索欄へ。terminal.integrated.defaultProfile.windowsを検索。
「Workspace」タブを選択。
プルダウンメニューでAnaconda Promptを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/1ece7b4b-207d-25ac-48db-ab38c468dbe0.png)

以後、デフォルトでAnaconda Promptが開くようになる。
ちなみに、「Workspace」ではなく「Users」を選ぶこともできる。Usersを選んだ場合、設定をユーザー単位で設定する。Workspaceを選んだ場合、プロジェクト単位で設定する。

:::note info
**補足:旧バージョンからの設定方法の変更**
バージョン1.64.2から、設定方法の変更があった。上記は新バージョンで記しているが、旧バージョンとの違いが知りたい場合は下記を参照。
◯ 【VSCode】terminal.integrated.shell.windowsが見つからない！表示されない！場合の対処方法
https://mameco0127.hatenablog.com/entry/2022/06/18/173109
◯ Visual Studio Code のターミナルから Anaconda Prompt を開くようにする (Windows)
https://qiita.com/_meki/items/5b4f06318f1a0986c55c
◯ WindowsでDjango、Anaconda、VSCodeのインストールとDjangoを開発する環境の構築をする
https://www.nblog09.com/w/2020/11/23/windows-django/
:::



# VS Code側で仮想環境を使う
View > Command Pallete、または Ctrl+Shift+Pで、コマンドパレットを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/95564db1-d51d-3787-2042-f2055768b949.png)

python select interpreterと入力。「Python: Select Interpreter」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/e6ea8e15-9b5f-c607-458c-63103a3cf891.png)

使いたい環境名を選択。例では、「Python 3.8.13 ('homedb') ~\anaconda3\envs\homedb\python.exe」。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/cab783bb-0946-8964-9e7d-2d57d7d835a1.png)

見た目の変化はないが、これでVS Codeから作成した仮想環境を使えるようになる。
「仮想環境を使う」と書いたが、厳密には仮想環境のインタプリタ（pythonの実行プログラム）を使うように設定している。



# Djangoのデバッグを設定
VS Codeの左側にある、虫の付いた▷をクリックし、create a launch.json fileをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/68eee11b-62e9-ea1d-0388-04ead97cbc0e.png)

pythonを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/a57489c6-2eb9-6d85-5382-47f244d91f05.png)

Djangoを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/bdfe2b4b-928e-a7ef-d17b-b6bcd3d2150f.png)

自動的にlaunch.jsonが作成される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/0b032b9c-cbb9-d576-51f7-291a582ad623.png)

デバッグの設定は以上。
下記画像にあるように、緑色の▷を押すと、デバッグが行われる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/9e0a934b-1c9b-8db0-a67c-7e7954ef78f9.png)

プロジェクト作成直後は、migrationしていないため、警告が出る。気にしなくて良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/c1b21fa1-4789-2698-b69e-d4cb34e5172e.png)

http://127.0.0.1:8000/にアクセスすると、いつものロケットが飛ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378712/e9ea7812-efc8-7d6e-37a0-d82750e3a47b.png)





# 参考文献
WindowsでDjango、Anaconda、VSCodeのインストールとDjangoを開発する環境の構築をする
https://www.nblog09.com/w/2020/11/23/windows-django/

Django を VSCode で 開発するまでの手順
https://qiita.com/soh506/items/12a5df2d19f1c2c792fe

Windows 10 で Python3 の 仮想環境を作成後VsCodeに認識させてみる
https://qiita.com/tabizou/items/e7a96c4db643049b316c

Anaconda PromptをVSCodeで動かしたメモ(Win10)
https://hotaruveryverykawaii.blog.jp/archives/10549583.html

【VSCode】Pipenv で立ち上げた仮想環境でDjangoを動かす
https://qiita.com/tourokumore/items/7a388b8db588be65501e]

venv: Python 仮想環境管理
https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e