📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 96行目: | 96行目: | ||
JSXは、JavaScript内でHTMLのような記述ができる構文である。<br> | JSXは、JavaScript内でHTMLのような記述ができる構文である。<br> | ||
<br> | <br> | ||
<syntaxhighlight lang="json"> | |||
{ | |||
// TypeScriptコンパイラのオプション設定 | |||
// これらの設定により、TypeScriptがどのようにコードをJavaScriptに変換するかが決まる | |||
"compilerOptions": { | |||
// コンパイル対象となるJavaScriptのバージョンを指定 | |||
// ES2020は2020年に標準化されたECMAScript仕様で、async/awaitやオプショナルチェイニングなどの機能が使える | |||
"target": "ES2020", | |||
// クラスフィールドの定義方法を新しい仕様（defineProperty）を使うように設定 | |||
// これにより、クラスのプロパティがより予測可能な動作をする | |||
"useDefineForClassFields": true, | |||
// TypeScriptで使用できるライブラリの型定義を指定 | |||
// ES2020: ES2020の標準ライブラリの型定義 | |||
// DOM: ブラウザのDOM（document、windowなど）の型定義 | |||
// DOM.Iterable: DOMの反復可能なオブジェクト（NodeListなど）の型定義 | |||
"lib": ["ES2020", "DOM", "DOM.Iterable"], | |||
// モジュールシステムの形式を指定 | |||
// ESNextは最新のECMAScriptモジュール仕様を使用することを意味する（import/export構文） | |||
"module": "ESNext", | |||
// node_modulesの型チェックをスキップして、ビルド速度を向上させる | |||
// サードパーティライブラリの型エラーを無視することで、開発効率を上げる | |||
"skipLibCheck": true, | |||
/* バンドラーモード関連の設定 */ | |||
// ViteやWebpackなどのモダンなバンドラーツールと連携するための設定 | |||
// モジュールの解決方法を「bundler」に設定 | |||
// これにより、バンドラーが独自のモジュール解決ロジックを使うことを前提とした設定になる | |||
"moduleResolution": "bundler", | |||
// .ts拡張子を含むimport文を許可する | |||
// 通常、TypeScriptは拡張子なしでimportするが、バンドラーモードではこれが許可される | |||
"allowImportingTsExtensions": true, | |||
// JSONファイルをモジュールとしてimportできるようにする | |||
// import data from './data.json' のような書き方が可能になる | |||
"resolveJsonModule": true, | |||
// 各ファイルを独立したモジュールとして扱う | |||
// これにより、各ファイルが他のファイルに依存せずにコンパイルされ、Viteなどのツールと相性が良い | |||
"isolatedModules": true, | |||
// JavaScriptファイルを出力しない | |||
// Viteが独自にトランスパイルとバンドルを行うため、TypeScriptコンパイラはファイルを出力する必要がない | |||
"noEmit": true, | |||
// JSX（ReactのHTML風構文）を「react-jsx」形式で変換 | |||
// React 17以降の新しいJSX変換方式を使用し、各ファイルで明示的にReactをimportする必要がなくなる | |||
"jsx": "react-jsx", | |||
/* コード品質チェック（Linting）関連の設定 */ | |||
// これらの設定により、より厳格な型チェックと潜在的なバグの検出が行われる | |||
// strictモードを有効化 | |||
// これにより、すべての厳格な型チェックオプションが一括で有効になる | |||
// （null安全性、暗黙のany型の禁止、thisの型チェックなど） | |||
"strict": true, | |||
// 使用されていないローカル変数がある場合にエラーを出す | |||
// コードの品質を保ち、不要な変数を削除するのに役立つ | |||
"noUnusedLocals": true, | |||
// 使用されていない関数のパラメータがある場合にエラーを出す | |||
// これにより、不要な引数を持つ関数を発見できる | |||
"noUnusedParameters": true, | |||
// switch文でcase句からbreak/returnなしで次のcase句に落ちる（fall through）場合にエラーを出す | |||
// 意図しないバグを防ぐための安全機能 | |||
"noFallthroughCasesInSwitch": true | |||
}, | |||
// TypeScriptコンパイラが処理対象とするディレクトリを指定 | |||
// この場合、srcディレクトリ内のすべてのTypeScriptファイルが対象となる | |||
"include": ["src"], | |||
// プロジェクト参照を設定 | |||
// tsconfig.node.jsonを参照することで、ビルドツール用の設定とアプリケーション用の設定を分離している | |||
// これにより、Node.js環境で実行されるコード（vite.config.tsなど）とブラウザで実行されるコードで | |||
// 異なるコンパイル設定を適用できる | |||
"references": [{ "path": "./tsconfig.node.json" }] | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== tsconfig.node.json : ビルドツール用のTypeScript設定 ==== | ==== tsconfig.node.json : ビルドツール用のTypeScript設定 ==== | ||
ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。<br> | ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。<br> | ||