VS Codeで環境変数を使う方法｜tasks.json, launch.json, settings.jsonでの使い方

プログラミング・IT

「VS Codeで開発をするときに、環境変数を使ってビルドやデバッグを設定したい」
「APIキーやデータベース接続情報を安全に管理したい」
「開発環境と本番環境で異なる設定を簡単に切り替えたい」

現代のソフトウェア開発では、環境変数の適切な管理が重要な課題となっています。

特にAPIキーやデータベースの認証情報など、機密情報をソースコードに直接書き込むのは大きなセキュリティリスクです。

VS Codeでは、環境変数を柔軟かつ安全に管理するための豊富な機能が提供されています。tasks.jsonでのビルド設定、launch.jsonでのデバッグ設定、そして.envファイルによる一括管理まで、様々な場面で環境変数を活用できます。

この記事では、VS Codeで環境変数を効果的に使う方法を、実際の設定例とともに初心者にも分かりやすく解説します。

スポンサーリンク

環境変数の基本概念

環境変数とは

環境変数（Environment Variables）とは、オペレーティングシステムが提供する、プログラムに設定情報を渡すための仕組みです。プログラムの実行時に動的に値を変更できるため、異なる環境（開発、テスト、本番）で同じコードを使い回すことができます。

なぜ環境変数を使うのか

セキュリティの向上

// 悪い例：APIキーを直接コードに記述
const apiKey = "sk-1234567890abcdefg";

// 良い例：環境変数から取得
const apiKey = process.env.API_KEY;

環境間での設定の違いを吸収

# 開発環境と本番環境でデータベースURLが異なる場合
import os

# 環境変数から取得（開発時は localhost、本番時は実際のサーバー）
DATABASE_URL = os.environ.get('DATABASE_URL', 'localhost:5432')

設定の柔軟性

同じプログラムを異なる設定で実行できるため、デプロイ時の設定変更が容易になります。

VS Codeでの環境変数活用シーン

  • デバッグ実行時：APIキーやデータベース接続情報の設定
  • ビルドタスク実行時：ビルド設定やパスの指定
  • 拡張機能設定：ツールのパスや動作設定
  • ターミナル環境：開発環境の初期化

tasks.jsonでの環境変数設定

tasks.jsonとは

tasks.jsonは、VS Codeでビルドやスクリプト実行などのタスクを定義するファイルです。プロジェクトの.vscodeフォルダ内に配置し、開発工程で繰り返し実行する作業を自動化できます。

基本的な環境変数設定

シンプルな例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo Environment",
      "type": "shell",
      "command": "echo $MY_VAR",
      "options": {
        "env": {
          "MY_VAR": "Hello World from VS Code"
        }
      }
    }
  ]
}

Windows対応版

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo Environment (Cross Platform)",
      "type": "shell",
      "command": "echo",
      "args": ["${env:MY_VAR}"],
      "options": {
        "env": {
          "MY_VAR": "Hello World from VS Code"
        }
      }
    }
  ]
}

実用的な環境変数活用例

Node.jsビルドタスク

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build for Production",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "options": {
        "env": {
          "NODE_ENV": "production",
          "API_BASE_URL": "https://api.production.example.com",
          "BUILD_TARGET": "dist"
        }
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Build for Development",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "options": {
        "env": {
          "NODE_ENV": "development",
          "API_BASE_URL": "http://localhost:3001",
          "DEBUG": "true"
        }
      }
    }
  ]
}

Pythonテストタスク

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "python",
      "args": ["-m", "pytest"],
      "options": {
        "env": {
          "PYTHONPATH": "${workspaceFolder}/src",
          "TEST_DATABASE_URL": "sqlite:///test.db",
          "DEBUG": "true"
        }
      },
      "group": "test"
    }
  ]
}

既存環境変数の継承

システムの環境変数を継承しつつ、新しい変数を追加したい場合：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build with PATH",
      "type": "shell",
      "command": "make",
      "options": {
        "env": {
          "PATH": "${env:PATH}:/usr/local/custom/bin",
          "CUSTOM_VAR": "my_value"
        }
      }
    }
  ]
}

