// これらがあると自動的にモジュールになる
import { something } from "./other";
export const value = 42;
export default class MyClass {}

// package.json
{
  "type": "module"
}

// math.mts（必ずモジュールとして扱われる）
const add = (a: number, b: number) => a + b;
export { add };

// script.ts（import/exportがない）
const globalVariable = "これはグローバルスコープ";
function globalFunction() {
  console.log("グローバル関数");
}

// ケース1: モジュール（exportがある）
// user.ts
interface User {
  id: number;
  name: string;
}
export { User }; // この行があるためモジュール

// ケース2: スクリプト（import/exportがない）
// config.ts
const API_URL = "https://api.example.com";
const TIMEOUT = 5000;
// グローバルスコープに定義される

// ケース3: モジュール（importがある）
// main.ts
import { User } from "./user"; // この行があるためモジュール
const currentUser: User = { id: 1, name: "Alice" };

// ケース4: 強制的にモジュール化
// utils.ts
const helper = () => "utility function";
export {}; // 空のexportでモジュール化

// types.ts（スクリプト）
interface User {
  id: number;
  name: string;
}

// main.ts（スクリプト）
const user: User = { id: 1, name: "Alice" }; // 型は自動で利用可能
var globalVar = "問題のある変数"; // グローバル汚染

// another.ts（スクリプト）
var globalVar = "同じ名前の変数"; // エラー：重複宣言

// types.ts（モジュール）
export interface User {
  id: number;
  name: string;
}

// main.ts（モジュール）
import { User } from "./types";
const user: User = { id: 1, name: "Alice" };
const localVar = "ローカルスコープ"; // 他ファイルに影響しない

// another.ts（モジュール）
const localVar = "同じ名前でもOK"; // 独立したスコープなので問題なし

{
  "compilerOptions": {
    "module": "ES2020",
    "moduleDetection": "auto", // 自動判定（デフォルト）
    "isolatedModules": true, // 各ファイルを個別モジュールとして扱う
    "verbatimModuleSyntax": true // import/export構文を厳密にチェック
  }
}

{
  "compilerOptions": {
    "moduleDetection": "auto" // 自動判定（推奨）
    // "moduleDetection": "legacy", // 従来の判定方式
    // "moduleDetection": "force"   // 全てモジュールとして扱う
  }
}

// 推奨：明示的にモジュールとして宣言
// constants.ts
export const API_URL = "https://api.example.com";
export const TIMEOUT = 5000;

// または空のexportでモジュール化
// types.ts
interface Config {
  apiUrl: string;
  timeout: number;
}

// 明示的にモジュール化
export type { Config };
// または
export {};

// スクリプトが適している例：設定ファイル
// global.d.ts
declare global {
  interface Window {
    myApp: {
      version: string;
      config: AppConfig;
    };
  }
}

// このファイルはスクリプトとして動作し、グローバル型を拡張

// ❌ 避けるべき：同じプロジェクト内でモジュールとスクリプトが混在
// script1.ts（スクリプト）
const config = { api: "url" };

// module1.ts（モジュール）
import { config } from "./script1"; // エラー：スクリプトからはimportできない

// ✅ 推奨：統一してモジュールを使用
// config.ts（モジュール）
export const config = { api: "url" };

// main.ts（モジュール）
import { config } from "./config"; // 正常に動作

// TypeScriptコンパイラーでの確認
// tsc --listFiles でコンパイル対象ファイルを確認
// tsc --showConfig で設定を確認

// ファイル内での確認方法
console.log("Is module:", typeof exports !== "undefined"); // モジュールかどうか
console.log("Global this:", typeof globalThis); // グローバルオブジェクトの確認

// エラー1: "Cannot use import statement outside a module"
// 解決法：ファイルをモジュール化
export {}; // この行を追加

// エラー2: "Top-level 'await' expressions are only allowed when..."
// 解決法：モジュール化してESモジュールで実行
export {}; // モジュール化
const data = await fetch("/api/data"); // Top-level awaitが使用可能

// エラー3: 型の重複宣言
// 解決法：名前空間またはモジュールで分離
export namespace UserTypes {
  export interface User {
    id: number;
  }
}
export namespace AdminTypes {
  export interface User {
    id: string;
    permissions: string[];
  }
}

// エクスポート
export const func = () => {};
export default class MyClass {}

// インポート
import MyClass, { func } from "./module";

// エクスポート
exports.func = () => {};
module.exports = MyClass;

// インポート
const { func } = require("./module");
const MyClass = require("./module");

// 定義
define(["dependency"], function (dep) {
  return { func: () => {} };
});

// 使用
require(["module"], function (module) {
  module.func();
});

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    define(["dependency"], factory); // AMD
  } else if (typeof module === "object" && module.exports) {
    module.exports = factory(require("dependency")); // CommonJS
  } else {
    root.MyModule = factory(root.Dependency); // グローバル
  }
})(typeof self !== "undefined" ? self : this, function (dependency) {
  return { func: () => {} };
});

// types/user.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export interface CreateUserRequest {
  name: string;
  email: string;
}

// services/userService.ts
import { User, CreateUserRequest } from "../types/user";

