ChatGPTに質問しながらNode.jsに入門する

HTTPサーバーのリクエスト処理
- Bun: 約68,000 req/sec
- Node.js: 約29,000 req/sec
- Deno: 約25,000 req/sec

// Windows
"C:\\Users\\username\\project\\file.js"

// Unix系（Linux, macOS）
"/Users/username/project/file.js"

// ファイルのURL形式
'file:///C:/Users/username/project/file.js'    // Windows
'file:///Users/username/project/file.js'       // Unix系

import { fileURLToPath } from 'url';

// Windows での実行
fileURLToPath('file:///C:/project/file.js')
// => 'C:\\project\\file.js'

// Unix系 での実行
fileURLToPath('file:///project/file.js')
// => '/project/file.js'

// URLの場合
'file:///C:/My%20Projects/file.js'

// fileURLToPathで正しく変換される
'C:\\My Projects\\file.js'  // Windows
'/My Projects/file.js'      // Unix系

// ファイル操作のコード例
import path from 'path';
import fs from 'fs';

// アプローチ1: import.meta.filename を直接使用
const currentPath = import.meta.filename;
const targetPath = path.join(path.dirname(currentPath), 'data', 'config.json');

// アプローチ2: fileURLToPath を使用
import { fileURLToPath } from 'url';
const currentPath = fileURLToPath(import.meta.url);
const targetPath = path.join(path.dirname(currentPath), 'data', 'config.json');

import.meta.filename => "/Users/mac-user/project/index.mjs"

import.meta.filename => "C:\Users\win-user\project\index.mjs"

// Mac/Linux
console.log(import.meta.filename)
// => "/Users/username/project/index.mjs"

// Windows
console.log(import.meta.filename)
// => "C:\\Users\\username\\project\\index.mjs"

{
  "scripts": {
    "start": "node server.js"
  }
}

npm test -- --verbose

npm run script -- --flag1 value1 --flag2 value2

npm run script -- "複雑な文字列"

{
  "scripts": {
    "test": "mocha",  // node_modules/.bin/mochaと同じ
    "build": "webpack", // node_modules/.bin/webpackと同じ
    "lint": "eslint ." // node_modules/.bin/eslintと同じ
  }
}

# 通常のターミナルでの実行方法
./node_modules/.bin/webpack
# または
npx webpack

{
  "scripts": {
    "test": "jest",
    "build": "webpack"
  }
}

bun run test
# または
bunx jest

{
  "tasks": {
    "start": "deno run --allow-net server.ts",
    "test": "deno test"
  }
}

deno task start
deno task test

// テンプレートリテラルの場合
`${__dirname}/dist`  
// Windows環境では正しく動作しない可能性がある
// 例: "C:\Users\name\project/dist"（混在した区切り文字）

// path.resolveの場合
path.resolve(__dirname, "dist")
// OSに応じて適切な区切り文字を使用
// Windows: "C:\Users\name\project\dist"
// Unix: "/Users/name/project/dist"

// テンプレートリテラルの場合
`${__dirname}/dist`
// 単純な文字列連結
// 例: "/Users/name/project/dist"

// path.resolveの場合
path.resolve(__dirname, "dist")
// 絶対パスを正規化
// 例: "/Users/name/project/dist"

// 特に違いが出る例
path.resolve(__dirname, "/dist")
// ルートからの絶対パスとして解釈
// 例: "/dist"

`${__dirname}/dist`
// 単純連結
// 例: "/Users/name/project/dist"

// テンプレートリテラルの場合
`${__dirname}/../dist`
// 文字列としてそのまま
// 例: "/Users/name/project/../dist"

// path.resolveの場合
path.resolve(__dirname, "../dist")
// パスを正規化
// 例: "/Users/name/dist"

// テンプレートリテラルの場合
`${__dirname}/dist/assets/images`
// 単純な文字列連結

// path.resolveの場合
path.resolve(__dirname, "dist", "assets", "images")
// より柔軟で読みやすい
// パスの正規化も行われる

// テンプレートリテラルの場合
const userInput = "../../malicious";
`${__dirname}/${userInput}`
// 意図しないディレクトリへのアクセスの可能性

