開発の基礎知識

開発を進める上で知っておくと便利な知識をまとめました。

重要な設定ファイル

.env（環境変数ファイル）

APIキーやパスワードなど、秘密にしたい情報を保存するファイルです。

# .env ファイルの例
API_KEY=sk-abc123xyz789
DATABASE_URL=postgres://user:pass@localhost/mydb
SECRET_TOKEN=my-super-secret-token

重要なルール:

• .env は 絶対に公開しない
• GitHubにアップロードしない
• 人に送らない

プログラムからは環境変数として読み込めます。

.gitignore（Git除外設定）

Gitで管理しないファイルを指定します。

# .gitignore ファイルの例
.env
node_modules/
*.log
.DS_Store

必ず .env を含めてください。これを忘れると、秘密情報が公開される事故につながります。

package.json（Node.js設定）

Node.js/JavaScriptプロジェクトの設定ファイルです。

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "next": "14.0.0",
    "react": "18.0.0"
  }
}

requirements.txt（Python設定）

Pythonプロジェクトで必要なパッケージを一覧にしたファイルです。

requests==2.31.0
pandas==2.0.0
python-dotenv==1.0.0

pip install -r requirements.txt で一括インストールできます。

README.md（説明書）

プロジェクトの説明を書くファイルです。

• プロジェクトの概要
• セットアップ方法
• 使い方

GitHubでプロジェクトを開くと最初に表示されます。

開発サーバー

ローカルサーバーとは？

自分のPC上でWebサイトを動かす仕組みです。

ブラウザで http://localhost:3000 などにアクセスすると、開発中のサイトが見られます。

localhost と ポート番号

http://localhost:3000
     ↑           ↑
   自分のPC    ポート番号

複数のサーバーを同時に動かすときは、ポート番号を変えます（3000, 3001, 8080 など）。

開発サーバーの起動・停止

起動:

npm run dev

停止:

Ctrl + C

ホットリロード

多くの開発サーバーは「ホットリロード」に対応しています。

ファイルを保存すると、ブラウザが自動で更新される機能です。

手動でリロードする必要がないので便利です。

よくある問題

「ポートが使用中」エラー:

Error: listen EADDRINUSE: address already in use :::3000

→ 別のターミナルでサーバーが動いています。そちらを Ctrl+C で止めてください。

デバッグの基本

console.log / print で確認

プログラムが期待通りに動いているか確認する最もシンプルな方法です。

JavaScript:

console.log("ここまで来た");
console.log("変数の値:", myVariable);

Python:

print("ここまで来た")
print(f"変数の値: {my_variable}")

Claudeに「デバッグ用のログを追加して」と頼むこともできます。

ブラウザの開発者ツール

Webページの問題を調査する強力なツールです。

開き方:

• F12 キー
• または Cmd + Option + I（Mac）

よく使うタブ:

「動かない」ときのチェックリスト

1. ファイルを保存した？ - Cmd + S
2. サーバーは動いている？ - ターミナルを確認
3. ブラウザをリロードした？ - Cmd + R
4. 正しいURL？ - localhost:3000 など
5. エラーメッセージは？ - ターミナルとブラウザのConsoleを確認
6. キャッシュのクリア？ - Cmd + Shift + R（強制リロード）

セキュリティの基本

APIキーは公開しない

APIキーとは、外部サービスを使うための「鍵」です。

# 良くない例（コードに直接書いている）
api_key = "sk-abc123xyz789"

# 良い例（環境変数から読み込む）
api_key = os.environ["API_KEY"]

公開すると：

• 勝手に使われて高額請求
• アカウント停止
• 情報漏洩

.env + .gitignore のセット

1. 秘密情報は .env に書く
2. .gitignore に .env を追加
3. コードでは環境変数として読み込む

この3ステップで、秘密情報を安全に扱えます。

本番環境のデータは触らない

開発中は必ずテストデータを使いましょう。

• 本番のデータベースに接続しない
• 本番のAPIキーを使わない
• 「本番環境」と「開発環境」を分ける

Claudeに「本番環境のデータを…」と頼むのは避けてください。

変更がブラウザに反映されない

1. ファイルを保存する（Cmd + S）
2. ブラウザを強制リロード（Cmd + Shift + R）
3. サーバーを再起動（Ctrl + C → npm run dev）

次のステップ

基礎知識を押さえたら、実際に手を動かしてみましょう。

→ 議事録要約ツールのチュートリアル