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パスが短くなる。

品質・スタイルに関わる設定

  "compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
    "noFallthroughCasesInSwitch": true
  }

アプリの規模が大きい場合、コードの品質・スタイルに関わる設定はeslint.config側に分けたほうが良い。

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.config.mjs

ESLintはLinter = 悪い書き方をチェックする

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

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;

• nextTsには any禁止 などのルールがデフォルトで設定されている。

• rulesに設定を追加していく。

便利なrule：

@typescript-eslint/no-unused-vars：

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

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

no-console：

      "no-console": "error",

.prettierrc.yml

https://prettier.io/docs/configuration

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

• prettierが入っていない、つまりsemiやインデントの設定が無いのに保存時にコードが整形されるのはEditorの拡張機能やプラグインが行っている為

.prettierrc.yml：拡張子はprettierが対応しているもので良い。JSON形式の.prettierrcが多い

# 文末にセミコロンを付ける
semi: true

# 文字列にはダブルクォーテーションを使う
singleQuote: false

# 1行の長さは100文字まで
printWidth: 100

# 末尾のカンマは付けない
trailingComma: "none"

# インデントのスペース数は2つ
tabWidth: 2

# アロー関数の引数の括弧を省略しない (e) => {}
arrowParens: "always"