launch.jsonでの環境変数設定

launch.jsonとは

launch.jsonは、VS Codeでデバッグ設定を定義するファイルです。プログラムの実行やデバッグ時に必要な環境変数を設定できます。

基本的なデバッグ設定

Python デバッグ設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "env": {
        "API_KEY": "sk-development-key-123",
        "DATABASE_URL": "postgresql://user:pass@localhost:5432/devdb",
        "DEBUG": "true",
        "LOG_LEVEL": "DEBUG"
      }
    }
  ]
}

Node.js デバッグ設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node.js App",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "env": {
        "NODE_ENV": "development",
        "PORT": "3000",
        "API_SECRET": "dev-secret-key",
        "MONGODB_URI": "mongodb://localhost:27017/myapp_dev"
      },
      "console": "integratedTerminal"
    }
  ]
}

複数の環境設定

開発環境と本番環境の切り替え

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Development Environment",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "env": {
        "ENVIRONMENT": "development",
        "API_BASE_URL": "http://localhost:8000",
        "DEBUG": "true",
        "DB_HOST": "localhost"
      }
    },
    {
      "name": "Staging Environment",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "env": {
        "ENVIRONMENT": "staging",
        "API_BASE_URL": "https://staging-api.example.com",
        "DEBUG": "false",
        "DB_HOST": "staging-db.example.com"
      }
    }
  ]
}

外部プロセス起動の設定

Docker コンテナでのデバッグ

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker Debug",
      "type": "python",
      "request": "attach",
      "port": 5678,
      "host": "localhost",
      "pathMappings": [
        {
          "localRoot": "${workspaceFolder}",
          "remoteRoot": "/app"
        }
      ],
      "env": {
        "DOCKER_ENV": "development",
        "CONTAINER_NAME": "my-app-dev"
      }
    }
  ]
}

settings.jsonでの環境変数参照

環境変数参照の構文

VS Codeのsettings.jsonでは、${env:変数名}の形式で環境変数を参照できます。

基本的な使用例

Python インタープリターの設定

{
  "python.defaultInterpreterPath": "${env:MY_PYTHON_PATH}",
  "python.linting.pylintPath": "${env:PYLINT_PATH}"
}

Go言語の設定

{
  "go.goroot": "${env:GOROOT}",
  "go.gopath": "${env:GOPATH}",
  "go.toolsGopath": "${env:GOPATH}"
}

実用的な設定例

開発ツールのパス設定

{
  "terminal.integrated.env.linux": {
    "CUSTOM_PATH": "${env:PATH}:/home/user/custom/bin"
  },
  "terminal.integrated.env.osx": {
    "CUSTOM_PATH": "${env:PATH}:/usr/local/custom/bin"
  },
  "terminal.integrated.env.windows": {
    "CUSTOM_PATH": "${env:PATH};C:\\custom\\bin"
  }
}

プロジェクト固有の設定

{
  "eslint.nodePath": "${env:NODE_PATH}",
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "java.home": "${env:JAVA_HOME}",
  "maven.executable.path": "${env:MAVEN_HOME}/bin/mvn"
}

条件付き設定

環境変数の値に応じて異なる設定を適用：

{
  "python.defaultInterpreterPath": "${env:PYTHON_ENV}",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "workbench.colorTheme": "${env:VS_CODE_THEME}"
}

.envファイルの活用

.envファイルとは

.envファイルは、環境変数をキー=値の形式で記述するテキストファイルです。多くのプログラミング言語やフレームワークで標準的に使用されており、VS Codeも自動的に読み込む機能を提供しています。

.envファイルの基本的な書き方

基本的な記述例

# データベース設定
DATABASE_URL=postgresql://user:password@localhost:5432/myapp
DATABASE_MAX_CONNECTIONS=20

# API設定
API_KEY=sk-1234567890abcdefghijklmnopqrstuvwxyz
API_BASE_URL=https://api.example.com/v1
API_TIMEOUT=30

# 開発設定
DEBUG=true
LOG_LEVEL=INFO
NODE_ENV=development

