6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

DjangoをVSCode+Anacondaで開発(Windows)

Last updated at Posted at 2022-08-31

動機

データ分析や機械学習が絡む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

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

conda activate 環境名

成功すると、プロンプト上でもbaseから環境(例だとhomedb)に切り替わった事が確認できる。
image.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を付けた場合、全削除)

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

image.png

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

image.png

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

image.png

Djangoのプロジェクトを作成

anaconda promptを起動。
cdコマンドでDjangoプロジェクトを作成したいディレクトリに移動。今回は「c:\dev\homedb\」に移動した。
image.png

Djangoのプロジェクトを作成。末尾に「.(ドット)」を付けると、現在いるディレクトリ直下に作成できる。

django-admin startproject プロジェクト名
ディレクトリ直下に作成する場合
django-admin startproject プロジェクト名 .

成功するとDjangoのプロジェクトに必要なファイル一式が作成される。
image.png

VS Code側でAnaconda Promptを使えるようにする

メニューバーの、File > Preferences > Settings、または、ショートカットの 「Ctrl+,」で、設定を開く。
image.png

検索欄にterminal.integrated.profiles.windowsと入力。Edit in settings.jsonを押し、setting.jsonを開く。
image.png

開いたsettings.jsonの様子。
image.png

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

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",
        }
    }
}

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

スタートメニューでanaconda promptを検索。右クリック > ファイルの場所を開く。
image.png

anaconda promptのショートカットファイルを右クリック > プロパティ。リンク先の欄のテキストをコピー。
image.png

このテキストは以下のようになっている。

%windir%\System32\cmd.exe "/K" C:\Users\(ユーザー名)\anaconda3\Scripts\activate.bat C:\Users\(ユーザー名)\anaconda3

argsには、上記のテキスを記していく。より具体的には「%windir%\System32\cmd.exe」より右の値(オプション)を1つずつargsの値に記入する。

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

これで、terminalとしてanaconda promptを使えるようになった。
ctrl+@でterminalを開くと、shellの候補にAnaconda Promptが現れている。
image.png

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

再び、Fiie > Preferences > settingsの検索欄へ。terminal.integrated.defaultProfile.windowsを検索。
「Workspace」タブを選択。
プルダウンメニューでAnaconda Promptを選択。
image.png

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

補足:旧バージョンからの設定方法の変更
バージョン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

python select interpreterと入力。「Python: Select Interpreter」を選択。
image.png

使いたい環境名を選択。例では、「Python 3.8.13 ('homedb') ~\anaconda3\envs\homedb\python.exe」。
image.png

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

Djangoのデバッグを設定

VS Codeの左側にある、虫の付いた▷をクリックし、create a launch.json fileをクリック。
image.png

pythonを選択。
image.png

Djangoを選択。
image.png

自動的にlaunch.jsonが作成される。
image.png

デバッグの設定は以上。
下記画像にあるように、緑色の▷を押すと、デバッグが行われる。
image.png

プロジェクト作成直後は、migrationしていないため、警告が出る。気にしなくて良い。
image.png

http://127.0.0.1:8000/にアクセスすると、いつものロケットが飛ぶ。
image.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

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?