// path.resolveの場合
path.resolve(__dirname, userInput)
// パスを正規化して安全に解決

// 推奨される使用方法
const path = require("path");

// 設定ファイルなどでの使用
module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
};

// 非推奨
module.exports = {
  entry: `${__dirname}/src/index.js`,  // OSの違いで問題が発生する可能性
  output: {
    path: `${__dirname}/dist`,
    filename: "bundle.js"
  }
};

// Windows開発環境での表示
`${__dirname}/dist` 
// => "C:\Users\name\project/dist"  // スラッシュが混在

// git commit して Linux環境にデプロイ後
// => "/var/www/project/dist"  // 正常なパス

// Windows開発者のコード
const filePath = `${__dirname}\\images\\logo.png`;
// => "C:\Users\name\project\images\logo.png"

// Macで開発している他の開発者が実行すると
// => "/Users/name/project\images\logo.png"  // 動作しない可能性

// Windows環境
fs.readFile(`${__dirname}\\config\\settings.json`, ...);
// Macやlinuxでは失敗する可能性

// path.resolveを使用した安全な方法
fs.readFile(path.resolve(__dirname, "config", "settings.json"), ...);
// すべての環境で動作

const path = require("path");

// 全環境で安全に動作
const configPath = path.resolve(__dirname, "config", "settings.json");

// これも安全な方法
const imagePath = path.join(__dirname, "images", "logo.png");

// 環境に依存しないパス指定
const basePath = process.env.BASE_PATH || path.resolve(__dirname);

// これでも動作はするが、path.resolveの使用が推奨
const uniformPath = `${__dirname}/images/logo.png`.replace(/\\/g, '/');

# docker-compose.yml
version: '3'
services:
  app:
    build: 
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    working_dir: /app

# Dockerfile
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install