export class UserService {
  async createUser(userData: CreateUserRequest): Promise<User> {
    // ユーザー作成ロジック
    return {
      id: Date.now(),
      ...userData,
    };
  }

  async getUser(id: number): Promise<User | null> {
    // ユーザー取得ロジック
    return null;
  }
}

// controllers/userController.ts
import { UserService } from "../services/userService";
import { CreateUserRequest } from "../types/user";

export class UserController {
  constructor(private userService: UserService) {}

  async handleCreateUser(request: CreateUserRequest) {
    try {
      const user = await this.userService.createUser(request);
      return { success: true, data: user };
    } catch (error) {
      return { success: false, error: error.message };
    }
  }
}

src/
├── models/          # データモデル
├── repositories/    # データアクセス層
├── services/        # ビジネスロジック層
├── controllers/     # プレゼンテーション層
├── types/           # 型定義
├── utils/           # ユーティリティ関数
└── config/          # 設定ファイル

// ESモジュールの例
// math.ts
export const add = (a: number, b: number): number => a + b;
export default class Calculator {}

// main.ts
import Calculator, { add } from "./math";

// CommonJSの例
// math.ts
const add = (a: number, b: number): number => a + b;
class Calculator {}

module.exports = { add, Calculator };

// main.ts
const { add, Calculator } = require("./math");

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

// package.json
{
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "node --loader ts-node/esm src/index.ts"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "node"
  }
}

