Visual Studio Code におけるDjango開発環境の構築 _3

＃ここに記述するのはVisualStudioCodeのチュートリアル（英文）を引用した内容である。

1_ デバッガ起動プロファイルを作成する#

おそらく、毎回 python manage.py runserver と入力せずに、サーバーを実行してアプリをテストする簡単な方法があります。

VS Codeでカスタマイズされた起動プロファイルを作成することができ、これはデバッグの必然的な練習にも使用されます。

VS CodeでRunビューに切り替えます（左側のアクティビティバー）。To customize Run and Debug create a launch.json file "というメッセージが表示されるかもしれません。これは、デバッグの設定を含む launch.json ファイルがまだないことを意味します。create a launch.json fileのリンクをクリックすると、VS Codeで作成することができます。

リンクを選択すると、VS Code はデバッグの設定を要求してきます。ドロップダウンから Django を選択すると、VS Code は新しい launch.json ファイルに Django の実行コンフィギュレーションを入力します。launch.json ファイルには、いくつかのデバッグ設定が含まれており、それぞれが設定配列の中にある別の JSON オブジェクトになっています。

この設定は、選択された Python インタープリタと args リストの引数を使用して "${workspaceFolder}/manage.py" を実行するように VS Code に指示します。この設定で VS Code のデバッガを起動すると、起動した仮想環境の VS Code Terminal で python manage.py runserver を実行するのと同じになります。(必要なら args に "5000" のようなポート番号を追加できます。) "django": true のエントリは、VS Code に Django ページテンプレートのデバッグを有効にするよう指示します。

Run > Start Debugging メニューコマンドを選択するか、リストの横にある緑色のStart Debugging矢印を選択（F5）して、構成をテストします。

ブラウザを閉じ、終了したらデバッガーを停止します。デバッガーを停止するには、ツールバーのStopボタン（赤い四角）か、Run > Stop Debuggingコマンド（⇧F5）を使用します。

これでいつでも Run > Start Debugging を使ってアプリをテストできるようになり、変更したすべてのファイルを自動的に保存できるメリットもあります。

2_ デバッグは、実行中のプログラムを特定のコード行で一時停止することができます。プログラムが一時停止されると、変数を調べたり、デバッグコンソールパネルでコードを実行したり、「デバッグ」で説明した機能を利用することができます。また、デバッガを実行すると、デバッグセッションを開始する前に、変更されたファイルが自動的に保存されます。

開始する前にターミナルで Ctrl+C を使用して、最後のセクションの最後で実行中のアプリを停止したことを確認してください。あるターミナルでアプリを実行したままにしておくと、そのアプリはポートを所有し続けることになります。その結果、同じポートを使ってデバッガーでアプリを実行すると、元の実行中のアプリがすべてのリクエストを処理し、デバッグ対象のアプリのアクティビティは表示されず、プログラムもブレークポイントで停止しなくなります。つまり、デバッガーが動作していないようであれば、そのアプリの他のインスタンスがまだ実行されていないことを確認してください。

3_ <フォルダ名>/urls.pyで、urlpatternsのリストにルートを追加します。

path("<フォルダ名>/<name>", views.hello_there, name="hello_there")を追加します。

path の最初の引数は、name という変数文字列を受け入れるルート "<フォルダ名>/" を定義しています。この文字列は、path の第二引数で指定された views.hello_there 関数に渡されます。

views.py の内容を以下のコードに置き換えて、デバッガでステップスルーできるような hello_there 関数を定義してください。

import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return HttpResponse(content)

URLルートで定義されたname変数をhello_there関数の引数として与えています。コードのコメントにあるように、アプリに対するさまざまな攻撃を避けるために、ユーザーが提供する任意の情報を常にフィルタリングしてください。今回のコードでは、引数nameに文字のみを含むようにフィルタリングすることで、制御文字やHTMLなどのインジェクションを回避しています。(次の節でテンプレートを使う場合、Django は自動的なフィルタリングを行うので、このコードは必要ありません)。

次のいずれかの方法で、 hello_there 関数のコードの最初の行 (now = datetime.now()) にブレークポイントを設定します。

その行にカーソルがある状態で、F9キーを押す。

その行にカーソルがある状態で、［実行］＞［ブレークポイントの切り替え］メニューコマンドを選択する、または。

行番号の左側の余白を直接クリックする（そこにカーソルを置くと、薄くなった赤い点が表示されます）。

ブレークポイントが左マージンに赤い点として表示されます。

出力は「Python Debug Console」ターミナルに表示されます。ブラウザを開き、

http://127.0.0.1:8000/<フォルダ名>/VSCode

に移動します。ページがレンダリングされる前に、VS Codeは設定したブレークポイントでプログラムを一時停止します。ブレークポイント上の小さな黄色い矢印は、それが次に実行されるコードの行であることを示します。

VS Codeウィンドウの左側には、nowなどのローカル変数やnameなどの引数を表示する「変数」ペインが表示されます。その下には、ウォッチ、コールスタック、ブレークポイントのペインがあります（詳しくはVS Codeのデバッグを参照してください）。Locals］セクションで、さまざまな値を展開してみてください。また、値をダブルクリック（またはEnter）して変更することもできます。ただし、now などの変数を変更すると、プログラムが壊れる可能性があります。開発者は通常、コードがそもそも正しい値を生成していなかった場合にのみ、値を修正するために変更を行います。

Django チュートリアル: デバッグ中の VS Code でのローカル変数と引数

プログラムが一時停止しているとき、デバッグコンソールパネル (ターミナルパネルの "Python Debug Console" とは異なります) では、プログラムの現在の状態を使って、式を試したりコードの断片を試したりすることができます。例えば、now = datetime.now()という行を踏み越えたら、異なる日付/時刻形式を実験するかもしれません。エディタでnow.strftime("%A, %d %B, %Y at %X")と表示されるコードを選択し、右クリックしてDebug.Evaluateを選択します。そのコードをデバッグコンソールに送信し、そこで実行するために「Evaluate」を選択します。

now.strftime("%A, %d %B, %Y at %X")

例　'2018年09月07日(金) 07:46:32'

となります。

ヒント: デバッグコンソールには、ターミナルに表示されないようなアプリ内の例外も表示されます。たとえば、Run ビューの Call Stack 領域に「Paused on exception」メッセージが表示された場合、Debug Console に切り替えて例外メッセージを確認します。

その行をデバッグコンソールの下部にある > プロンプトにコピーし、書式を変更してみてください。

now.strftime("%a, %d %B, %Y at %X") とします。

'Fri, 07 September, 2018 at 07:46:32' とします。

now.strftime("%a, %d %b, %Y at %X")

'Fri, 07 Sep, 2018 at 07:46:32' となります。

now.strftime("%a, %d %b, %y at %X")

'Fri, 07 Sep, 18 at 07:46:32' となります。