// .devcontainer/devcontainer.json
{
  "name": "Node.js",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

// .devcontainer/devcontainer.json
{
  "name": "Node.js Project",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

# Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "ubuntu/focal64"
  config.vm.provision "shell", inline: <<-SHELL
    curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
    sudo apt-get install -y nodejs
  SHELL
end

# .nvmrc
v18.17.0

# 全開発者が以下のコマンドを実行
nvm install
nvm use

# docker-compose.yml
version: '3'
services:
  app:
    build: .
    volumes:
      - .:/app
      - node_modules:/app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    command: npm run dev

  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp_development

volumes:
  node_modules:

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

CMD ["npm", "start"]

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

npx create-next-app my-app
cd my-app
npm run dev

// 開発サーバー自体の動作はOSによってほとんど変わりません
// 主な違いが出る部分：
- ファイルパスの扱い（\や/の違い）
- 環境変数の扱い
- ファイルシステムの権限

// ファイル操作を行う場合
const filePath = 'uploads/image.jpg';  // Windowsでは問題が起きる可能性

// シェルスクリプトを実行する場合
"scripts": {
  "build": "./build.sh"  // Windowsでは動作しない
}

# docker-compose.yml
version: '3'
services:
  web:
    image: node:18
    working_dir: /app
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    command: npm run dev

# Dockerを使用する場合
docker-compose up

# Windows開発者の環境
C:\Users\name\project> npm run dev
# => WindowsのNode.js環境で動作

# Mac開発者の環境
/Users/name/project $ npm run dev
# => MacのNode.js環境で動作

# Windows開発者の環境
C:\Users\name\project> docker-compose up
# => Linuxコンテナ内で動作

# Mac開発者の環境
/Users/name/project $ docker-compose up
# => 同じLinuxコンテナ内で動作

# データベースも含めた環境の例
version: '3'
services:
  web:
    image: node:18
    command: npm run dev
    ports:
      - "3000:3000"
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password

# 開発開始時は単純に
npm run dev

# 必要に応じてDockerを導入
# - データベースが必要になった
# - チーム開発が始まった
# - 環境の違いで問題が発生した

# Windowsの場合
# PostgreSQLのインストールと設定が複雑
# Windows用のインストーラーが必要
# Path設定が必要

# Macの場合
brew install postgresql
brew services start postgresql

# Linuxの場合
sudo apt-get install postgresql
sudo systemctl start postgresql

# docker-compose.yml
version: '3'
services:
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp_development
    ports:
      - "5432:5432"

# OSに関係なく同じコマンド
docker-compose up

# 開発者A（Windows）
PostgreSQL 12.x がインストール済み

# 開発者B（Mac）
PostgreSQL 14.x がインストール済み

# バージョンの違いによる問題が発生する可能性

services:
  db:
    image: postgres:13  # バージョンを明示的に指定

# プロジェクトA
# PostgreSQL port 5432 を使用

# プロジェクトB
# 同じport 5432 を使いたいが使えない

# プロジェクトA
services:
  db:
    ports:
      - "5432:5432"

# プロジェクトB
services:
  db:
    ports:
      - "5433:5432"  # 別のポートにマッピング

# 各開発者が手動で設定
createdb myapp_development
psql -d myapp_development -c "CREATE USER myapp WITH PASSWORD 'password';"

services:
  db:
    environment:
      POSTGRES_DB: myapp_development
      POSTGRES_USER: myapp
      POSTGRES_PASSWORD: password
    volumes:
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

開発環境：
- Windows/Mac/LinuxのローカルDB
- バージョンや設定が異なる可能性

本番環境：
- Linux + PostgreSQL
- 異なる環境で問題が発生する可能性

# 開発環境と本番環境で同じDockerfile/docker-compose.ymlを使用可能
services:
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}

# 1. PostgreSQLをインストール
# 2. 適切なバージョンを確認
# 3. 環境変数を設定
# 4. データベースを作成
# 5. 初期データを投入
# など、多くの手順が必要

# たった2つのコマンドで環境構築完了
git clone <repository>
docker-compose up

# docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgres://myapp:password@db:5432/myapp_development
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      POSTGRES_DB: myapp_development
      POSTGRES_USER: myapp
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

volumes:
  postgres_data:

# docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      DATABASE_URL: "postgresql://user:password@db:5432/myapp"

  db:
    image: postgres:13
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

version: '3'
services:
  web:
    build: .
    environment:
      MONGODB_URI: "mongodb://db:27017/myapp"

  db:
    image: mongo:latest

// pages/api/users.ts
export default async function handler(req, res) {
  const users = await prisma.user.findMany()
  res.json(users)
}

// 例：NextAuth.js + PostgreSQL
import NextAuth from 'next-auth'
import { PrismaAdapter } from '@next-auth/prisma-adapter'

// ユーザーデータの保存など
async function createUser(data) {
  return await prisma.user.create({
    data: {
      email: data.email,
      name: data.name,
    },
  })
}

services:
  web:
    build: .
  db:
    image: postgres:13
  redis:
    image: redis:6
  elasticsearch:
    image: elasticsearch:7

services:
  web:
    environment:
      DATABASE_URL: postgresql://user:password@db:5432/myapp
      REDIS_URL: redis://redis:6379
      ES_NODE: http://elasticsearch:9200

# Dockerを使用しない場合、各開発者が個別に実行必要
npx prisma migrate dev
npx prisma db seed

# Dockerでは環境構築時に自動実行可能

# docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      DATABASE_URL: postgresql://user:password@db:5432/myapp
      NEXTAUTH_URL: http://localhost:3000
      NEXTAUTH_SECRET: your-secret
    depends_on:
      - db

  db:
    image: postgres:13
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./init.sql:/docker-entrypoint-initdb.d/init.sql

volumes:
  postgres_data:

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

RUN npx prisma generate

CMD ["npm", "run", "dev"]

// DB接続をサービスに委託
import { sql } from '@vercel/postgres';

DATABASE_URL="postgresql://user:pass@db.railway.app:5432/myapp"

// 設定例
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// データ取得例
const { data, error } = await supabase
  .from('posts')
  .select('*')

// 設定例
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firestore = getFirestore(initializeApp({
  // config
}))

// データ取得例
const snapshot = await getDocs(collection(firestore, 'posts'))

// Prismaでの使用例
// schema.prisma
datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

// 接続例
const { db } = await connectToDatabase()
const posts = await db.query('SELECT * FROM posts')

// 開発環境も本番環境も同じ接続情報を使用可能
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

# .env.local
# データベースの設定が環境変数一つで完結
DATABASE_URL="mysql://username:password@aws.connect.psdb.cloud/database-name?sslaccept=strict"

# PlanetScaleの場合
# ブランチでの管理が可能
pscale branch create myapp dev
pscale deploy-request create myapp dev

# Supabaseの場合
# マイグレーションはUIから管理可能

# docker-compose.yml
services:
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password

// データベース接続の設定が必要
const { Pool } = require('pg')
const pool = new Pool({
  // 設定
})

// 設定はほぼ不要
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// すぐに使用可能
const { data } = await supabase
  .from('users')
  .select('*')

// リアルタイム機能が必要な場合
const subscription = supabase
  .from('messages')
  .on('INSERT', payload => {
    // リアルタイム更新
  })
  .subscribe()

// モバイルアプリとの連携が必要な場合
// 認証機能を統合したい場合
import { getAuth } from 'firebase/auth'
const auth = getAuth()

// リレーショナルデータベースが必要な場合
// スケーラビリティを重視する場合
// チーム開発でのDB変更管理が重要な場合

- 無料枠を超えると課金が必要
- トラフィック増加に応じてコストが上昇

// サービス固有のAPIに依存
const { data } = await supabase.from('users').select()

- 特定の機能やパフォーマンスチューニングが制限される
- サービスの提供する機能に依存

無料枠（Free Tier）:
- 最大2つのプロジェクト
- プロジェクトごとに500MB のデータベース容量
- 50,000 行までの無料クエリ
- 認証ユーザー無制限
- 社会的認証（OAuth）無制限
- 週単位のバックアップ

Sparkプラン（無料）:
- 1GBのデータストレージ
- 実時間データベース1GB
- 月間50,000回の読み取り
- 月間20,000回の書き込み
- 月間10GB のホスティング転送量

無料枠:
- 1つの本番用ブランチ
- 1つの開発用ブランチ
- 5GB のストレージ
- 10億行/月 までの読み取り
- 1,000万行/月 までの書き込み

// PlanetScaleの例
// 開発用ブランチに接続
DATABASE_URL="mysql://username:password@aws.connect.psdb.cloud/development-branch"

// Supabaseの例
const supabase = createClient(
  'https://dev-project.supabase.co',  // 開発用プロジェクト
  'public-anon-key'
)

# .env.development
DATABASE_URL="development-database-url"

# .env.production
DATABASE_URL="production-database-url"

// 使用量を監視するログの実装
async function logDatabaseUsage(operation: string) {
  console.log(`DB Operation: ${operation}, Time: ${new Date()}`)
}

// テストデータは最小限に
const testData = {
  title: 'Test Post',
  content: 'Minimal content for testing'
}

// 開発時に便利な機能
- ダッシュボードでのデータ確認
- SQLエディタ
- リアルタイムAPI確認
- 認証テスト機能

// 開発時のツール
- エミュレーター
- デバッグビュー
- パフォーマンスモニタリング

// 開発特有の機能
- データベースブランチ
- スキーマ変更のプレビュー
- デプロイリクエスト

// 定期的なチェック
async function checkUsage() {
  const usage = await getDBUsage()
  if (usage.nearLimit) {
    notifyTeam('DB usage approaching limit')
  }
}

// クエリの制限
const MAX_QUERY_LIMIT = process.env.NODE_ENV === 'development' ? 10 : 100

// 環境変数の共有
// .env.example
SUPABASE_URL=your-project-url
SUPABASE_ANON_KEY=your-anon-key

const qs = require('qs');

// クエリ文字列をパース
const query = 'name=taro&age=30';
const parsed = qs.parse(query);
console.log(parsed); // { name: 'taro', age: '30' }

// オブジェクトからクエリ文字列を作成
const obj = { name: 'jiro', age: 25 };
const stringified = qs.stringify(obj);
console.log(stringified); // name=jiro&age=25

<form action="/submit" method="POST">
  <input type="text" name="name">
  <input type="number" name="age">
  <input type="submit">
</form>

fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    age: 25,
    // より複雑なデータ構造も送信可能
    address: {
      street: '123 Main St',
      city: 'Boston'
    },
    hobbies: ['reading', 'gaming']
  })
})

