【メモ】TypeScriptプロジェクト初期セットアップ

目標

• webpackを利用してHTML+TypeScriptのプロジェクトを作成
• HTML+TypeScriptのコンテンツをwebpackのDevServerで提供。
• gtsを利用してGoogle TypeScript Style Guideに従うようにESLintを設定。
• VSCodeで編集時にlinter、保存時にformatterが効くようにする。

※ 最近はWebpackよりViteのほうが良さげ。Vite版のセットアップメモ

前提

• 2025/6の時点での情報に従う。
• nodejsの環境はセットアップ済み。
• VSCodeはセットアップ済み。

セットアップ

webpackインストール

npm init -y
npm install webpack webpack-cli

webpack init

npx webpack initは現在のバージョンでは実行できなくなっているが、代わりのコマンド(create-new-webpack-app)が用意されている。

cp package.json package.json.bak # package.jsonが上書きされるので、必要であればバックアップ
npx create-new-webpack-app

上記を実行すると、対話形式でプロジェクトの構成選択が進み、選択結果に従ってディレクトリ・ファイルが生成される。
実行後、package.jsonが上書きされる。authorやlicenseなどのフィールドが消えてしまうので必要であればバックアップをとっておいて、後で手作業でマージする。

選択例）

? Which of the following JS solutions do you want to use? 
  none 
  ES6 
❯ Typescript 
? Would you like to use Webpack Dev server? (Y/n) Y
? Do you want to simplify the creation of HTML files for your bundle? (Y/n) Y
? Do you want to add PWA support? (Y/n) Y
? Which of the following CSS solution do you want to use? (Use arrow keys)
  none 
❯ CSS only 
  SASS 
  LESS 
  Stylus
? Do you want to use PostCSS in your project? (Y/n) N
? Do you want to extract CSS into separate files? (Use arrow keys)
  No 
❯ Only for Production 
  Yes 
? Which package manager do you want to use? (Use arrow keys)
❯ npm 
  yarn 
  pnpm 
[create-webpack] ℹ️ Initializing a new Webpack project
        create  index.html
        create  webpack.config.js
? File conflict at package.json? (ynadxH) Y
>> overwrite

最後の問にYで答えると、先の手順で作成したpackage.jsonが上書きされる。

index.htmlの場所を変更

mkdir html
mv index.html html

webpack.config.jsを編集

--- webpack.config.js.orig      2025-05-31 12:47:37.771813777 +0900
+++ webpack.config.js   2025-05-31 12:47:46.951041506 +0900
@@ -23,7 +23,7 @@
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: 'index.html',
+            template: 'html/index.html',
         }),
 
         // Add your plugins here

一度動作確認

npx webpack serve

ESLintセットアップ

gtsをインストールすると、それに依存するESLintがインストールされる。

npm install --save-dev gts
cp tsconfig.json tsconfig.json.bak # 上書きしたときに後で手作業マージする場合に利用
npx gts init

VSCodeセットアップ

.vscode/settings.jsonを作成（すでに存在する場合は編集）

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit",
        "source.fixAll.eslint": "explicit"
    },
    "eslint.validate": [
        "typescript"
    ],
    "eslint.format.enable": true
}

VSCodeを起動し、ESLintをExtentionをインストール。

linter/formatterの動作確認

src/index.tsを編集して意図的にワーニングが発生するような修正を行う。
例えば、文末のセミコロンを削除する。

修正を行った時点で、赤い下線で問題が指摘されていることを確認する。
保存した時点で、自動修正可能な問題が修正されることを確認する。(セミコロンであれば補完される)

もし期待通りならなければ、コマンドパレット（Shift+Ctrl+P）を開いてESLint: Restert ESLint Serverを試す。それでもダメならOUTPUTを開いてESLintを選択し、問題を調査して対処する。

npm installでエラー

npm installを実行したときに、以下のようなエラーが発生する。

error TS2792: Cannot find module 'undici-types'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

まず、npm installを実行したときにコンパイルが走る理由は、package.jsonに以下の設定があるため。

  "scripts": {
    "prepare": "npm run compile",
    "compile": "tsc",
  },

コンパイルが走り、コンパイルが成功しないので上記エラーが出る。
コンパイルが成功しないことに対する対応として、tsconfig.jsonに以下の設定を入れると、エラーは解消する。

  "compilerOptions": {
    "module": "node16",
    "moduleResolution": "node16"
  }

TODO1: このオプションの意味を調べて、この対応で問題ないか調べる。
Ref: https://blog.s2n.tech/articles/dont-use-moduleresolution-node
TODO2: そもそもコンパイルする必要があるか考える。