こんにちは！日々のコーディング、本当にお疲れ様です。
新しいプログラミング言語を覚えたり、便利なライブラリを見つけたりすると、何か作りたくてワクワクしますよね。でも、開発が進むにつれて「APIキーやパスワードをどこに書けばいいんだろう？」「うっかりGitHubに秘密の情報をアップロードしちゃったらどうしよう…」と、不安になったことはありませんか？
この記事にたどり着いたということは、まさにその「機密情報の管理」という、プログラミングにおいて避けて通れないけれど、すごく大切な壁に直面しているのだと思います。
大丈夫。今日は、世界中のプロフェッショナルが使っているVS Codeの仕組みを使って、「絶対に機密情報をコードに含めない、安全でスマートな開発環境」の作り方を、優しく丁寧にお伝えします。
これをマスターすれば、明日からもう「やばい、APIキーを公開しちゃったかも…！」と冷汗をかく夜とはおさらばできますよ。一緒にしっかりと学んでいきましょう！
—
1. なぜ「機密情報」をコードに直接書いてはいけないのか？
私たちが普段作るアプリでは、外部のサービス（例えば、AIのAPI、データベース、クラウドストレージなど）と通信するために「APIキー」や「パスワード」を使います。
ここで絶対にやってはいけないのが、ソースコードの中に直接文字として書き込んでしまうことです。
// 絶対にやってはいけないNGな例
const apiKey = “sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxx”; // ソースコードに直接書いちゃダメ！
なぜダメなのか？理由はシンプルで、私たちが書いたコードはGitというバージョン管理システムを使って、GitHubなどのリモートリポジトリに保存（プッシュ）するからです。
もし、プライベートなリポジトリのつもりが「パブリック（世界中に公開）」設定になっていたり、チームメンバー以外の誰かに見られてしまったりしたら、あなたのAPIキーは一瞬で世界中にばらまかれてしまいます。悪意ある第三者に勝手に高額なAIサービスを使われて、高額な請求が届く……なんて事故も実際に起きています。
だからこそ、「コードと機密情報を完全に切り離して管理する」というルールが、プロの世界では絶対の常識なのです。
—
2. 第一の防壁：`.env`ファイルと `.gitignore` の正しい関係
コードに直接書けないなら、どこに書くのか？
その答えが、プロジェクトのルートディレクトリに置く `.env`（ドット・エンヴ）ファイル です。
`.env`ファイルを作ってみよう
プロジェクトフォルダのいちばん上の階層（ルート）に `.env` という名前のファイルを作り、以下のように「キー＝値」の形式で機密情報を書きます。
.envファイルの中身（このファイルは絶対にGitに管理させません）
DATABASE_PASSWORD=super_secret_password_123
API_KEY=sk-proj-abcdef1234567890
なぜ `.gitignore` が必要なのか？
ここで重要になるのが、「`.env`ファイルは絶対にGitHubに送らない（Gitの管理外にする）」ということです。
そのために使うのが `.gitignore` という設定ファイルです。プロジェクトフォルダ内に `.gitignore` というファイルを作り、そこに無視してほしいファイル名を記述します。
.gitignore の中身
依存関係が格納されるフォルダ（重いので除外）
node_modules/
OSが勝手に作る不要なファイル
.DS_Store
★ここが最重要！ 機密情報が入った .env ファイルはGitの追跡から除外する
.env
【先輩からのアドバイス】
`.gitignore` を先に書いてから `.env` ファイルを作る、という順番を習慣にしてください。この小さなひと手間で、あなたの大切なセキュリティが守られます。
—
3. VS Codeの「シークレットストレージ」とは何か？
さて、ここからが本題であり、VS Codeが持つ強力な機能の紹介です。
私たちは普段、VS Codeの中で様々な「拡張機能（ライブラリ）」を使っていますよね。GitHubに接続したり、クラウドサービスと連携したり、AIアシスタントを動かしたり……。
これらの拡張機能も、当然あなたに代わってAPIキーやアクセストークンを扱う必要があります。では、拡張機能はそれらの秘密のデータをどこに保存しているのでしょうか？
実は、VS Codeには 「シークレットストレージ（Secret Storage）」 という、OSの安全な暗号化領域（WindowsならCredential Manager、macOSならKeychain、LinuxならSecret Service API）と連携して機密情報を安全に保存する仕組みが組み込まれています。
シークレットストレージがもたらす安心
- 暗号化保存: プレーンテキスト（生データ）ではなく、OSの強力な暗号化機能によって守られた状態でディスクに保存されます。
- 拡張機能からの安全なアクセス: 権限を持った拡張機能だけが、安全に認証情報を呼び出すことができます。
私たちは、VS Codeの拡張機能（例えば GitHub Copilot や各種クラウド連携ツールなど）をインストールする際、ポップアップで「認証しますか？」と聞かれます。そこで許可を出すと、VS Codeは内部でこのシークレットストレージを使って、あなたのトークンを安全に管理してくれるのです。
—
4. 【実践】安全に環境変数を読み込んで動かすHelloWorld
それでは、実際にVS Code上で環境変数（`.env`）を安全に読み込み、プログラムを正しく動作させるまでの流れを体験してみましょう。
今回は、JavaScript（Node.js環境）を例にとって、コード内に機密情報を一文字も書かずに、`.env`から安全に値を取り出すコードを書いてみます。
Step 1: 必要なパッケージのインストール
ターミナルを開き、環境変数を安全に読み込むための定番ライブラリ `dotenv` をインストールします。
プロジェクトの初期化とdotenvのインストール
npm init -y
npm install dotenv
Step 2: ファイル構成の確認
プロジェクトフォルダの中身が以下のようになっていることを確認してください。
my-secure-project/
├── .env # 機密情報（Gitには含めない）
├── .gitignore # .envを無視する設定
├── package.json
└── index.js # 実行するプログラム
Step 3: コードを書く (`index.js`)
`.env` ファイルに書いた機密情報を、プログラム側で安全に呼び出してみましょう。
// index.js
// dotenvライブラリを読み込み、.envファイルの内容を process.env に展開する
require(‘dotenv’).config();
// プログラムのメイン処理
function startApp() {
// process.env を通して、コードに直書きせずに安全に環境変数を呼び出す
const apiKey = process.env.API_KEY;
const dbPassword = process.env.DATABASE_PASSWORD;
if (!apiKey) {
console.error(“エラー: API_KEYが設定されていません！”);
return;
}
console.log(“=== アプリケーションを安全に起動します ===”);
// 実際のアプリではここに処理を書く（APIキーの頭数文字だけ表示して安全性を確認）
console.log(`読み込んだAPIキーのプレフィックス: ${apiKey.substring(0, 7)}…`);
console.log(“データベースへの接続準備が完了しました。”);
}
// 実行
startApp();
Step 4: 動作確認
ターミナルで以下のコマンドを実行してみましょう。
node index.js
【実行結果のイメージ】
=== アプリケーションを安全に起動します ===
読み込んだAPIキーのプレフィックス: sk-proj…
データベースへの接続準備が完了しました。
おめでとうございます！コードの中にはAPIキーの「エ」の字も書かれていないのに、`.env` ファイルから安全に値を読み込んでプログラムを動かすことに成功しました。
—
5. まとめ：今日から始めるセキュア・コーディングの習慣
いかがでしたでしょうか？
今回は、VS Codeを用いた環境変数の管理と、機密情報を守るためのシークレットストレージの概念について解説しました。
今日おぼえてほしいポイントはたったの3つです。
1. APIキーやパスワードは、絶対にコードに直接書かない。
2. 機密情報は `.env` に書き、必ず `.gitignore` でGitの管理から除外する。
3. VS Codeや拡張機能は、OSの暗号化されたシークレットストレージを使って安全に認証情報を守っている。
この基本を徹底するだけで、セキュリティ事故のリスクをゼロに近づけることができます。「面倒くさいな」と感じるかもしれませんが、一度習慣にしてしまえば、呼吸をするように当たり前にできるようになりますよ。
これをマスターすれば、毎日のコーディングがぐっと安心して、より楽しく劇的に楽になりますよ。ぜひ、あなたの次のプロジェクトから取り入れてみてくださいね！