// package.json（"type": "module"の指定なし）
{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

// ESモジュールでのTop-level awaitの例
// config.ts
const config = await fetch("/api/config").then((r) => r.json());
export default config;

# serveをグローバルインストール
npm install -g serve

# プロジェクトディレクトリで実行
serve . -p 3000

# またはnpxで一時的に使用
npx serve . -p 3000

# CORSを有効にしたい場合
serve . -p 3000 --cors

# http-serverをグローバルインストール
npm install -g http-server

# プロジェクトディレクトリで実行
http-server . -p 3000 --cors

# Viteをインストール
npm install -D vite

# package.jsonにスクリプト追加
# "scripts": { "dev": "vite --port 3000" }

# 実行
npm run dev

# またはnpxで直接実行
npx vite --port 3000

# webpack-dev-serverをインストール
npm install -D webpack webpack-cli webpack-dev-server

# 実行
npx webpack serve --port 3000 --static .

# 設定ファイル使用時
npx webpack serve --config webpack.config.js

# Python 3の場合
python -m http.server 3000

# Python 2の場合
python -m SimpleHTTPServer 3000

# PHPがインストールされている場合
php -S localhost:3000 -t .

# 特定のルーターファイルを指定
php -S localhost:3000 -t . router.php

# Rubyがインストールされている場合
ruby -run -e httpd . -p 3000

# またはWEBrickを使用
ruby -r webrick -e "WEBrick::HTTPServer.new(Port: 3000, DocumentRoot: Dir.pwd).start"

# Denoがインストールされている場合
deno run --allow-net --allow-read https://deno.land/std@0.181.0/http/file_server.ts --port 3000

# または短縮形
deno run --allow-net --allow-read jsr:@std/http/file-server --port 3000

# Browsersyncをインストール
npm install -g browser-sync

# 実行（自動リロード付き）
browser-sync start --server --port 3000 --files "**/*"

# 特定のディレクトリを指定
browser-sync start --server --port 3000 --files "dist/**/*" --directory

// server.js
const express = require("express");
const path = require("path");
const app = express();

app.use(express.static("."));
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

# 実行
node server.js

# Bunがインストールされている場合
bunx serve . --port 3000

# または自作のサーバー
bun run --hot server.ts

project/
├── index.html
├── src/
│   ├── main.js          # TypeScriptコンパイル後
│   ├── utils/
│   │   ├── math.js
│   │   └── validation.js
│   └── services/
│       └── api.js
├── dist/                # TypeScriptビルド出力
└── tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ESモジュール サンプル</title>
  </head>
  <body>
    <h1>ESモジュール デモ</h1>
    <button id="calculate">計算実行</button>
    <div id="result"></div>

    <!-- type="module" を指定してESモジュールとして読み込み -->
    <script type="module" src="./dist/main.js"></script>
  </body>
</html>

// src/utils/math.ts
export const add = (a: number, b: number): number => {
  return a + b;
};

export const multiply = (a: number, b: number): number => {
  return a * b;
};

export default class Calculator {
  calculate(operation: string, a: number, b: number): number {
    switch (operation) {
      case "add":
        return add(a, b);
      case "multiply":
        return multiply(a, b);
      default:
        throw new Error("Unknown operation");
    }
  }
}

// src/services/api.ts
export interface ApiResponse<T> {
  data: T;
  status: number;
}

export class ApiClient {
  async fetchData<T>(url: string): Promise<ApiResponse<T>> {
    try {
      const response = await fetch(url);
      const data = await response.json();
      return { data, status: response.status };
    } catch (error) {
      throw new Error(`API Error: ${error}`);
    }
  }
}

export default ApiClient;

// src/main.ts
import Calculator, { add, multiply } from "./utils/math.js";
import ApiClient from "./services/api.js";

class App {
  private calculator: Calculator;
  private apiClient: ApiClient;

  constructor() {
    this.calculator = new Calculator();
    this.apiClient = new ApiClient();
    this.init();
  }

  private init(): void {
    const button = document.getElementById("calculate");
    const result = document.getElementById("result");

    button?.addEventListener("click", () => {
      // 計算デモ
      const sum = add(5, 3);
      const product = multiply(4, 7);
      const calcResult = this.calculator.calculate("add", 10, 15);

      if (result) {
        result.innerHTML = `
                    <p>5 + 3 = ${sum}</p>
                    <p>4 × 7 = ${product}</p>
                    <p>Calculator: 10 + 15 = ${calcResult}</p>
                `;
      }
    });
  }
}

// アプリケーション初期化
new App();

# TypeScriptコンパイラーでビルド
tsc

# またはwatchモードで自動コンパイル
tsc --watch

http-server . -p 3000 --cors

http://localhost:3000

// デバッグ用のログ出力
console.log("Module loaded:", import.meta.url);

// 動的インポートも可能
async function loadModule() {
  const module = await import("./utils/helper.js");
  console.log("Dynamic import:", module);
}

// utils/math.ts - Named Exportの例
export const add = (a: number, b: number): number => a + b;
export const multiply = (a: number, b: number): number => a * b;

// 使用例
import { add, multiply } from "./utils/math";

// services/apiClient.ts - Default Exportの例
class ApiClient {
  private baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  async get<T>(endpoint: string): Promise<T> {
    // GET リクエストの実装
    return {} as T;
  }
}

export default ApiClient;

// 使用例
import ApiClient from "./services/apiClient";

// types/index.ts
export * from "./user";
export * from "./product";
export * from "./order";

// 使用側での簡潔なインポート
import { User, Product, Order } from "./types";

src/
├── types/
│   ├── index.ts
│   ├── user.ts
│   └── api.ts
├── services/
│   ├── index.ts
│   ├── userService.ts
│   └── apiService.ts
├── utils/
│   ├── index.ts
│   ├── validation.ts
│   └── formatting.ts
├── config/
│   └── constants.ts
└── index.ts

src/
├── features/
│   ├── user/
│   │   ├── types/
│   │   ├── services/
│   │   ├── components/
│   │   └── index.ts
│   └── product/
│       ├── types/
│       ├── services/
│       ├── components/
│       └── index.ts
├── shared/
│   ├── types/
│   ├── utils/
│   ├── services/
│   └── constants/
├── core/
│   ├── api/
│   ├── auth/
│   └── config/
└── index.ts

// ❌ 悪い例: 複数の責任を持つファイル
// userUtils.ts
export const validateEmail = (email: string) => {
  /* ... */
};
export const formatUserName = (name: string) => {
  /* ... */
};
export const calculateAge = (birthDate: Date) => {
  /* ... */
};
export const sendWelcomeEmail = (user: User) => {
  /* ... */
};

// ✅ 良い例: 責任ごとに分割
// validation.ts
export const validateEmail = (email: string) => {
  /* ... */
};

// formatting.ts
export const formatUserName = (name: string) => {
  /* ... */
};

// calculations.ts
export const calculateAge = (birthDate: Date) => {
  /* ... */
};

// emailService.ts
export const sendWelcomeEmail = (user: User) => {
  /* ... */
};

// ❌ 循環参照が発生する例
// userService.ts
import { OrderService } from "./orderService";

export class UserService {
  constructor(private orderService: OrderService) {}
}

// orderService.ts
import { UserService } from "./userService";

export class OrderService {
  constructor(private userService: UserService) {}
}

// ✅ 共通の型やインターフェースを分離
// types/index.ts
export interface IUserService {
  getUser(id: number): Promise<User>;
}

export interface IOrderService {
  getOrdersByUser(userId: number): Promise<Order[]>;
}

// userService.ts
import { IOrderService } from "../types";

export class UserService implements IUserService {
  constructor(private orderService: IOrderService) {}
}

// ファイル名: kebab-case
user - service.ts;
api - client.ts;
validation - utils.ts;

// クラス名: PascalCase
export class UserService {}
export class ApiClient {}

// 関数・変数名: camelCase
export const validateEmail = () => {};
export const apiEndpoint = "https://api.example.com";

// 定数: SCREAMING_SNAKE_CASE
export const MAX_RETRY_COUNT = 3;
export const API_TIMEOUT = 5000;

// インポートの順序
// 1. Node.jsの標準ライブラリ
import { readFile } from "fs/promises";

// 2. 外部ライブラリ
import axios from "axios";
import { z } from "zod";

// 3. 内部モジュール（絶対パス）
import { User } from "@/types/user";
import { ApiClient } from "@/services/apiClient";

// 4. 相対パス
import { validateInput } from "../utils/validation";
import { formatResponse } from "./helpers";

// ❌ ESモジュールでは拡張子が必要な場合がある
import { utils } from "./utils";

// ✅ 明示的に拡張子を指定
import { utils } from "./utils.js"; // TypeScriptでも.jsを使用

// ESModuleInteropを有効にして解決
// tsconfig.json
{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

// 使用例
import express from 'express'; // CommonJSライブラリでも自然にimport可能

// 解決策: tsconfig.jsonでパスマッピングを設定
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"],
      "@/types/*": ["types/*"],
      "@/services/*": ["services/*"]
    }
  }
}

