"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

DjangoのWeb開発・デバッグにVisual Studio Codeを利用する:Windows10・python3

開発環境「Visual Studio Code」(以後VsCode)で、python3+djangoの開発と、Webアプリケーションの実行・デバッグのやり方を確認します。

f:id:arakan_no_boku:20190425233546j:plain

 

前提の説明

 

OSは、Windows10です。

・PCにAnacondaがインストールされていること。

Djangoもインストールされていること。

VsCodeのインストールと、Python・Anacondaのエクステンションのインストールなど、こちらの記事の手順が終わっていること。

arakan-pgm-ai.hatenablog.com

以上が、今回の前提です。

Djangoのインストールがまだの場合は、こちらを参考にして、やっておいてください。

arakan-pgm-ai.hatenablog.com

 

特別な設定変更とかは別にいりません

 

Python単体の実行・デバッグができる環境になってれば、特にdjango用に何かしないといけないことはないです。

気をつけるのは、ファイル>フォルダを開くの時に指定するフォルダくらいですかね。

Djangoはプロジェクトを作る時に、「django-admin startproject hello」などとやって、プロジェクトフォルダを生成して開発するスタイルです。

例えば、上記だとカレントフォルダに「hello」というフォルダができて、その下に「manage.py」というファイルがおかれてます。

djangoの場合は、このmanage.pyを使って動作確認用のサーバーを動かすので、開いておくフォルダ=開発対象のプロジェクトフォルダになります。

本格的にやる時にはどうか・・ってのはありますが、今のところ、自分的に気に入っている手順は、プロジェクトを生成するところまでは、普通にコマンドプロンプトPowerShellなどでやっておき、VsCodeではその生成したプロジェクト(または既存プロジェクト)のフォルダを開いて作業するパターンです。

 

Djangoアプリケーションの実行

 

何か、Djangoアプリケーションを実行してみます。

適当なdjangoプロジェクトを選んでフォルダを開きます。

既存のプロジェクトがないときは、以下を参考にdjangoプロジェクトの生成だけやってておいてもらえれば、手順はできます。。

arakan-pgm-ai.hatenablog.com

続いて、コマンドパレットを開きます。

Ctrl+Shift+P を押すか、右クリックメニューの「コマンドパレット」です。

ここで「pythonインタープリターを選択」を選び、djangoをインストールしている仮想環境を選択します。

f:id:arakan_no_boku:20190427102235j:plain

あとは。

ターミナル>新しいターミナルで、ターミナルを開きます。

f:id:arakan_no_boku:20190427102440p:plain

以下のコマンドを打ち込んで、djangoサーバーを動かします。

python manage.py runserver

で。

こういう表示になれば動いてます。

f:id:arakan_no_boku:20190427102737p:plain

あとはブラウザを開いて、URLでアクセスします。

自分は今回、以下の記事の時の環境を使ってます。

arakan-pgm-ai.hatenablog.com

なので、「http://localhost:8080/demo」みたいな感じでアクセスしました。

f:id:arakan_no_boku:20190427103022p:plain

動いてますね。

じゃ、ターミナルで「Ctrl+C」を入力して、終わらせときます。

 

デバッグの手順です

 

WebアプリケーションのDebugの手順です。

といっても。

動かし方が違うだけですけどね。

メニューの「デバッグデバッグの開始」で、以下のリストを開いて、「Django」を選びます。

f:id:arakan_no_boku:20190427103525p:plain

そうすると、デバッグモードでさっきの実行時と同じようにサーバーが立ち上がるので、動かすのはブラウザでURLをたたく同じ方法でOKです。

ブレイクポイントを仕掛けたい行を選択して、F9キーを押します。

f:id:arakan_no_boku:20190427103825p:plain

ブレイクポイント行に赤丸がつきます。

あとは、普通にブラウザで動かすと、ブレイクポイントで止まりますから、ステップ実行して変数等の値を確認してデバッグをすればいいです。

f:id:arakan_no_boku:20190427104942p:plain

 

ちなみに、アイコンですが。

f:id:arakan_no_boku:20190427012235j:plain

左から。

  • 続行
  • ステップオーバー
  • ステップイン
  • ステップアウト
  • 再起動
  • 停止

となっています。

いい感じですね。