Hapicode - プログラミング技術ブログ

# Jsconfig と Tsconfig

JavaScript で開発する際に使う jsconfig.json と TypeScript 開発に使う tsconfig.json について、調べてまとめました。

# JSConfig.json とは

jsconfig.json ファイルは JavaScript プロジェクトの設定ファイルで、主に Visual Studio Code などのエディタがコード補完、インポート解決、エラー検出を行う際に使用されます。TypeScript コンパイラの設定をベースにしていますが、JavaScript プロジェクト専用の設定ファイルです。

# 主な役割

  • パスエイリアスの設定: @/ などのエイリアスを使用したインポートパスの解決
  • コード補完の改善: エディタがプロジェクト構造を理解し、より正確な補完を提供
  • 型チェック: checkJs オプションを有効にすることで、JavaScript でも型チェックが可能
  • モジュール解決: モジュールのインポートパスを正しく解決

# jsconfig.json ファイルの例

基本的な設定例：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["resources/js/*"],
      "@Components/*": ["resources/js/Components/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "public"]
}

VuePress プロジェクトでの実例：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./docs/.vuepress/*"]
    },
    "target": "es2017",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "checkJs": false
  },
  "include": ["docs/**/*", "docs/.vuepress/**/*"],
  "exclude": ["node_modules", "docs/.vuepress/dist"]
}

# jsconfig.json の主要オプション

# compilerOptions

オプション 説明 使用例
baseUrl プロジェクトのルートディレクトリを指定。相対パスの基準となる "." (カレントディレクトリ)
paths パスエイリアスを設定。@/ などのエイリアスでインポートパスを短縮できる "@/*": ["./src/*"]
target コンパイル対象の JavaScript バージョン "es2017", "es2020", "esnext"
module モジュールシステムの指定 "commonjs", "esnext", "es2015"
moduleResolution モジュールの解決方法を指定 "node" (Node.js スタイル)
lib 使用する型定義ライブラリを指定 ["es2017", "dom"]
checkJs JavaScript ファイルでも型チェックを有効にする true / false
jsx JSX の処理方法を指定 "preserve", "react", "react-native"
allowSyntheticDefaultImports デフォルトエクスポートがないモジュールでもデフォルトインポートを許可 true / false
experimentalDecorators デコレーターの実験的なサポートを有効化 true / false
noLib 型定義ライブラリを含めない true / false

# include / exclude

  • include: プロジェクトに含めるファイルやディレクトリを指定
  • exclude: プロジェクトから除外するファイルやディレクトリを指定

# パスエイリアスの使用例

paths オプションで設定したエイリアスを使用すると、相対パスではなく絶対パス風のインポートが可能になります。

// paths 設定: "@/*": ["./src/*"]

// ❌ 相対パス（深い階層では読みにくい）
import { utils } from "../../../utils/helper";

// ✅ エイリアス使用（読みやすい）
import { utils } from "@/utils/helper";

# tsconfig.json とは

tsconfig.json は TypeScript プロジェクトの設定ファイルです。TypeScript コンパイラ（tsc）がこのファイルを読み取り、TypeScript コードを JavaScript にコンパイルする際の設定を決定します。

# jsconfig.json と tsconfig.json の違い

項目 jsconfig.json tsconfig.json
対象言語 JavaScript TypeScript
主な用途 エディタの補完・型チェック支援 TypeScript のコンパイル設定
allowJs デフォルトで true デフォルトで false
checkJs デフォルトで false デフォルトで false
コンパイル コンパイルしない（設定のみ） TypeScript を JavaScript に変換

# tsconfig.json ファイルの例