// ❌ 全体をインポート
import * as utils from "./utils";

// ✅ 必要な部分のみインポート
import { validateEmail } from "./utils/validation";
import { formatDate } from "./utils/formatting";

<!-- 従来の方法 - 問題が多い -->
<script src="utils.js"></script>
<script src="api.js"></script>
<script src="components.js"></script>
<script src="app.js"></script>

// モダンな方法 - Webpackが解決
import { fetchData } from "./api";
import { Button } from "./components/Button";
import { formatDate } from "./utils";

// JavaScript内でCSSを直接インポート
import "./styles.css";
import logoImage from "./assets/logo.png";

// TypeScriptでもアセットを型安全に扱える
const App: React.FC = () => (
  <div>
    <img src={logoImage} alt="Logo" />
  </div>
);

// 開発時の設定
module.exports = {
  devServer: {
    hot: true, // HMRを有効化
    open: true,
  },
};

module.exports = {
  devtool: "source-map", // デバッグ情報を生成
};

// 動的インポートによる遅延読み込み
const LazyComponent = React.lazy(() => import("./LazyComponent"));

// Webpackが自動的に別ファイルとして分離

// utils.js
export const usedFunction = () => console.log("used");
export const unusedFunction = () => console.log("unused"); // 自動で除去される

// app.js
import { usedFunction } from "./utils"; // unusedFunctionは最終バンドルに含まれない

module.exports = {
  module: {
    rules: [
      { test: /\.tsx?$/, use: "ts-loader" }, // TypeScript
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, // CSS
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, // Sass
      { test: /\.(png|jpg|gif)$/, type: "asset/resource" }, // 画像
      { test: /\.svg$/, use: "@svgr/webpack" }, // SVG as React Component
    ],
  },
};

// 開発環境: 高速ビルド、デバッグ情報付き
// 本番環境: 圧縮、最適化、キャッシュ戦略

const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "eval-source-map",
};

// ts-loaderまたはesbuild-loaderでTypeScriptを処理
{
  test: /\.tsx?$/,
  use: {
    loader: 'ts-loader',
    options: {
      transpileOnly: true, // 高速化のため型チェックは別プロセス
    },
  },
}

// TypeScriptのpathsとWebpackのaliasを連携
// tsconfig.json
"paths": {
  "@/*": ["src/*"],
  "@components/*": ["src/components/*"]
}

// webpack.config.js
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    '@components': path.resolve(__dirname, 'src/components'),
  },
}

# TypeScriptとts-loaderをインストール
npm install --save-dev typescript ts-loader

# 型定義ファイル（必要に応じて）
npm install --save-dev @types/node

const path = require("path");

module.exports = {
  // TypeScriptファイルをエントリーポイントとして指定
  entry: "./src/index.ts",

  module: {
    rules: [
      {
        // .ts および .tsx ファイルを対象とする
        test: /\.tsx?$/,
        // ts-loaderを使用してTypeScriptを処理
        use: "ts-loader",
        // node_modules内のファイルは除外（ビルド高速化）
        exclude: /node_modules/,
      },
    ],
  },

  resolve: {
    // インポート時に拡張子を省略できるようにする
    extensions: [".tsx", ".ts", ".js"],
  },

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            // TypeScript設定ファイルを指定（デフォルト: tsconfig.json）
            configFile: "tsconfig.json",

            // 型チェックをスキップ（高速化、別途型チェックツールを使用）
            transpileOnly: false,

            // エラー時にビルドを継続するかどうか
            ignoreDiagnostics: [2307], // 特定のエラーコードを無視

            // コンパイラーオプションを上書き
            compilerOptions: {
              sourceMap: true,
              declaration: false,
            },
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
};

// 高速ビルド用設定（型チェックなし）
{
  test: /\.tsx?$/,
  use: {
    loader: 'ts-loader',
    options: {
      // 型チェックを無効化してトランスパイルのみ実行
      transpileOnly: true,

      // 実験的な高速化機能を有効化
      experimentalWatchApi: true,

      // ファイル変更検知の最適化
      useCaseSensitiveFileNames: true,
    },
  },
  exclude: /node_modules/,
}

{
  "compilerOptions": {
    // Webpack用の出力設定
    "target": "ES2020", // モダンブラウザ対応
    "module": "ESNext", // Webpackがモジュール解決を処理
    "moduleResolution": "node", // Node.js形式のモジュール解決

    // 型安全性の設定
    "strict": true, // 厳格な型チェック
    "noImplicitAny": true, // any型の暗黙的使用を禁止
    "strictNullChecks": true, // null/undefinedの厳格チェック

    // Webpack連携用設定
    "esModuleInterop": true, // CommonJSモジュールとの互換性
    "allowSyntheticDefaultImports": true, // デフォルトインポートを許可
    "skipLibCheck": true, // 型定義ファイルの型チェックをスキップ

    // 開発体験向上
    "sourceMap": true, // ソースマップを生成
    "declaration": true, // 型定義ファイルを生成
    "declarationMap": true, // 型定義ファイルのソースマップ

    // パス解決
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },

  // コンパイル対象ファイル
  "include": ["src/**/*", "types/**/*"],

  // コンパイル除外ファイル
  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            // インクリメンタルコンパイルを有効化
            transpileOnly: true,
            experimentalWatchApi: true,
          },
        },
        exclude: /node_modules/,
      },
    ],
  },

  // キャッシュを有効化（Webpack 5）
  cache: {
    type: "filesystem",
    buildDependencies: {
      config: [__filename],
    },
  },
};

