作成したViteプロジェクトのREADMEを読む

# 目次
[はじめに](#はじめに)
[README を読む](#readme-を読む)
[まとめ](#まとめ)
[次回のお知らせ](#次回のお知らせ)



# はじめに
この記事は、TODOアプリを環境構築から作っていく様子を、少しずつ投稿してく、第２回目の記事になります。

前回の記事はこちらです 👇

https://qiita.com/b-yuko/items/bf59604b53eda6c3a6f1

<br>



前回は、Viteプロジェクトを生成しました。
まだ生成されたファイルを確認していないので、とりあえず README を確認したいと思います！
(英語は読めん・・・google翻訳先生お願いします<(_ _*)>)



# README を読む
README.md をこんな感じに ↓ ３分割して見ていきます。
![README.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695365/2c518dd1-5600-0b68-6f8c-3d251515fa1d.png)





## １つ目のブロック
>This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.<br>
(google翻訳)
このテンプレートは、HMR およびいくつかの ESLint ルールを使用して Vite で React を動作させるための最小限のセットアップを提供します。

`HMR` って何の略だろう？
Home Meal Replacement ･･･? なんだかお腹が空くな〜･･･お惣菜?? いや、これは絶対違うw

**Hot Module Replacement** これだっ!!! ホットリロードしてくれるやつね👍

>Currently, two official plugins are available:
・@vitejs/plugin-react uses Babel for Fast Refresh
・@vitejs/plugin-react-swc uses SWC for Fast Refresh<br>
(google翻訳)
現在、2 つの公式プラグインが利用可能です。
・@vitejs/plugin-react は高速リフレッシュに Babel を使用します
・@vitejs/plugin-react-swc は高速リフレッシュに SWC を使用します

うん。前回 Vite プロジェクトを生成したときに `SWC` を選択した覚えがある。
`package.json` を見ると、`"@vitejs/plugin-react-swc": "^3.5.0"` が入ってるのが確認できたから、すでに利用してるってことね。






## ２つ目のブロック

> Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
・Configure the top-level parserOptions property like this:<br>
(google翻訳)
ESLint 構成の拡張
実稼働アプリケーションを開発している場合は、構成を更新してタイプ認識の lint ルールを有効にすることをお勧めします。
・最上位の parserOptions プロパティを次のように構成します
>```cjs
>export default {
>  // other rules...
>  parserOptions: {
>    ecmaVersion: 'latest',
>    sourceType: 'module',
>    project: ['./tsconfig.json', './tsconfig.node.json'],
>    tsconfigRootDir: __dirname,
>  },
>}
>```

ん〜？
`eslintrc.cjs` に `parserOptions` をこのまま追加したらよいのかな？？多分。

ところで `parserOptions` って何？？
option ってことは、parser の option ってことかな？？
そしたら parser って何なの？？

え〜っと。。。(google検索中・・・)

この ESLint 公式ドキュメントの parser のページ が役に立ちそう。
👉 https://eslint.org/docs/latest/use/configure/parser

parser は、ソースコードを ESLint が解析できる形式に変換するものって感じかな。
parser には、ESLint が どの言語のソースコードを解析するのか を設定するっぽい。
デフォルトだと JavaScript のコードを解析する設定になっているらしい。
`eslintrc.cjs` を見てみると、`parser: '@typescript-eslint/parser'` となっているので、typescript を解析してくれそう。
<br>

せっかくなので、npm の @typescript-eslint/parser のページも見てみよう。
👉 https://www.npmjs.com/package/@typescript-eslint/parser

> ![npm-@typescript-eslint:parser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695365/43eca654-f29f-7092-0f4a-f9c325a8751f.png)

> An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
> 👉 See https://typescript-eslint.io/packages/parser for documentation on this package.
>See https://typescript-eslint.io for general documentation on typescript-eslint, the tooling that allows you to run ESLint and Prettier on TypeScript code.<br>
(google翻訳)
TypeScript ESTree を利用して ESLint が TypeScript ソース コードを lint できるようにする ESLint パーサー。
👉 このパッケージのドキュメントについては、https://typescript-eslint.io/packages/parser を参照してください。
TypeScript コードで ESLint と Prettier を実行できるツールである typescript-eslint に関する一般的なドキュメントについては、https://typescript-eslint.io を参照してください。


ほほ〜。ドキュメントを参照してくださいって言われたら見に行っちゃうよね〜。
おぉ〜。`parserOptions` の interface が載ってるじゃん。それぞれ解説もしてそう。
👉 https://typescript-eslint.io/packages/parser/#configuration
<br>

う〜ん・・・ってことは `parserOptions` は、ソースコードを解析するときの詳細設定ができるよ〜って感じなのかな。
<br>

今回 `parserOptions` に追加してほしいよ〜って言ってるのが、
> ecmaVersion: 'latest'

これは、ECMAScript の最新バージョン使うよーって言ってて、

> sourceType: 'module'

これは、JavaScript のモジュールシステムのタイプは ECMAScript モジュールだよーって言ってて、

> project: ['./tsconfig.json', './tsconfig.node.json']

これは、TypeScript の設定ファイルがどこにあるか相対パスで教えてあげてるのかな。
型情報を必要とするルールを使用するときは、必ず設定する必要があるんだって。

> tsconfigRootDir: __dirname

これは、TypeScript の設定ファイルがどこにあるか絶対パスで教えてあげてて、ルートディレクトリ以外から Lint を実行しても TypeScript の設定ファイルを見つけられるようにしているみたい。
`__dirname` は CommonJS の特殊な変数で、現在のディレクトリパスを取得するものなんだって。

うん。中身が理解できたから、`eslintrc.cjs` に `parserOptions` をコピペしてこのまま追加しちゃいましょ〜🎉🎉🎉





## ３つ目のブロック
３行あるので順番にひとつずつ見ていきます。

### １行目
> ・Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`<br>
(google翻訳)
・`plugin:@typescript-eslint/recommended` を `plugin:@typescript-eslint/recommended-type-checked` または `plugin:@typescript-eslint/strict-type-checked` に置き換えます。

`recommended` を `recommended-type-checked` か `strict-type-checked` に置き換えることを提案してるのね。でも、なんで置き換えてほしいんだろう？？
それぞれのプラグインが何者なのかをよく知らないと、置き換える判断もできないので調べます。

typescript-eslint の公式ドキュメント。
👉 https://typescript-eslint.io/users/configs/

> `recommended`
Recommended rules for code correctness that you can drop in without additional configuration. These rules are those whose reports are almost always for a bad practice and/or likely bug. `recommended` also disables core ESLint rules known to conflict with typescript-eslint rules or cause issues in TypeScript codebases.<br>
(google翻訳)
推奨
追加の構成を行わずに導入できる、コードの正確性に関する推奨ルール。 これらのルールは、ほとんどの場合、悪い習慣やバグの可能性を報告するものです。 また、typescript-eslint ルールと競合するか、TypeScript コードベースで問題を引き起こすことが知られているコア ESLint ルールを無効にすることをお勧めします。

???
翻訳しなくていいところまで翻訳してる・・・。
コードスパンを意識して翻訳すると、
> (google翻訳)
`recommended`
追加の構成を行わずに導入できる、コードの正確性に関する推奨ルール。 これらのルールは、ほとんどの場合、悪い習慣やバグの可能性を報告するものです。`recommended` は、typescript-eslint ルールと競合するか、TypeScript コードベースで問題を引き起こすことが知られているコア ESLint ルールも無効にします。

うん。これならわかる！！翻訳するとき気をつけよう・・・(学び)。<br><br>

> `recommended-type-checked`
Contains all of `recommended` along with additional recommended rules that require type information. Rules newly added in this configuration are similarly useful to those in `recommended`.<br>
(google翻訳)
すべての `recommended` と、タイプ情報を必要とする追加の推奨ルールが含まれます。 この設定で新しく追加されたルールは、`recommended` のルールと同様に役立ちます。

要するに、`recommended` のルール ＋ 型情報が必要な追加の推奨ルール ってことかな。<br><br>


> `strict-type-checked`
Contains all of `recommended`, `recommended-type-checked`, and `strict`, along with additional strict rules that require type information. Rules newly added in this configuration are similarly useful (and opinionated) to those in `strict`.<br>
(google翻訳)
`recommended`、`recommended-type-checked`、および `strict` のすべてと、型情報を必要とする追加の厳密なルールが含まれています。 この設定で新しく追加されたルールは、`strict` のルールと同様に便利です (そして独自の意見があります)。

`strict` の説明も読んだけど、これはルールが厳しそう。
あんまりうるさく言われたくないから、置き換えるなら `plugin:@typescript-eslint/recommended-type-checked` かな。
試しに `recommended-type-checked` を入れてみて、問題があればその都度解決していくことにします。


### ２行目
> ・Optionally add `plugin:@typescript-eslint/stylistic-type-checked`<br>
(google翻訳)
・必要に応じて `plugin:@typescript-eslint/stylistic-type-checked` を追加します

`stylistic-type-checked` は何だろう？？

typescript-eslint の公式ドキュメント。
👉 https://typescript-eslint.io/users/configs/#stylistic-type-checked

> `stylistic-type-checked`
Contains all of `stylistic`, along with additional stylistic rules that require type information. Rules newly added in this configuration are similarly opinionated to those in `stylistic`.<br>
(google翻訳)
`stylistic-type-checked`
すべての `stylistic` と、型情報を必要とする追加の文体ルールが含まれます。 この構成で新たに追加されたルールは、 `stylistic` のルールと同様に意見が定められています。

うーーーん・・・。
追加されるルールを少し見てみたけど、そこまで矯正しなくてもいいかな〜って気がする。
必要に応じてって書いてあるし今回は入れないという選択をしたいと思います。


### ３行目
> ・Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list<br>
(google翻訳)
・eslint-plugin-react をインストールし、`plugin:react/recommended` および `plugin:react/jsx-runtime` を拡張リストに追加します。

ESLint の react 用のおすすめ設定かな？？

eslint-plugin-react GitHubページ
👉 https://github.com/jsx-eslint/eslint-plugin-react

> React specific linting rules for `eslint`<br>
(google翻訳)
`eslint` の React 固有の lint ルール

React 使うから。うん。入れちゃいましょう。

```
npm install eslint eslint-plugin-react --save-dev
```

上記の設定を全て反映させるとこうなる↓
```diff:.eslint.cjs

  module.exports = {
    root: true,
    env: { browser: true, es2020: true },
    extends: [
      'eslint:recommended',
-     'plugin:@typescript-eslint/recommended',
+     'plugin:@typescript-eslint/recommended-type-checked',
      'plugin:react-hooks/recommended',
+     'plugin:react/recommended',
+     'plugin:react/jsx-runtime'
    ],
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
+   parserOptions: {
+     ecmaVersion: 'latest',
+     sourceType: 'module',
+     project: ['./tsconfig.json', './tsconfig.node.json'],
+     tsconfigRootDir: __dirname,
+   },
    plugins: ['react-refresh'],
    rules: {
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }

```

```diff:package.json

  {
    /* 省略 */
    "devDependencies": {
      "@types/react": "^18.2.55",
      "@types/react-dom": "^18.2.19",
      "@typescript-eslint/eslint-plugin": "^6.21.0",
      "@typescript-eslint/parser": "^6.21.0",
      "@vitejs/plugin-react-swc": "^3.5.0",
      "eslint": "^8.56.0",
+     "eslint-plugin-react": "^7.33.2",
      "eslint-plugin-react-hooks": "^4.6.0",
      "eslint-plugin-react-refresh": "^0.4.5",
      "typescript": "^5.2.2",
      "vite": "^5.1.0"
    }
  }

```


# まとめ
今回は、READMEを読み解きました！！
そして、ESLintの設定を少し変更しました。

具体的な変更点：
  - `parserOpthions` を README に書いてある通りに付け足した
  - `plugin:@typescript-eslint/recommended` を `plugin:@typescript-eslint/recommended-type-checked` に変更した
  - `eslint-plugin-react` をインストールして、`plugin:react/recommended` と `plugin:react/jsx-runtime` を `extends` に追加した


うーーーん。README を読み解くだけで、結構エネルギー使って疲れちゃった💦
本当は Prettier まで設定して、Lint を実行してルールの調整もしたかったけど、記事も長くなってしまったので今回はこの辺りで終わろうと思います。

git commit -m "READMEを読みながらlintの設定をした"
GitHubリポジトリ 👉 https://github.com/b-yuko/todo-app-tdd


# 次回のお知らせ
あともう少しだけ Lint の設定をしたいのと、Prettier の設定をしたら、Lint と Prettier をまとめて実行できるようにしていきます。
おそらく Lint を実行した時点で Lint のエラーが出ることが予想されるので、必要に応じてルールを緩めるなど対応したいと思います。

記事はこちら 👇

https://qiita.com/b-yuko/items/b1dd18b5373f1b4629c7

<br><br><br>


[目次に戻る](#目次)