# アプリケーション設定
APP_NAME=MyApplication
APP_VERSION=1.0.0
PORT=3000

コメントとグループ化

# ===================
# Database Configuration
# ===================
DB_HOST=localhost
DB_PORT=5432
DB_NAME=myapp_development
DB_USER=developer
DB_PASSWORD=dev_password_123

# ===================
# External Services
# ===================
REDIS_URL=redis://localhost:6379
ELASTICSEARCH_URL=http://localhost:9200

# ===================
# Security
# ===================
JWT_SECRET=your-super-secret-jwt-key
ENCRYPTION_KEY=32-character-encryption-key-here

Python での .env ファイル活用

python-dotenv を使用

# requirements.txt に追加
# python-dotenv

import os
from dotenv import load_dotenv

# .env ファイルを読み込み
load_dotenv()

# 環境変数を取得
API_KEY = os.getenv('API_KEY')
DATABASE_URL = os.getenv('DATABASE_URL')
DEBUG = os.getenv('DEBUG', 'False').lower() == 'true'

print(f"API Key: {API_KEY}")
print(f"Debug mode: {DEBUG}")

VS Code の Python 拡張機能設定

{
  "python.envFile": "${workspaceFolder}/.env",
  "python.terminal.activateEnvironment": true
}

Node.js での .env ファイル活用

dotenv パッケージを使用

// package.json の dependencies に追加
// "dotenv": "^16.0.0"

require('dotenv').config();

const config = {
  apiKey: process.env.API_KEY,
  databaseUrl: process.env.DATABASE_URL,
  port: process.env.PORT || 3000,
  debug: process.env.DEBUG === 'true'
};

console.log('Config loaded:', config);

VS Code での自動読み込み

// launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node with .env",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js",
      "envFile": "${workspaceFolder}/.env",
      "console": "integratedTerminal"
    }
  ]
}

環境別の .env ファイル管理

ファイル構成例

project/
├── .env.example          # テンプレート
├── .env                  # ローカル開発用（gitignoreに追加）
├── .env.development      # 開発環境用
├── .env.staging          # ステージング環境用
└── .env.production       # 本番環境用（通常はサーバーで管理）

.env.example ファイル

# Copy this file to .env and fill in the actual values

# Database
DATABASE_URL=postgresql://username:password@localhost:5432/dbname

# API Keys (get from https://example.com/api-keys)
API_KEY=your_api_key_here
SECRET_KEY=your_secret_key_here

# Optional settings
DEBUG=true
LOG_LEVEL=INFO
PORT=3000

セキュリティとベストプラクティス

.env ファイルのセキュリティ対策

.gitignore の設定

# Environment variables
.env
.env.local
.env.*.local

# Keep example files
!.env.example
!.env.template

機密情報の管理

# 悪い例：本番環境の情報を .env に直接記述
PROD_API_KEY=sk-live-1234567890
PROD_DB_PASSWORD=super_secret_password

# 良い例：開発用のダミー値または説明を記述
DEV_API_KEY=sk-test-1234567890
DEV_DB_PASSWORD=development_password

環境変数の検証

Python での検証例

import os
from typing import Optional

def get_required_env(key: str) -> str:
    """必須の環境変数を取得（存在しない場合は例外）"""
    value = os.getenv(key)
    if value is None:
        raise ValueError(f"Required environment variable '{key}' is not set")
    return value

def get_optional_env(key: str, default: str) -> str:
    """オプションの環境変数を取得（デフォルト値あり）"""
    return os.getenv(key, default)

# 使用例
try:
    API_KEY = get_required_env('API_KEY')
    DATABASE_URL = get_required_env('DATABASE_URL')
    LOG_LEVEL = get_optional_env('LOG_LEVEL', 'INFO')
except ValueError as e:
    print(f"Configuration error: {e}")
    exit(1)

Node.js での検証例

function getRequiredEnv(key) {
    const value = process.env[key];
    if (!value) {
        throw new Error(`Required environment variable '${key}' is not set`);
    }
    return value;
}