npm install --save-dev fork-ts-checker-webpack-plugin

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            // 型チェックを無効化（ForkTsCheckerが別途実行）
            transpileOnly: true,
          },
        },
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    // 型チェックを別プロセスで並行実行
    new ForkTsCheckerWebpackPlugin({
      // 非同期で型チェックを実行
      async: false,

      // ESLintも同時に実行
      eslint: {
        files: "./src/**/*.{ts,tsx,js,jsx}",
      },

      // TypeScript設定ファイルを指定
      typescript: {
        configFile: "tsconfig.json",
      },
    }),
  ],
};

my-typescript-project/
├── src/
│   ├── index.ts
│   ├── components/
│   │   └── Button.tsx
│   └── utils/
│       └── helpers.ts
├── dist/
├── tsconfig.json
├── webpack.config.js
└── package.json

import { Button } from "@components/Button";
import { formatDate } from "@utils/helpers";

const app = document.getElementById("app");
if (app) {
  app.innerHTML = `
    <h1>Hello TypeScript + Webpack!</h1>
    <p>Today is: ${formatDate(new Date())}</p>
  `;
}

import React from "react";

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
}

export const Button: React.FC<ButtonProps> = ({
  label,
  onClick,
  variant = "primary",
}) => {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {label}
    </button>
  );
};

export const formatDate = (date: Date): string => {
  return date.toLocaleDateString("ja-JP", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  delay: number
): ((...args: Parameters<T>) => void) => {
  let timeoutId: NodeJS.Timeout;

  return (...args: Parameters<T>) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

# エラー例: Cannot find module '@components/Button'

// webpack.config.js
resolve: {
  extensions: ['.tsx', '.ts', '.js'],
  alias: {
    '@components': path.resolve(__dirname, 'src/components'),
    '@utils': path.resolve(__dirname, 'src/utils'),
  },
}

// tsconfig.json
"paths": {
  "@components/*": ["src/components/*"],
  "@utils/*": ["src/utils/*"]
}

# エラー例: Could not find a declaration file for module 'some-library'

# 型定義ファイルをインストール
npm install --save-dev @types/some-library

# または、カスタム型定義を作成
# types/some-library.d.ts
declare module 'some-library' {
  export function someFunction(): void;
}

// 高速化設定
{
  loader: 'ts-loader',
  options: {
    transpileOnly: true,        // 型チェックを無効化
    experimentalWatchApi: true, // 実験的な高速API
  },
}

// + ForkTsCheckerWebpackPluginで型チェックを分離

# webpack-dev-serverをインストール
npm install --save-dev webpack-dev-server

# HTMLファイル生成用プラグイン（通常必要）
npm install --save-dev html-webpack-plugin

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 開発モードに設定
  mode: "development",

  entry: "./src/index.ts",

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },

  // 開発サーバーの設定
  devServer: {
    // 静的ファイルを提供するディレクトリ
    static: {
      directory: path.join(__dirname, "dist"),
      // 静的ファイルの監視を有効化
      watch: true,
    },

    // サーバーのポート番号
    port: 3000,

    // サーバー起動時にブラウザを自動で開く
    open: true,

    // Hot Module Replacementを有効化
    hot: true,

    // ファイル変更時の自動リロード
    liveReload: true,

    // エラーをブラウザのオーバーレイ表示
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },

    // 詳細なログ出力を制御
    devMiddleware: {
      writeToDisk: false, // ファイルをディスクに書き込まない（メモリ上で処理）
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      title: "TypeScript + Webpack Dev Server",
    }),
  ],

  // 開発用の出力設定
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    // 開発時はファイルをクリーンアップしない
    clean: false,
  },
};

devServer: {
  // ホスト名の設定（0.0.0.0で外部からアクセス可能）
  host: 'localhost', // または '0.0.0.0'

  // ポート番号（自動で空いているポートを使用）
  port: 'auto', // または具体的な番号

  // HTTPS を有効化
  https: false, // または true、証明書オブジェクト

  // IPv6 を有効化
  allowedHosts: 'all', // またはホスト名の配列

  // サーバー起動時の動作
  open: {
    target: ['http://localhost:3000'],
    app: {
      name: 'google chrome', // 使用するブラウザ
    },
  },
}

devServer: {
  // HMRを有効化
  hot: true,

  // HMR失敗時のフォールバック動作
  liveReload: true,
}

// HMRを使用するTypeScriptコード例
// src/index.ts
if (module.hot) {
  // モジュールが更新された時の処理
  module.hot.accept('./components/App', () => {
    console.log('App component updated!');
    // アプリケーションの再レンダリング処理
  });

  // HMRの状態変更を監視
  module.hot.addStatusHandler(status => {
    console.log('HMR Status:', status);
  });
}