const form = document.querySelector('form');
form.onsubmit = (e) => {
  e.preventDefault();
  
  // データの取得
  const name = form.name.value;
  const age = form.age.value;
  
  // バリデーション（検証）
  if (name.length < 2) {
    alert('名前は2文字以上で入力してください');
    return;
  }
  
  if (age < 0 || age > 120) {
    alert('正しい年齢を入力してください');
    return;
  }
  
  // データの加工
  const processedData = {
    name: name.trim(), // 空白を削除
    age: parseInt(age), // 文字列から数値に変換
    submitDate: new Date().toISOString() // 送信時刻を追加
  };
  
  // 加工したデータを送信
  fetch('/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(processedData)
  });
}

const form = document.querySelector('form');
const submitButton = document.querySelector('button');
const statusMessage = document.querySelector('#status');

form.onsubmit = async (e) => {
  e.preventDefault();
  
  try {
    // ボタンを無効化し、ローディング表示
    submitButton.disabled = true;
    statusMessage.textContent = '送信中...';
    
    const response = await fetch('/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: form.name.value,
        age: form.age.value
      })
    });
    
    if (!response.ok) {
      throw new Error('サーバーエラーが発生しました');
    }
    
    const result = await response.json();
    
    // 成功時の処理
    statusMessage.textContent = '送信成功！';
    statusMessage.style.color = 'green';
    
  } catch (error) {
    // エラー時の処理
    statusMessage.textContent = error.message;
    statusMessage.style.color = 'red';
    
  } finally {
    // 処理完了後にボタンを再度有効化
    submitButton.disabled = false;
  }
}

<form action="/submit" method="POST">
  <select name="fruits" multiple>
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <input type="submit">
</form>

<form action="/submit" method="POST">
  <input type="checkbox" name="fruits[]" value="apple">りんご
  <input type="checkbox" name="fruits[]" value="banana">バナナ
  <input type="checkbox" name="fruits[]" value="orange">オレンジ
  <input type="submit">
</form>

app.post('/submit', (req, res) => {
  const fruits = req.body.fruits; // 配列として受け取れる
  console.log(fruits); // ['apple', 'banana'] など
});

<form action="/submit" method="POST" id="myForm">
  <input type="text" name="name">
  <button type="submit">送信</button>
  <div id="loading" style="display: none;">送信中...</div>
</form>

<script>
document.getElementById('myForm').onsubmit = function() {
  // 送信ボタンを無効化
  this.querySelector('button').disabled = true;
  
  // ローディング表示
  document.getElementById('loading').style.display = 'block';
  
  // フォームの送信は通常通り行われる
  return true; // ページ遷移が発生
}
</script>

<form target="hidden-iframe" action="/submit" method="POST">
  <input type="text" name="name">
  <button type="submit">送信</button>
  <div id="loading" style="display: none;">送信中...</div>
</form>

<iframe name="hidden-iframe" style="display: none;"></iframe>

<script>
const form = document.querySelector('form');
const loading = document.getElementById('loading');

form.onsubmit = function() {
  loading.style.display = 'block';
};

// iframeがロードされたとき（送信完了時）
frames['hidden-iframe'].onload = function() {
  loading.style.display = 'none';
  alert('送信完了！');
};
</script>

form.onsubmit = async (e) => {
  e.preventDefault(); // デフォルトの送信をキャンセル
  
  loadingElement.style.display = 'block'; // ローディング表示
  
  await fetch('/submit', {
    method: 'POST',
    body: new FormData(form)
  });
  
  loadingElement.style.display = 'none'; // ローディング非表示
}

<form target="hidden-iframe">
  <!-- フォーム要素 -->
</form>
<iframe name="hidden-iframe" style="display:none;"></iframe>

<!-- 基本的なフォーム（JavaScript無しでも動作） -->
<form action="/submit" method="POST">
  <button type="submit">送信</button>
</form>

<!-- JavaScriptが有効な場合の拡張機能 -->
<div id="loading" style="display: none;">送信中...</div>

<script>
  // JavaScriptが有効な場合のみ実行される拡張機能
  if (javascript) {
    enhanceFormWithLoadingIndicator();
  }
</script>