【React】Viteを使って爆速で環境構築を行う: ESLint Prettier

今回は、ViteでReactの環境を構築する方法について書きました。内容はいろんなところの焼き増し記事になります。なので、自分の考えを多めに書いておきます。それでも短くなってしまったので、軽めに誰かの手助けになればよいなと思います。ひとまず伝えたいことはCRAよりはViteやで！！ESLintとPrettierの設定もしてます。

1 ご挨拶
2 Viteで環境構築
3 Tailwind CSSの導入
4 フォーマット周りの設定
- 4.1 Visual Studio Code（VSCode）で設定する方法
- 4.2 ESLintを拡張する方法
5 なぜ？CRAじゃなくてViteなのか？？
6 Reactを勉強する上で最低限の環境構築って？
7 オレオレ環境構築はGitHubにあげとこうぜ！って話
8 終わりに

ご挨拶

どもども！寒くなったり熱くなったりして、絶妙に体調が悪くなってきたような気がします。ポータブル扇風機を買うか悩みますね。扇風機の発明は偉大ですよね。来週には連続休暇で10日ほど休む予定なので、そこで体調が悪化しないように気を付けるしかないですね。

さて、今回は「とりあえずReactの環境構築をしよう」になります。社内の勉強会で、crete-react-app（移行：CRA）の方法が訴状に上がっていました。なぜCRAがダメなのか？というお話は、いろんな方が言及しています。「React初めて勉強します！」という方は、何で環境構築を作成するかという話は、気にしなくて大丈夫です。

今回のシナリオとしては「ViteでReactの環境構築を行う」となります。

Viteで環境構築

Viteで環境構築を行うためには、Nodeの環境が必要になります。あとは以下の好きなコマンドを打ちこんでもらえれば、CLIでテンプレートの設定まで行えます。

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

以下にCLIのイメージを置いておきます。

CLIを叩くだけで、画面に従って入力すれば環境が作成されます。

Tailwind CSSの導入

公式のページがとても参考になります。というかそのままですね。

基本的にプロジェクトを新規に開く場合は、Tailwind CSSを導入しています。設定自体はさくっと行えるので設定していきましょう。順番にコマンドを実行してください。

yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

自動でファイルが追加されています。自動で作成された、tailwind.config.jsファイルを編集します。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

こちらでは、Tailwind CSSを書いているファイルを指定する必要があります。次にsrc配下のindex.cssに以下の内容を追記します。

@tailwind base;
@tailwind components;
@tailwind utilities;

この設定まで行えば、Tailwind CSSを使用することができます。確認のために適当な文章を書いてみましょう。

フォーマット周りの設定

Viteでは、ESLintがデフォルトで設定されるようになっています。より良い開発体験のためには、デフォルトの開発設定に少し手を加えたほうが良いです。（いろいろ探し回ってちょこちょこと設定してます）

今回は、Visual Studio Codeで設定する方法とESLintに追加で設定する方法の二通りについて執筆します。

Visual Studio Code（VSCode）で設定する方法

まずは、VSCodeを開いてください。Ctrl＋Pを押して以下の文章を入力してください。するとJSONが立ち上がります。

>preferences:Open User Settings (JSON)

立ち上がったJSONに以下の文言を追加してください。

{
  "editor.formatOnSave": true,
	"editor.formatOnPaste": true,
  "editor.codeActionsOnSave": [
    "source.addMissingImports",
    "source.fixAll.eslint",
  ],
}

こちらの設定では、以下の設定をしています。

ソースコードをペーストした際にフォーマットを走らせる
ファイルを保存した際にフォーマットを走らせる
ファイルを保存する際に使用していないインポートを削除する
ファイルを保存する際にESLintで修正する

VSCode上で設定することができるので、意識せずともフォーマットを適応することができます。

ESLintを拡張する方法

こちらでは、Viteで導入されるデフォルトのESLintに加えて以下のルールを追加します。

フォーマットとしてPrettierを導入する
Tailwind CSSのESLintルールを追加する
インポートの順番と不必要なインポートを削除する

一気にコマンドを叩くと楽になります。

# Prettierの設定
yarn add -D prettier eslint-config-prettier

# Tailwindのルール導入
yarn add -D eslint-plugin-tailwindcss

# importの並び替えと不必要なインポートの削除
yarn add -D eslint-plugin-import eslint-plugin-unused-imports

もしすべてのルールを導入する場合は、こちらのコマンドをコピーしてください。

yarn add -D prettier eslint-config-prettier eslint-plugin-tailwindcss eslint-plugin-import eslint-plugin-unused-imports

インストールするだけでは、ファイルは動きません。.eslintrcと書かれているファイルを開いてください。形式が複数あるので、自分の環境のファイルを開いてください。私の環境では.eslintrc.cjsになるので、この形式で解説します。extendsとpluginsに追記する必要があります。〇っとコピーせずに自分のところにないものを追加していってください。この辺は詳しく解説されている記事を見つけたので、参考として並べておきます。

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:tailwindcss/recommended",
    "prettier",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh","import","unused-imports","tailwindcss"],
  rules: {
    "unused-imports/no-unused-imports": "error",
    "import/order": [
      "error",
      {
        groups: [
          "builtin", // 組み込みモジュール
          "external", // npmでインストールした外部ライブラリ
          "internal", // 自作モジュール
          ["parent", "sibling"],
          "object",
          "type",
          "index",
        ],
        "newlines-between": "always", // グループ毎にで改行を入れる
        pathGroupsExcludedImportTypes: ["builtin"],
        alphabetize: {
          order: "asc", // 昇順にソート
          caseInsensitive: true, // 小文字大文字を区別する
        },
        pathGroups: [
          // 指定した順番にソートされる
          // {
          //   pattern: "@/components/common",  // パターン
          //   group: "internal",               // グループ名
          //   position: "before",              // どの位置に挿入するか
          // },
        ],
      },
    ],
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
};

なぜ？CRAじゃなくてViteなのか？？

CRAでもViteでも、コマンドを叩けば環境が作成されます。「CRA vs Vite」と検索すると、ほかの人の言及を覗くすることができます。CRAは内部でWebpackを使用しているので、Build Toolsに言及して検索するのもアリです。

とりあえず、ざっくりとまとめると「小さいプロジェクトだとめちゃ早い！」です。CRAよりも早いよ！というところだけ、押さえておけば良いですね。

CRAは、Reactを作ったFacebookが出しているので歴史がすごーく長いです。そのため周辺システムが充実しています。じゃあCRAが良いじゃないか？って思いますよね。とりあえず、公式のGitHubでも見ますか。更新は、2022年4月13日が最後になります。Issueは2023年10月時点で1.7kあります。ついでに公式のリファレンスからも削除が決定されました….

一方で、ViteはCRAの後続になります。公式のGitHubを覗いてみましょう。更新は、2023年10月時点で、先週（last week）になっているので継続的にメンテされています。issueも435とびっくりする数字ではないですね。まぁIssueに関しては、解決済みの数字を見るほうが確かなのですが良いでしょう。

なので、React公式の言及とCRAの現状を見ると、小さいプロジェクトでViteを使うことは良いのでは？というさぼり結論を出しておきます。

Reactを勉強する上で最低限の環境構築って？

あまりにも短いので、Reactを勉強する上で対応したほうが良いことについて書いていこうと思います。Reactの特徴としては、コンポーネント単位で話が進んでいきます。コンポーネントとデザインがセットで、話が進んでいくことがよくあります。コンポーネントの動作を確認したいがために、ページを作成するといったことがあります。

その辺の問題点を解消するのが「Storybook」になります。こちらを使用すると、コンポーネント単体での確認作業をすることができます。以下がイメージになります。