devServer: {
  // APIサーバーへのプロキシ設定
  proxy: [
    {
      // /api/* のリクエストをプロキシ
      context: ['/api'],
      target: 'http://localhost:8080',
      // オリジンヘッダーを変更
      changeOrigin: true,
      // パスを書き換え（/api/users → /users）
      pathRewrite: {
        '^/api': '',
      },
      // ログを有効化
      logLevel: 'debug',
    },
    {
      // WebSocketのプロキシ
      context: ['/ws'],
      target: 'ws://localhost:8080',
      ws: true,
    },
  ],
}

// 使用例：フロントエンドからのAPIコール
// fetch('/api/users') → http://localhost:8080/users にプロキシされる

devServer: {
  static: [
    {
      // メインの静的ファイルディレクトリ
      directory: path.join(__dirname, 'dist'),
      // publicPath: ブラウザからアクセスする際のURLパス
      publicPath: '/',
      watch: true,
    },
    {
      // 追加の静的ファイルディレクトリ（画像など）
      directory: path.join(__dirname, 'public'),
      // /assets でアクセス可能にする
      publicPath: '/assets',
      watch: false,
    },
  ],
}

// ファイルシステム上のパス vs ブラウザからのアクセスパス
{
  directory: '/Users/username/project/public',  // 実際のファイルパス
  publicPath: '/assets',                        // ブラウザからのアクセスパス
}

// 結果：
// ファイル: /Users/username/project/public/images/logo.png
// ブラウザ: http://localhost:3000/assets/images/logo.png

devServer: {
  static: [
    {
      // ケース1: ルートパスで配信
      directory: path.join(__dirname, 'dist'),
      publicPath: '/',
      // http://localhost:3000/bundle.js でアクセス可能
    },
    {
      // ケース2: サブディレクトリで配信
      directory: path.join(__dirname, 'public'),
      publicPath: '/static',
      // public/favicon.ico → http://localhost:3000/static/favicon.ico
    },
    {
      // ケース3: 複数レベルのパス
      directory: path.join(__dirname, 'assets'),
      publicPath: '/app/assets',
      // assets/images/logo.png → http://localhost:3000/app/assets/images/logo.png
    },
  ],
}

module.exports = {
  output: {
    // バンドルファイルのpublicPath（Webpackが生成するファイル用）
    publicPath: "/dist/",
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  devServer: {
    static: {
      // 静的ファイルのpublicPath（既存ファイル用）
      directory: path.join(__dirname, "public"),
      publicPath: "/assets",
    },
  },
};

// 結果：
// Webpackが生成: http://localhost:3000/dist/bundle.js
// 静的ファイル: http://localhost:3000/assets/favicon.ico

// 本番環境でCDNを使用する場合
module.exports = {
  output: {
    // 本番環境では絶対URLを指定
    publicPath:
      process.env.NODE_ENV === "production"
        ? "https://cdn.example.com/assets/"
        : "/assets/",
  },

  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      // 開発環境では相対パス
      publicPath: "/assets",
    },
  },
};

// 開発環境: http://localhost:3000/assets/bundle.js
// 本番環境: https://cdn.example.com/assets/bundle.js

// アプリが https://example.com/myapp/ で動作する場合
module.exports = {
  output: {
    publicPath: "/myapp/",
  },

  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
      publicPath: "/myapp/static",
    },
  },
};

// HTML内で生成されるパス:
// <script src="/myapp/bundle.js"></script>
// <img src="/myapp/static/logo.png" />

// ✅ 推奨: 末尾にスラッシュを付ける
publicPath: "/assets/";

// ❌ 問題の可能性: スラッシュなし
publicPath: "/assets";

// 結果の違い:
// 正しい: /assets/image.png
// 間違い: /assetsimage.png （結合されてしまう可能性）

// 絶対パス（推奨）
publicPath: "/assets/"; // ルートからの絶対パス
publicPath: "https://cdn..."; // 完全なURL

// 相対パス（特殊なケースでのみ使用）
publicPath: "../assets/"; // 現在のページからの相対パス
publicPath: "assets/"; // 現在のディレクトリからの相対パス

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- Webpackが自動生成するscriptタグ -->
    <script src="/dist/bundle.js"></script>
  </head>
  <body>
    <!-- 静的ファイルへの参照 -->
    <img src="/assets/images/logo.png" alt="Logo" />
    <link rel="stylesheet" href="/assets/styles/theme.css" />
  </body>
</html>

devServer: {
  static: [
    {
      directory: path.join(__dirname, 'public'),
      publicPath: '/debug-assets',
      // ログを有効化してアクセス状況を確認
      serveIndex: true,  // ディレクトリ一覧を表示
    },
  ],

  // ミドルウェアでpublicPathの動作を確認
  devMiddleware: {
    writeToDisk: true,  // ファイルを実際に書き出して確認
  },

  // 詳細なログ出力
  client: {
    logging: 'verbose',
  },
}