function getOptionalEnv(key, defaultValue) {
    return process.env[key] || defaultValue;
}

// 設定の検証
try {
    const config = {
        apiKey: getRequiredEnv('API_KEY'),
        databaseUrl: getRequiredEnv('DATABASE_URL'),
        port: parseInt(getOptionalEnv('PORT', '3000')),
        debug: getOptionalEnv('DEBUG', 'false') === 'true'
    };
    
    console.log('Configuration loaded successfully');
} catch (error) {
    console.error('Configuration error:', error.message);
    process.exit(1);
}

VS Code 拡張機能による支援

推奨拡張機能

  1. DotENV: .envファイルのシンタックスハイライト
  2. EnvFile: 環境変数ファイルの管理
  3. Thunder Client: API テスト時の環境変数活用

拡張機能設定例

// .vscode/extensions.json
{
  "recommendations": [
    "mikestead.dotenv",
    "rangav.vscode-thunder-client"
  ]
}

トラブルシューティング

よくある問題と解決方法

環境変数が読み込まれない

症状: .envファイルに記述した変数がプログラムで取得できない

原因と対策:

  1. ファイルパスの問題 // launch.json で正しいパスを指定 { "envFile": "${workspaceFolder}/.env" }
  2. 文字エンコーディングの問題
    • .envファイルをUTF-8で保存し直す
    • BOM（Byte Order Mark）を削除する
  3. 記述形式の問題 # 悪い例 API_KEY = "my-key" # スペースあり、クォートあり # 良い例 API_KEY=my-key # スペースなし、クォートなし

Windows での PATH 設定問題

症状: Windows環境でPATH環境変数の設定がうまくいかない

解決方法:

{
  "terminal.integrated.env.windows": {
    "PATH": "${env:PATH};C:\\MyTools\\bin"
  }
}

環境変数の上書き問題

症状: システムの環境変数が期待通りに上書きされない

確認ポイント:

  1. 設定の優先順位を確認
    • launch.json > .env > システム環境変数
  2. VS Code の再起動
  3. 設定の競合を確認

デバッグ方法

環境変数の確認

# Python での環境変数確認
import os
print("All environment variables:")
for key, value in os.environ.items():
    print(f"{key}: {value}")

// Node.js での環境変数確認
console.log("All environment variables:");
console.log(process.env);

VS Code での確認方法

  1. ターミナルでの確認 # Unix系 echo $API_KEY printenv | grep API # Windows echo %API_KEY% set | findstr API
  2. デバッグコンソールでの確認
    • デバッグ実行中にコンソールで環境変数を確認

高度な活用例

Docker との連携

docker-compose.yml との連携

version: '3.8'
services:
  app:
    build: .
    env_file:
      - .env
    environment:
      - NODE_ENV=development
    volumes:
      - .:/app
    ports:
      - "${PORT:-3000}:3000"

VS Code の Docker 拡張での活用

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Docker Run with Env",
      "type": "shell",
      "command": "docker",
      "args": [
        "run",
        "--env-file", ".env",
        "--name", "my-app",
        "my-app:latest"
      ]
    }
  ]
}

CI/CD パイプラインとの連携

GitHub Actions での活用

name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup environment
        run: |
          echo "API_KEY=${{ secrets.API_KEY }}" >> .env
          echo "DATABASE_URL=${{ secrets.DATABASE_URL }}" >> .env

まとめ

VS Codeでの環境変数活用は、現代的な開発において欠かせない技術です。以下のポイントを押さえて効果的に活用しましょう：

設定方法の使い分け

用途設定方法適用範囲
タスク実行時tasks.json の options.envタスク実行時のみ
デバッグ実行時launch.json の envデバッグ実行時のみ
VS Code設定settings.json で ${env:VAR}エディタ全体
アプリケーション全体.env ファイルプロジェクト全体

セキュリティのベストプラクティス

  • 機密情報は .env ファイルに記述し、.gitignore で除外
  • .env.example でテンプレートを提供
  • 環境変数の検証機能を実装
  • 本番環境では適切なシークレット管理サービスを使用

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました