「VS Codeのタスクランナーで毎週数時間を節約できているのに、ほとんど誰も存在を知らない」——XDA Developersは2026年5月17日、こんなタイトルでVS Code標準搭載のタスクランナー機能を紹介しました。tasks.json に一度コマンドを定義するだけで、毎日のターミナル作業の多くがエディタ内のワンクリック実行に置き換わると伝えています。
毎日繰り返す「同じコマンドの手入力」がワンクリックに変わる
最近の開発環境は、たとえ比較的シンプルなプロジェクトであっても複数のターミナル、パッケージマネージャ、ローカルサーバ、SSHセッション、AIツールなどが絡み合いがちだと紹介されています。多くの開発者が毎日まったく同じコマンドを打ち直しているのが現状だと報じられています。
タスクランナーの中核は、こうした繰り返しを tasks.json に一度書いておくだけで、ショートカット・メニュー・デバッグ実行から呼び出せる再利用可能なアクションへ変換する発想です。エディタから離れずに実行できる具体例として、次のような作業が挙げられています。
npm run devでローカル開発サーバを起動するdocker-compose upでローカルコンテナ環境を立ち上げる- ローカルデータベースのマイグレーションを実行する
- コミット前にリンターを走らせ、
npm run buildでアセットをバンドルする - 編集したソースをカスタムフラグでコンパイルし、生成されたバイナリを即実行する
ターミナルを開いてディレクトリを移動し、スクリプトを手動で叩く——という一連の流れがエディタ内のワンクリックで完結する点が大きな違いだと伝えられています。
数分で完了——tasks.json を作って「Tasks: Run Task」を呼ぶだけ
セットアップは難しくないと紹介されています。タスクはプロジェクトごとに設定する仕組みで、まず対象プロジェクトをVS Codeで開き、Command Paletteから「Tasks: Configure Task」を検索します。実行すると、まだ設定ファイルが存在しないプロジェクトでは .vscode フォルダの中に tasks.json が自動生成されます。
基本構成は次のように非常にシンプルです。
{
"version": "2.0.0",
"tasks": [
{
"label": "Start Dev Server",
"type": "shell",
"command": "npm run dev"
}
]
}
各フィールドの役割は以下の通りです。
| フィールド | 役割 |
|---|---|
label | VS Code内に表示されるタスク名（自由に命名可） |
type | コマンドの実行方法。通常は shell を指定し、普段使っているターミナルと同じ挙動になります |
command | 実際に実行するシェルコマンド |
ファイルを保存すれば、Command Paletteで「Tasks: Run Task」を呼び出すだけで定義済みタスクが一覧表示され、選択した瞬間に統合ターミナルで実行されると説明されています。これだけで最初のワークフロー自動化が完了するとされています。
複数タスクをまとめて起動できる仕組みも用意
XDA Developersは、タスクランナーが複数のタスクをひとつの大きなワークフローとして組み合わせられる点にも触れています。小さな再利用可能タスクを複数定義しておき、それらをまとめて実行する親タスク（compound tasks）を用意することで、サービスを一つずつ手で起動する手間を省ける形だと紹介されています。
コンパイル・キャッシュクリア・アプリ起動といった一連の動作を、ひとつのコマンドにチェーンすることも可能だと伝えられています。フロントエンドサーバ・バックエンドAPI・データベースコンテナ・ファイルウォッチャーなど、フルスタックプロジェクトで同時に動かす必要があるサービスを束ねられる例が示されています。なお、複数タスクを束ねる具体的なJSON構成例の詳細は出典元を参照してください。
チーム全員のローカル手順を統一できる
タスク設定はテキストファイル（.vscode/tasks.json）として保存されるため、Gitにコミットしてリポジトリへ含められる点もポイントとして取り上げられています。これによりチーム全員が、ローカルビルド・テスト・リンターをまったく同じ手順で実行できるようになると説明されています。
設定ファイルそのものをコードと一緒に管理することで、ローカル手順をチームで揃えられる点が利点として紹介されています。VS Codeを日常的に使っていて反復作業の多いプロジェクトに関わっているなら、いつものコマンドを tasks.json に書き出すだけで、XDA Developersが挙げる「毎週数時間（hours every week）」のような節約効果が見込めると伝えられています。
problemMatcherやinputsまで使うとタスクは“もう一段”賢くなる
元記事で紹介されたlabel／type／commandは基本の3要素ですが、group、problemMatcher、presentation、options、dependsOn、inputsといった高度なプロパティを組み合わせると、タスクは単なるコマンド実行にとどまらない自動化基盤になります。
主な拡張プロパティ
- type: shellはシェル経由で実行されパイプやリダイレクトが使え、processはシェルを介さず直接プロセスとして実行されるため、シェルインジェクションの懸念も避けられます。
- problemMatcher / group:
"problemMatcher": "$msCompile"や"group": { "kind": "build", "isDefault": true }のように指定することで、ビルド出力をパースして問題パネルに表示したり、既定のビルドタスクとして登録したりできます。 - inputs:
pickStringを使えば実行時にdevelopment／staging／productionといった選択肢を提示し、${input:environment}として引数に渡せます。デプロイ先や認証情報を都度尋ねるインタラクティブなタスクが定義できます。
VS Code単体では足りない場面を埋める周辺拡張とAPI
タスクランナーは強力ですが、tasks.jsonを毎回手書きするのが面倒な場合や、別のタスクツールと併用したい場合に役立つ拡張も2026年時点で揃ってきています。
package.json、Makefile、Taskfile.yml、tasks.jsonに定義されたスクリプトをサイドバーパネルに実行ボタン付きで一覧表示し、ターミナルを開いてスクリプト名を打つより速く起動できます。
Goエコシステムで人気のTaskにも専用拡張があり、Taskfileをツリービューに表示してダブルクリックで実行できる設定が用意されています。
拡張機能側から自動的にタスクを供給する仕組みも整っています。通常はユーザーがtasks.jsonにタスクを定義しますが、Task Providerを実装した拡張があると、Tasks: Run Task実行時にアクティブな全Task Providerがタスクを提供する仕組みになっています。ワークスペースを走査してMakefileやRakefileの存在を検知し、対応するビルドタスクを自動生成するといった使い方が可能で、設定ファイルを書かずに恩恵を受けられる場面が増えています。
Q&A
Q. tasks.json はどこに置けばよいですか？
プロジェクト内の .vscode フォルダ内に配置します。Command Paletteから「Tasks: Configure Task」を実行すると、フォルダごと自動生成されると紹介されています。
Q. 個人的に試したいコマンドはチーム共有用の tasks.json に混ぜるべきですか？
.vscode/tasks.json はGitにコミットすればチーム全員に配布される設定ファイルになると説明されています。チーム共通化したいビルド・テスト・リンターのタスクをここに記述するという使い方が紹介されています。具体的な分離手順は公表されている範囲では明らかにされていません。
Q. シンプルなコマンドだけでなく、複数サービスの同時起動もできますか？ はい。複数のタスクを束ねて一度のアクションで起動できる仕組み（compound tasks）が用意されていると紹介されています。フロントエンド・バックエンド・データベース系の処理など、毎回複数のコマンドを順番に打っている作業をひとまとめにできるとされています。
出典
- XDA Developers — VS Code's task runner saves me hours every week, but almost nobody knows it exists
- Medium (Jason Yang) — Mastering VS Code tasks.json: A Comprehensive Configuration Guide
- Mintlify / VS Code Docs — Tasks - Visual Studio Code
