先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでコードを書いていたら、人によって書き方がバラバラになってしまいました。これを自動で綺麗に揃える方法はありますか？」

先生

「TypeScriptには、コードの書き間違いをチェックするESLintと、見た目を整えるPrettierという便利な道具があります。これらを連携させれば、常に清潔なコードを保てますよ。」

生徒

「具体的にはどのように設定して使うんですか？」

先生

「それでは、初心者の方にも分かりやすく、導入から設定方法まで詳しく見ていきましょう！」

1. ESLintとPrettierとは？

プログラミングを始めたばかりの頃は、「コードが動けばいい」と考えがちですが、実は「読みやすさ」も同じくらい大切です。複数人で開発をしたり、後から自分で自分のコードを見返したりするときに、書き方がバラバラだとバグの原因を見逃しやすくなります。そこで役立つのがESLint（エスリント）とPrettier（プリティア）です。

ESLint：コードの「質」を見守る門番

ESLintは、プログラムの書き方に「怪しい部分」がないかを自動でチェックしてくれるツールです。例えば、「使っていない変数があるよ」「この書き方はバグになりやすいよ」といった警告を出してくれます。これを静的解析（せいてきかいせき）と呼びます。TypeScript専用のルールを追加することで、型に関するミスも素早く見つけられるようになります。

Prettier：コードの「見た目」を整える美容師

Prettierは、コードの改行やスペース、セミコロンの有無など、見た目を自動で綺麗に整形してくれるツールです。例えば、「ここはスペースを2つ入れる」「文字列はシングルクォートで囲む」といったルールを一度決めれば、ボタン一つで全員のコードを同じ見た目に変換してくれます。これをコードフォーマッタと呼びます。

例え話で理解しよう！
ESLintは「文章の文法ミスや論理的な間違いを指摘してくれる添削の先生」、Prettierは「原稿のフォントや文字の大きさを揃えて読みやすくしてくれる編集者」のような役割分担です。

2. なぜTypeScriptとESNextでこれらが必要なのか？

現代のJavaScript（ES6以降や最新のESNext）やTypeScriptは、非常に多機能です。書き方の自由度が高い分、プロジェクトごとにルールを決めておかないと、コードが混沌としてしまいます。特にTypeScriptは「型」という強力な武器を持っていますが、設定が甘いとその恩恵を十分に受けられません。

ESLintとPrettierを連携させることで、最新の文法を使いつつ、TypeScriptの型安全性を守り、さらに美しい見た目を維持するという「三拍子揃った」開発環境を手に入れることができるのです。

3. 必要なパッケージのインストール

まずは、パソコンにこれらのツールを取り込む作業から始めます。これらは「npm（エヌピーエム）」という、プログラミングの道具箱から必要なものを取ってくる仕組みを使ってインストールします。パソコンを触ったことがない方でも、黒い画面（ターミナルやコマンドプロンプト）に魔法の言葉を打ち込むだけなので安心してください。

プロジェクトのフォルダで、以下のコマンドを実行します。


npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier

ここでインストールしたものの役割は以下の通りです：

eslint: ESLintの本体です。
@typescript-eslint/parser: ESLintがTypeScriptの言葉を理解できるようにする翻訳機です。
@typescript-eslint/eslint-plugin: TypeScript特有のルール（型チェックなど）をまとめたセットです。
prettier: Prettierの本体です。
eslint-config-prettier: ESLintとPrettierがケンカしないように、重複するルールを無効化する仲直り役です。

4. ESLintの設定ファイル（.eslintrc.js）を作ろう

次に、「どんなルールでチェックするか」を書いた設定ファイルを作成します。プロジェクトの１番上の階層に「.eslintrc.js」という名前のファイルを作り、以下の内容を書き込みます。