// ❌ 問題のある設定
devServer: {
  static: {
    directory: path.join(__dirname, 'assets'),
    // publicPath未設定 → デフォルトで'/'になる
  },
}

// ✅ 正しい設定
devServer: {
  static: {
    directory: path.join(__dirname, 'assets'),
    publicPath: '/assets',  // 明示的に指定
  },
}

// これらは別物！
module.exports = {
  output: {
    publicPath: "/build/", // Webpackが生成するファイル用
  },
  devServer: {
    static: {
      publicPath: "/static", // 既存の静的ファイル用
    },
  },
};

**5. クライアント側の設定**

```javascript
devServer: {
  client: {
    // WebSocket接続の設定
    webSocketURL: 'ws://localhost:3000/ws',

    // エラーオーバーレイの設定
    overlay: {
      errors: true,    // エラーを表示
      warnings: false, // 警告は非表示
      runtimeErrors: true, // ランタイムエラーも表示
    },

    // 進捗表示
    progress: true,

    // 再接続の試行回数
    reconnect: 5,

    // ログレベル
    logging: 'info', // 'none', 'error', 'warn', 'info', 'log', 'verbose'
  },
}

{
  "scripts": {
    // 基本的な開発サーバー起動
    "dev": "webpack serve --mode development",

    // 設定ファイルを指定して起動
    "start": "webpack serve --config webpack.dev.js",

    // オープンを無効化して起動
    "dev:no-open": "webpack serve --no-open",

    // 特定のポートで起動
    "dev:port": "webpack serve --port 4000",

    // HTTPS で起動
    "dev:https": "webpack serve --https",

    // 外部からアクセス可能にして起動
    "dev:host": "webpack serve --host 0.0.0.0",

    // 本番ビルド
    "build": "webpack --mode production"
  }
}

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",

  // 開発用のソースマップ（高速）
  devtool: "eval-source-map",

  devServer: {
    static: "./dist",
    port: 3000,
    hot: true,
    open: true,

    // 開発専用の設定
    devMiddleware: {
      // 統計情報の表示レベル
      stats: "minimal",
    },

    // ヘッダーの追加
    headers: {
      "Access-Control-Allow-Origin": "*",
    },

    // 履歴API対応（SPA用）
    historyApiFallback: {
      // 404時にindex.htmlを返す
      rewrites: [{ from: /^\/api/, to: "/404.html" }],
    },
  },

  // 開発用の最適化設定
  optimization: {
    // ランタイムチャンクを分離（HMR高速化）
    runtimeChunk: "single",
  },
});

npm install --save-dev @pmmmwh/react-refresh-webpack-plugin react-refresh

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            getCustomTransformers: () => ({
              before: [require("react-refresh-typescript")()],
            }),
          },
        },
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    // React Fast Refresh を有効化
    new ReactRefreshWebpackPlugin(),
  ],

  devServer: {
    hot: true,
  },
};

// src/components/Counter.tsx
import React, { useState } from "react";

export const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

// 解決方法
devServer: {
  hot: true,
  liveReload: true, // フォールバックとして有効化
}

// TypeScriptの場合、型定義を追加
// types/global.d.ts
declare global {
  interface NodeModule {
    hot?: {
      accept: (dependencies?: string | string[], callback?: () => void) => void;
      addStatusHandler: (handler: (status: string) => void) => void;
    };
  }
}

# エラー: Port 3000 is already in use

// 解決方法
devServer: {
  port: 'auto', // 自動でポートを選択
}

// または、特定のポートを指定
devServer: {
  port: 4000,
}

// 解決方法
devServer: {
  host: '0.0.0.0', // 全てのインターフェースでリッスン
  allowedHosts: 'all', // 全てのホストを許可
}

// デバッグ用設定
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      logLevel: 'debug', // 詳細なログを出力
      onProxyReq: (proxyReq, req, res) => {
        console.log('Proxying request:', req.url);
      },
    },
  },
}

devServer: {
  // ファイル監視の最適化
  watchFiles: {
    paths: ['src/**/*'],
    options: {
      usePolling: false, // ポーリングを無効化（CPUを節約）
      ignored: /node_modules/, // node_modulesを監視対象外
    },
  },

  // コンパイル時の最適化
  devMiddleware: {
    writeToDisk: false,
    stats: 'errors-warnings-only', // エラーと警告のみ表示
  },
}

// webpack.config.js
module.exports = {
  // キャッシュ設定
  cache: {
    type: "filesystem",
    cacheDirectory: path.resolve(__dirname, ".webpack-cache"),
  },

  // 最適化設定
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
  },
};

mkdir typescript-webpack-project
cd typescript-webpack-project
npm init -y

# TypeScript関連
npm install --save-dev typescript ts-loader

# Webpack関連
npm install --save-dev webpack webpack-cli webpack-dev-server

# その他の便利なプラグイン
npm install --save-dev html-webpack-plugin clean-webpack-plugin

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["ES2020", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

const path = require("path");

// 基本的な使い方
path.resolve(__dirname, "dist");
// 結果例: '/Users/username/myproject/dist' (macOS/Linux)
// 結果例: 'C:\Users\username\myproject\dist' (Windows)

// ❌ 動作しない例
module.exports = {
  output: {
    path: "./dist", // 相対パスは使用できない
  },
};

// ✅ 正しい例
module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"), // 絶対パスを生成
  },
};

// webpack.config.jsが /Users/username/myproject/ にある場合
console.log(__dirname);
// 出力: '/Users/username/myproject'

// プロジェクト構造例
myproject/
├── webpack.config.js  ← __dirnameはここのパス
├── src/
└── dist/

// 複数の引数を結合
path.resolve("/users", "john", "documents", "file.txt");
// 結果: '/users/john/documents/file.txt'

// 相対パスから絶対パスへ変換
path.resolve("dist");
// 結果: '/current/working/directory/dist'

// __dirnameとの組み合わせ
path.resolve(__dirname, "dist");
// 結果: '/Users/username/myproject/dist'

// 手動でパスを結合（❌ 推奨されない）
const outputPath = __dirname + "/dist"; // Windowsで問題が発生

// path.resolve()を使用（✅ 推奨）
const outputPath = path.resolve(__dirname, "dist"); // どのOSでも正しく動作

const path = require("path");

module.exports = {
  // エントリーポイントの絶対パス指定
  entry: path.resolve(__dirname, "src", "index.ts"),

  output: {
    // 出力ディレクトリの絶対パス（Webpackの要求事項）
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },

  resolve: {
    alias: {
      // エイリアスも絶対パスで指定することが多い
      "@": path.resolve(__dirname, "src"),
      "@components": path.resolve(__dirname, "src", "components"),
      "@utils": path.resolve(__dirname, "src", "utils"),
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      // テンプレートファイルの絶対パス
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

// ❌ エラーになる
output: {
  path: './dist',
}

// ✅ 正しい
output: {
  path: path.resolve(__dirname, 'dist'),
}

// ❌ OSによっては動作しない
const distPath = __dirname + "/dist";

// ✅ クロスプラットフォーム対応
const distPath = path.resolve(__dirname, "dist");

// ❌ pathが未定義
module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"), // ReferenceError
  },
};

// ✅ pathモジュールをインポート
const path = require("path");
module.exports = {
  output: {
    path: path.resolve(__dirname, "dist"),
  },
};

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // エントリーポイント: バンドルの開始点となるファイルを指定
  // './src/index.ts'を起点に依存関係を解析してバンドルを作成
  entry: "./src/index.ts",

  // モジュールの処理ルールを定義
  module: {
    rules: [
      {
        // test: 処理対象のファイルを正規表現で指定（.ts、.tsxファイル）
        test: /\.tsx?$/,
        // use: 使用するローダーを指定（TypeScriptファイルをJavaScriptに変換）
        use: "ts-loader",
        // exclude: 処理から除外するディレクトリ（node_modulesを除外してビルド高速化）
        exclude: /node_modules/,
      },
      {
        // CSSファイルの処理ルール
        test: /\.css$/i,
        // 複数のローダーを配列で指定（右から左の順で実行）
        // css-loader: CSSファイルを解析、style-loader: スタイルをDOMに注入
        use: ["style-loader", "css-loader"],
      },
    ],
  },

  // モジュール解決の設定
  resolve: {
    // 拡張子を省略してimportできるファイル拡張子を指定
    // import './component'で.tsx、.ts、.jsファイルを自動検索
    extensions: [".tsx", ".ts", ".js"],
  },

  // 出力設定
  output: {
    // 出力ファイル名（[contenthash]でファイル内容に基づくハッシュ値を追加）
    // キャッシュ戦略に有効（ファイル内容が変わらなければハッシュも同じ）
    filename: "bundle.[contenthash].js",
    // 出力先ディレクトリの絶対パス
    path: path.resolve(__dirname, "dist"),
  },

  // プラグインの設定（ビルドプロセスを拡張する機能）
  plugins: [
    // ビルド前にdistディレクトリをクリーンアップ
    new CleanWebpackPlugin(),
    // HTMLファイルを自動生成し、生成されたJSファイルを自動で読み込み
    new HtmlWebpackPlugin({
      // テンプレートHTMLファイルを指定
      template: "./src/index.html",
    }),
  ],

  // 開発サーバーの設定
  devServer: {
    // 静的ファイルを提供するディレクトリ
    static: "./dist",
    // 開発サーバーのポート番号
    port: 3000,
    // ブラウザを自動で開く
    open: true,
  },
};

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // アプリケーションのエントリーポイント
  entry: "./src/index.ts",

  // ローダーの設定
  module: {
    rules: [
      {
        // TypeScriptファイル（.ts、.tsx）の処理ルール
        test: /\.tsx?$/,
        // ts-loaderでTypeScriptをJavaScriptに変換
        use: "ts-loader",
        // node_modulesディレクトリは処理対象外
        exclude: /node_modules/,
      },
    ],
  },

  // モジュール解決の設定
  resolve: {
    // インポート時に省略可能な拡張子
    extensions: [".tsx", ".ts", ".js"],
  },

  // 共通で使用するプラグイン
  plugins: [
    // ビルド前にoutputディレクトリをクリーンアップ
    new CleanWebpackPlugin(),
    // 指定したテンプレートからHTMLファイルを生成
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};