基本的な設定例：

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["es2017"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

厳格な型チェックを有効にした設定例：

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "rootDir": "./src",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "./dist",
    "importsNotUsedAsValues": "error",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noPropertyAccessFromIndexSignature": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

# tsconfig.json の主要オプション

# 基本設定

オプション 説明 使用例
target コンパイル後の JavaScript のバージョン "es2017", "es2020"
module モジュールシステム "commonjs", "esnext"
lib 使用する型定義ライブラリ ["es2017", "dom"]
outDir コンパイル後の出力ディレクトリ "./dist"
rootDir ソースファイルのルートディレクトリ "./src"
sourceMap ソースマップファイルの生成 true / false
declaration .d.ts ファイルの生成 true / false
declarationMap 宣言ファイルのソースマップ生成 true / false

# 型チェック設定

オプション 説明 使用例
strict すべての厳格な型チェックオプションを有効化 true
noImplicitAny 暗黙の any 型を禁止 true
strictNullChecks null と undefined の厳格なチェック true
strictFunctionTypes 関数の型チェックを厳格化 true
noImplicitReturns すべてのコードパスで値を返すことを要求 true
noUnusedLocals 未使用のローカル変数をエラーにする true
noUnusedParameters 未使用のパラメータをエラーにする true
noFallthroughCasesInSwitch switch 文のフォールスルーを禁止 true
noUncheckedIndexedAccess インデックスアクセスで undefined の可能性を考慮 true
noPropertyAccessFromIndexSignature インデックスシグネチャからのプロパティアクセスを禁止 true

# モジュール解決設定

オプション 説明 使用例
moduleResolution モジュール解決方法 "node", "classic"
baseUrl モジュール解決の基準ディレクトリ "."
paths パスエイリアスの設定 "@/*": ["./src/*"]
resolveJsonModule JSON ファイルのインポートを許可 true
esModuleInterop CommonJS と ES モジュールの相互運用 true
allowSyntheticDefaultImports デフォルトエクスポートの合成を許可 true

# Target オプション

target オプションは、TypeScript がコンパイルする際の出力 JavaScript のバージョンを指定します。target が ES5 以下である場合、アロー関数 () => {} は等価な function 式へ変換されます。

# Node.js バージョンと推奨 Target

Node.js バージョン 推奨 Target 利用可能な API（一部）
Node 8 ES2017 Object.entries、Object.values、date.formatToParts
Node 10 ES2018 async iterables、promise.finally、regexp.groups
Node 12 ES2019 array.flat、array.flatMap、string.trimStart
Node 14 ES2020 string.matchAll
Node 16 ES2021 string.replaceAll
Node 18+ ES2022 Array.at、Object.hasOwn、Top-level await

# 使用例

{
  "compilerOptions": {
    "target": "es2017" // Node.js 8+ で使用可能な機能まで
  }
}

# lib オプション

lib オプションは、使用する型定義ライブラリを指定します。target を指定すれば必要なライブラリは自動的に追加されますが、個別でライブラリを追加したり、特定のライブラリを除外する場合に使用します。

# 使用例

{
  "compilerOptions": {
    "target": "es2018",
    "lib": [
      "es2018",
      "esnext.AsyncIterable",
      "esnext.Array",
      "esnext.Intl",
      "esnext.Symbol",
      "dom" // ブラウザ環境用
    ]
  }
}

# 主な lib 値

  • ES バージョン: es5, es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext
  • DOM: dom, dom.iterable - ブラウザ環境用
  • WebWorker: webworker - Web Worker 用
  • ESNext: esnext.* - 実験的な機能

# module オプション

module オプションは、出力される JavaScript がどのようにモジュールを読み込むかを指定します。

# 主な値

値 説明 使用場面
commonjs Node.js で使用される CommonJS 形式 Node.js バックエンド
es2015 / es6 ES6 モジュール形式（import/export） モダンブラウザ
esnext 最新の ES モジュール機能を使用 モダンなプロジェクト
amd Asynchronous Module Definition RequireJS など
umd Universal Module Definition ライブラリ開発
system SystemJS 形式 SystemJS 使用時
none モジュールシステムを使用しない グローバル変数使用

# 使用例

{
  "compilerOptions": {
    "module": "commonjs" // Node.js プロジェクト
  }
}

{
  "compilerOptions": {
    "module": "esnext" // モダンなフロントエンドプロジェクト
  }
}

# moduleResolution オプション

モジュールの解決方法を指定します。

  • node: Node.js のモジュール解決アルゴリズムを使用（推奨）
  • classic: TypeScript の従来の解決方法（非推奨）

# tsconfig.json の継承（extends）

既存の設定を継承して、ベース設定を拡張できます。

# tsconfig/bases の使用

tsconfig/bases (opens new window) は、様々な環境向けの推奨設定を提供しています。

# 推奨設定
npm install --save-dev @tsconfig/recommended

# React 用
npm install --save-dev @tsconfig/create-react-app

# Node.js 用
npm install --save-dev @tsconfig/node16

{
  "extends": "@tsconfig/recommended/tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

# カスタム設定の継承

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

# 実践的な設定例

# Node.js プロジェクト

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["es2017"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

# フロントエンドプロジェクト（React/Vue など）

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "lib": ["es2017", "dom", "dom.iterable"],
    "jsx": "react", // React の場合
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

# まとめ

  • jsconfig.json: JavaScript プロジェクト用。エディタの補完や型チェック支援が主な目的
  • tsconfig.json: TypeScript プロジェクト用。コンパイル設定と型チェックが主な目的
  • 両方とも TypeScript コンパイラの設定をベースにしており、多くのオプションが共通
  • target、module、lib などのオプションで、プロジェクトの環境に合わせた設定が可能
  • extends を使用して、既存の設定を継承・拡張できる
2022-09-09
javascripttypescript

同じタグを持つ記事をピックアップしました。

プログラミング技術ブログ
実践的な開発ノウハウを発信

サイト

技術

JavaScript Vue.js PHP Python Flutter

フォロー

© 2025 Hapicode. All rights reserved.