tsconfig.json

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

create-next-appで作成されるデフォルト：

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

• target

  • どのバージョンの JavaScript にコンパイルするか

• include / exclude

  • TypeScript の解析対象に含める（LSPがエラーチェックをする）か、外すか。

paths

    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }

• "baseUrl"

  • 相対パスの基準にする場所

• "paths"

  • 上記の意味は「ルート以下のファイルは @/ スタートでimportができる」

例：

ルート/
├─ lib/
│  └─ utils.ts
├─ apps/
│  └─ test/
│     └─ test.ts

paths"の設定が無い場合：

import { test_ } from "../../lib/utils

"paths"設定がある場合：

import { hoge } from "@/lib/utils

• importパスが短くなる。

package.json

https://docs.npmjs.com/cli/v11/configuring-npm/package-json

create-next-app で作成されるデフォルト：

{
  "name": "next-turbo-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "next": "15.5.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.5.0",
    "@eslint/eslintrc": "^3"
  }
}

• "name"

  • パッケージ名。monorepoの場合フォルダ名と同一にする。

• "scripts"

  • スクリプトコマンドは&&でつなげることで処理をチェーンできる。

  • NODE_ENV=developmentのように環境変数を指定できる。

  • "postinstall":：依存関係のインストール後に自動で実行

• "dependencies"

  • 本番でも必要なライブラリ

  • "react"や"next" はデプロイ後にブラウザやサーバー上で動作するために必要

• "devDependencies"

  • 開発時のみ必要なライブラリ

  • "typeScript"や"eslint"は開発時にのみ使う。

• "extends"

  • ベースとなるtsconfig.jsonを継承

package-lock.json

package.json

• ^ や ~ のような範囲指定ができる。

• 整数はmajorと呼ぶ

• 例：^4.17.0 → 「4.17.x 系なら何でもOK」

  • npm install すると最新の 4.17.x がインストールされる。

package-lock.json

• 実際にどのバージョンを使っているかを正確に記録（ = ロック）する。

• 全く同じバージョンを再現するために必要

eslint

ESLintはリンター = 悪い書き方をチェックし警告を表示させる。

// Nextjsのデフォルトは prettier が入っていない。入れる場合：https://nextjs.org/docs/app/api-reference/config/eslint#with-prettier

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  {
    rules: {
    },
  },
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

便利なrule：

@typescript-eslint/no-unused-vars：

      "@typescript-eslint/no-unused-vars": [
        "error",
        {
          argsIgnorePattern: "^_",
        },
      ],

• _をつけた引数は使用していなくても許容する。

no-console：

      "no-console": "error",

prettierrc

https://prettier.io/docs/configuration

prettierはフォーマッター = 見た目の綺麗さを整える。

• prettierが入っていないのに自動保存時にコードが整形されるのはEditorの拡張機能やプラグインがフォーマットをしている。.prettierrcがルートにあることを検知するとその設定でフォーマットされる。

• .prettierrc ファイルの拡張子はprettierが対応しているもので良い。

// .prettierrc.json

{
  "semi": true, // 文末のセミコロン
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always", // アロー関数の引数で()を省略しない
  "endOfLine": "lf"
}

• CLIによるフォーマットコマンド：npx prettier --write .