module.exports = {
    // 1. どの環境で動くコードかを指定
    env: {
        browser: true,
        es2021: true,
    },
    // 2. 基本となる推奨ルールを読み込む
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended', // TypeScript用の推奨ルール
        'prettier', // Prettierと衝突するルールをオフにする（最後に書くのがコツ！）
    ],
    // 3. TypeScriptを解析するための設定
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['@typescript-eslint'],
    // 4. 個別の細かいルール設定（必要に応じて追加）
    rules: {
        'no-console': 'warn', // console.logを使ったら警告を出す
    },
};

解説： 「extends」という部分は、世界中のプログラマーが「これがおすすめだよ」と言っている基本ルールをセットしています。一番最後に「prettier」と書くことで、見た目に関するチェックはPrettierに任せて、ESLintは中身のチェックに専念するようになります。

5. Prettierの設定ファイル（.prettierrc）を作ろう

今度は見た目のルールを決めます。「.prettierrc」というファイルを作り、以下の設定を書き込みましょう。これは「どんな見た目が好みか」を指定する場所です。


{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

用語の解説：

semi: 文の最後に「;（セミコロン）」を付けるかどうか。trueなら付けます。
singleQuote: 文字列を「'（シングルクォート）」で囲むかどうか。
tabWidth: 段落の先頭に空けるスペースの数。2が一般的です。
trailingComma: 複数のデータが並ぶとき、最後に「,（カンマ）」を付ける設定。管理しやすくなります。

6. 実際に動かしてみよう！

設定が終わったら、わざと汚いコードを書いて試してみましょう。例えば、スペースがバラバラでセミコロンもない、以下のようなTypeScriptファイルを用意します。


const  hello=( name:string )=>{
console.log("Hello, "+name)
}
hello("TypeScript")

これをターミナルでPrettierを実行して整形してみます。


npx prettier --write index.ts

すると、魔法がかかったように以下のような綺麗なコードに自動で書き換わります！


const hello = (name: string) => {
  console.log('Hello, ' + name);
};
hello('TypeScript');

実行結果のポイント：

関数周りのスペースが適切に挿入された。
ダブルクォートがシングルクォートに統一された。
行末にセミコロンが付与された。
インデント（段落）が正しく調整された。

7. VSCodeとの連携でさらに便利に

毎回コマンドを打つのは大変ですよね。実は、世界中で使われている「VSCode（ヴィジュアルスタジオコード）」というソフトを使えば、ファイルを保存した瞬間に自動で整形してくれるようになります。

拡張機能ストアから「ESLint」と「Prettier - Code formatter」を検索してインストールするだけです。さらに、設定で「Format On Save」にチェックを入れれば、あなたはもう見た目の修正に時間を取られることはありません。コードの内容に100％集中できるようになります。

8. よくあるトラブルと解決策

初めての導入でよくあるのが、「設定したのに動かない！」というパターンです。以下のチェックリストを確認してみてください。

ファイルの場所は正しいか： 設定ファイル（.eslintrc.jsなど）はプロジェクトのフォルダの直下にありますか？
拡張機能は有効か： VSCodeの右下に「ESLint」や「Prettier」のロゴが出ていて、バツ印がついていないか確認しましょう。
パッケージの入れ忘れ： 最初に紹介した「npm install」のコマンドでエラーが出ていなかったか見直しましょう。

プログラミングの世界では、環境構築（道具の準備）が一番難しいと言われることもあります。焦らずに一つずつ確認していけば、必ず自動整形の快適さを手に入れられます。

9. ES6/ESNextとの深い関係

TypeScriptは、ES6（2015年に登場したJavaScriptの大きな進化版）以降の機能を標準でサポートしています。例えば、「アロー関数」や「テンプレートリテラル」といった便利な書き方です。ESLintは、これらの新しい書き方を「古いブラウザでも動くように配慮されているか」や「最新のベストプラクティスに従っているか」までチェックしてくれます。

ESNext（次世代のJavaScript）の機能を先取りして使えるのがTypeScriptの魅力ですが、その分、ルールが複雑になりがちです。だからこそ、機械の目で厳しくチェックしてくれるESLintと、優しく整えてくれるPrettierのタッグが必要不可欠なのです。