LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@b-yuko

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

Last updated at Posted at 2024-02-23

目次

はじめに
README を読む
まとめ
次回のお知らせ

はじめに

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

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


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

README を読む

README.md をこんな感じに ↓ ３分割して見ていきます。
README.png

１つ目のブロック

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

(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

(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:

(google翻訳)
ESLint 構成の拡張
実稼働アプリケーションを開発している場合は、構成を更新してタイプ認識の lint ルールを有効にすることをお勧めします。
・最上位の parserOptions プロパティを次のように構成します

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 を解析してくれそう。

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

npm-@typescript-eslint:parser.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.

(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

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

今回 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

(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.

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

???
翻訳しなくていいところまで翻訳してる・・・。
コードスパンを意識して翻訳すると、

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

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

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.

(google翻訳)
すべての recommended と、タイプ情報を必要とする追加の推奨ルールが含まれます。 この設定で新しく追加されたルールは、recommended のルールと同様に役立ちます。

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

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.

(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

(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.

(google翻訳)
stylistic-type-checked
すべての stylistic と、型情報を必要とする追加の文体ルールが含まれます。 この構成で新たに追加されたルールは、 stylistic のルールと同様に意見が定められています。

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

３行目

・Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

(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

(google翻訳)
eslint の React 固有の lint ルール

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

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

上記の設定を全て反映させるとこうなる↓

.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 },
      ],
    },
  }
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 のエラーが出ることが予想されるので、必要に応じてルールを緩めるなど対応したいと思います。

記事はこちら 👇




目次に戻る

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?