最近Django
の記事ばかり書いていますが、今回もそういう記事です。
現在、Django
とTypeScript
を使って、ちょっとしたサイトを作っています。
Visual Studio Code
を使って開発しており、Django
のデバッグはF5
キーからできるため、重宝しています。
しかし、TypeScript
はtsc
というツールでビルドしてからJavaScript
に変換しているため、Django
デバッグ前にビルドする必要があります。*1
つまり、デバッグする際には
という手順を踏んでおり、前者が非常に面倒です。
そこで、それを自動化してみたので、紹介します。
バージョン
種類 | バージョン |
---|---|
Visual Studio Code | 1.28.2 |
node.js | 8.12.0 |
Python | 3.7.0 |
Django | 2.1.1 |
TypeScript | 3.1.1 |
前提
TypeScript
がインストールされているtsconfig.json
の設定が終わっている(tsc
コマンドが正常に動く状態にある)Django
のデバッグがVSCode
から行える
VSCodeタスクの作成
Visual Studio Code
には、いろいろ設定があるのですが、今回はタスクというものを使います。
Ctrl + Shift +P
で、コマンドパレットを開き、task
と入力すると、「タスク:タスクの構成」というものが出てくるので、選びます。
選択すると、「tsc: ビルド」という項目が出てくるので、選びます。すると、
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "…\\ts\\tsconfig.json", "problemMatcher": [ "$tsc" ] } ] }
というような、tasks.json
というファイルができます。(tsconfig
のパスは環境によって異なる)
この状態で、「タスクの実行」を選択し、「tsc: ビルド」を選択すると、VSCode
のタスクとして、ビルドが実施されるようになります。
タスクをDjangoビルドから呼び出す
次に、Django
ビルド時に、上記タスクを呼び出すようにします。
tsc: ビルドにラベルを振る
Django
の設定を行う前に、先ほど作ったタスクにlabel
を振ります。
tasks.json
を開き、
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "type": "typescript", "label": "build_ts", "tsconfig": "…\\ts\\tsconfig.json", "problemMatcher": [ "$tsc" ] } ] }
のように、「"label"」を追加します。値は任意でよいです。すると、
タスク名の部分に、設定したラベル名が表示されるようになります。
デバッグ設定
ラベル名設定後、launch.json
を開き、Python: Django
にpreLaunchTask
を追加します。。
{ "name": "Python: Django", "type": "python", "request": "launch", "program": "${workspaceFolder}/manage.py", "console": "integratedTerminal", "args": [ "runserver", "--noreload", "--nothreading" ], "preLaunchTask": "build_ts", "django": true },
preLaunchTask
には、先ほどlabel
で設定した名称を入力します。
Djangoデバッグ実行
label
の名前とpreLaunchTask
の名前が一致していると、デバッグ実行時に
というような表示が出てきて、タスク実行を介してTypeScript
のビルドが実行され、その後Django
のデバッグが始まります。
ラベル名が誤っていると、エラーが出てくるのでわかりやすいです。
やり方を探している点
Django
デバッグ時、TypeScript
もデバッグできないのか、試している最中です。
それができると、さらに開発効率が上がるのに…という感じです。
現状、ブラウザでJavaScript
自体をデバッグしているのですが、VSCode
だけでデバッグが賄えるなら、それに越したことはないと思っています。
もしかしたら、Debugger for Chrome
拡張機能でできるのかもしれないので、後で試してみようと思っています。
おわりに
Web開発始めたばかりで、しかも手探りですが、ちょっとずつ勝手がわかってきた感じです。
業務アプリ的なものをWeb作る際の知見蓄積になっていて、すごくいろんなことが吸収できています。
まだまだ学ぶことは多いので、すごく楽しめています。今後も学んだことは発信します。