【初心者でも分かる】VSCodeのtasks.jsonでタスク自動化する方法を解説

2023 5/02

May 2, 2023

［記事内には広告が含まれています］

こんにちは、現役エンジニアの inno_tech です。

Visual Studio Code(以下、VSCode) では、所定のタスクを自動実行する機能があることをご存じでしょうか?
うまく使いこなせば、ビルドやデプロイといった決まった作業を自動化し、開発を効率化できます。

この自動化したいタスクを定義するファイル が tasks.json の役割です。

今回は、VSCodeで tasks.json を使ったタスク自動化についてまとめました。

記事の最後では、C言語/C++のビルドを行うtasks.jsonサンプルも用意しています。

それではご覧ください。

本記事は ubuntu20.04LTSの環境で検証しています。

tasks.json とは？

まず初めに最も簡単なtasks.jsonのサンプルがこちらです。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

これをVSCode上で実行した結果がこちらです。
echo Hello というコマンドが実行され、ターミナル上に「Hello」と表示されました。

例からわかるように、tasks.jsonはタスク(コマンド)を定義しておくためのファイルです。
そして、指定したタスクをVSCodeが呼び出すことでタスク自動化を実現します。

VSCode上でどのように実行するかは、この後説明します。

tasks.json を使ったタスク自動化

tasks.json の作成

まずはtasks.jsonを作成する方法を説明します。

VSCodeでワークスペースを開いた状態で、Ctrl+Shift+Pを押下してコマンドパレットを開きます。
(GUIメニューからアクセスする場合は「表示 > コマンドパレット」と同様 )

コマンドパレットで「Task」と入力すると、「タスク: タスクの実行」が候補として表示されるのでクリックしてください。

次に「タスクを構成する」の項目をクリックします。

さらに「テンプレートからtasks.jsonを作成」をクリックします。

「Others」のテンプレートを選択します。

すると./vscode/tasks.jsonファイルが自動生成されます。
記事の前半にある最も簡単なサンプルと同じ内容ですね。

以上でtasks.jsonを作成できました。続いて、tasks.jsonを編集し、タスク自動化の設定を行います。

tasks.json からタスクを実行

続いて、tasks.jsonに定義されたタスクを実行する方法を説明します。

先ほどと同様に、VSCodeでワークスペースを開いた状態でCtrl+Shift+Pを押下してコマンドパレットを開きます。

コマンドパレットで「Task」と入力すると、「タスク: タスクの実行」が候補として表示されるのでクリックしてください。

先ほどとは異なり、「echo」というタスクが追加されているので、これをクリックします。

続いて、「タスクの出力をスキャンせずに実行」をクリックします。

すると、画面下部にあるターミナル上でコマンドが実行されます。

以上のように、「タスク: タスクの実行」 > 「実行したいタスクを選択」とすれば、任意のタスクを実行できます。

ビルドコマンドを書いてビルド自動化をしたり、環境変数を設定するコマンドを書いたり、色々応用できるよ。

サンプル | tasks.json によるビルド(C言語/C++)

ここまででtasks.jsonを作成し実行できましたが、まだどう使いこなすかイメージが湧かないと思います。

今回は特別に、C言語のプログラムのビルドを行うtasks.jsonのサンプルを公開します。

サンプルでは、makefileを利用したビルドを想定しています。

C言語のビルドに関しては、下記の記事にまとめているので復習が必要な方はご確認ください。

さて、早速ですがサンプルのtasks.jsonがこちらです。
このサンプルでは、「prerun_make」「build」「build_debug」「clean」の4つのタスクを定義しています。

{
    "version": "2.0.0",
    "tasks": [
        {
            // build前に実行したい処理
            "label": "prerun_make",
            "type": "shell",
            "command": "echo",
            "args": ["make を実行します"],
            "options": {
            }
        },
        {
            // release build を実行
            "label": "build",
            "type": "shell",
            "command": "make",
            "args": [""],
            "options": {
                "cwd": "${workspaceFolder}" // 作業ディレクトリ
            },
            "dependsOn": [
                "prerun_make",              // 実行時の依存タスク
            ]
        },
        {
            // debug build を実行
            "label": "build_debug",
            "type": "shell",
            "command": "make",
            "args": ["debug"],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "dependsOn": [
                "prerun_make",
            ]
            
        },
        {
            // clean を実行
            "label": "clean",
            "type": "shell",
            "command": "make",
            "args": ["clean"],
            "options": {
                "cwd": "${workspaceFolder}"
            }
        }
    ]
}

ちなみにコマンドパレット上ではこのように複数のタスクが表示されるようになります。

解説 | prerun_make

まずはprerun_make のタスクから説明します。

最初の例では command キー内に引数も含めていましたが、prerun_makeではargs キーで引数を渡す表現に変わっています。
最終的に実行されるコマンドは echo "make を実行します" となります。

commandキー自体に引数を含めるか、argsキーを使うかはケースバイケースなので、使いやすい方で運用すればよいと思います。

{
    "version": "2.0.0",
    "tasks": [
        {
            // build前に実行したい処理
            "label": "prerun_make",
            "type": "shell",
            "command": "echo",
            "args": ["make を実行します"],
            "options": {
            }
        }
    ]
}

解説 | build

続いて、build のタスクを説明します。

{
    "version": "2.0.0",
    "tasks": [
        {
            // release build を実行
            "label": "build",
            "type": "shell",
            "command": "make",
            "args": [""],
            "options": {
                "cwd": "${workspaceFolder}" // 作業ディレクトリ
            },
            "dependsOn": [
                "prerun_make",              // 実行時の依存タスク
            ]
        }
    ]
}

optionキー cwd の追加

cwd はコマンドを実行する際の作業ディレクトリを設定できます。

dependsOnキーの追加

dependsOnキーで「prerun_make」のタスクを追加しています。
dependsOn はこのタスクを実行する際の依存関係を示す役割を意味します。

つまり、タスク「build」の実行前に「prerun_make」が実行されるということです。

あるタスクの実行前に、実行しておきたいコマンドがある場合 dependsOn に指定するとよいでしょう。
dependsOnには複数のタスクも指定可能です。うまく活用すれば、複雑なタスクも自動化できます。

依存関係を使って、ビルド ⇒ 環境変数の設定 ⇒ プログラムの実行タスクというように、一連のタスクを連携できるよ。

他のタスク「build_debug」「clean」はargsの引数が変わっただけです。
ここまでの解説で理解できるため、説明を省略します。

tasks.json 早見表

tasks.jsonでよく使用するキーとその役割を早見表にしました。
(参考 | https://code.visualstudio.com/docs/editor/tasks#_custom-tasks)

キー名	役割
label	VSCode上で表示されるタスク名を指定します。
type	shell または process を指定します。 shell \| command をシェルコマンドとして実行します。 process \| command を実行するプロセスとして解釈します。
command	実行するコマンドを定義します。
args	command に渡す引数を定義します。
dependsOn	タスク実行の依存関係を定義します。
options – cwd	タスク実行時の作業ディレクトリを定義します。
options – env	タスク実行時の環境変数を定義します。
options – shell	デフォルトのシェルを指定します。

tasks.json キー名一覧表

また、他のページにもVSCode を使ったテクニックをまとめているので参考にどうぞ。

最後に

今回は、VSCodeのtasks.jsonの使用方法をまとめました。
毎回コマンドラインで打つような作業はなるべく自動化し、開発を楽にしていきましょう。

Visual Studio Codeは意外と奥が深いので、書籍を読むと目から鱗なテクニックが見つかりますよ。

リンク

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォローかにほんブログ村のどちらかしてくれたら嬉しいよ!

【初心者でも分かる】VSCodeのtasks.jsonでタスク自動化する方法を解説

tasks.json とは？

tasks.json を使ったタスク自動化

tasks.json の作成

tasks.json からタスクを実行

サンプル | tasks.json によるビルド(C言語/C++)

解説 | prerun_make

解説 | build

tasks.json 早見表

最後に

コメント / ご要望

コメントするコメントをキャンセル

【初心者でも分かる】VSCodeのtasks.jsonでタスク自動化する方法を解説

tasks.json とは？

tasks.json を使ったタスク自動化

tasks.json の作成

tasks.json からタスクを実行

サンプル | tasks.json によるビルド(C言語/C++)

解説 | prerun_make

解説 | build

tasks.json 早見表

最後に

コメント / ご要望

コメントする コメントをキャンセル

コメントするコメントをキャンセル