tasks.jsonでモノレポの起動をワンコマンド化する方法

はじめに

モノレポの開発をしていると、ローカル起動するときに、フロントエンド、バックエンドの起動をそれぞれやらないといけないのが面倒だと感じてました。VS Code のtasks.jsonを設定すれば、1 回の起動だけで、ローカルに必要な起動をすべて完了させることができます。

tasks.json とは

tasks.json は、Visual Studio Code のタスク実行機能（Tasks）をカスタマイズ・自動化する設定ファイルです。
これを設定すれば、頻繁に実行するコマンド（ビルド、開発サーバー起動、テストなど）を GUI またはショートカットで簡単に呼び出せるようになります。

配置場所

この記事の例では、以下のフォルダ構成で、Next.js と Python で構成されたアプリを想定します。tasks.jsonは.vscode配下に配置します。

/
├─ apps/
│  ├─ frontend/
│  └─ backend/
├─ packages/
│  └─ shared/
└─ .vscode/
   └─ tasks.json

tasks.json の設定

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    // --- Next.js Task ---
    {
      "label": "frontend",
      "type": "shell",
      "command": "pnpm dev",
      "options": {
        "cwd": "apps/frontend"
      },
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    },

    // --- Python Backend Task ---
    {
      "label": "backend",
      "type": "shell",
      "command": "uvicorn main:app --reload",
      "options": {
        "cwd": "apps/backend"
      },
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    },

    // --- Both in Parallel ---
    {
      "label": "dev:all",
      "dependsOn": ["frontend", "backend"],
      "dependsOrder": "parallel",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always"
      }
    }
  ]
}

上記のファイルを設定して、コマンドパレットを開きます。（Cmd/Ctrl + Shift + P）
タスク:タスクの実行を選択すると、dev:all, backend, frontend のタスクが表示されます。これらが tasks.json で設定したタスクに対応します。

タスク名	内容
frontend	pnpm dev 実行で Next.js 開発サーバー起動
backend	uvicorn で Python アプリ起動
dev:all	両者を 並列で実行するメインタスク。

今回は "dev:all"を下記のプロパティで設定しているので、Ctrl+Shift+B でも実行できます。

tasks.json

"group": {
  "kind": "build",
  "isDefault": true
}

まとめ

tasks.jsonでモノレポの開発をするときの、ローカル起動が楽になりました。この設定は、Cursor でも使えるので、活用してみてください。