MENU

2024 React Vite Tailwind CSSで快適開発!ESLint/Peritterとshadcn/uiの導入ステップガイド

最新のフロントエンド開発に挑戦しましょう!

本記事では、React、Vite、Tailwind CSSを使用した最新の開発環境構築手順を、ステップバイステップで詳細に解説します。ESLint/Peritterやshadcn/uiといったツールの効果的な導入方法を学び、快適で効率的な開発環境を手に入れましょう。

コード例や画像を交えながら、初心者から上級者まで幅広い開発者が追いやすい形で解説しています。
新しい時代のフロントエンド開発に向けて、一緒にステップを踏みましょう!

プロフィール
あいば
  1. 現役フルスタックエンジニア
  2. プレイングマネージャー
  3. テックリーダー
  4. 現職でエンジニアの採用、面接を実施中
目次

はじめに

実行環境

筆者の環境はWSL2を使用しています。

node -v
v21.1.0

npm -v
10.2.0

Reactプロジェクトの作成 (npm create viteを使用)

Reactプロジェクトを作成

Viteを使用して任意のプロジェクト名で作成します。
※ここではプロジェクト名を「react-vite-app-2024」としています。

npm create vite@latest react-vite-app-2024

色々質問されますので、答えていきましょう。

いろいろありますが「React」を選択します。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

ここは「TypeScript + SWC」を選択します。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC

そうするとこのような画面になりますので、ここに書いている手順を1つずつやっていきましょう。

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /home/wsl-user/app/react-vite-app-2024-1...

Done. Now run:

  cd react-vite-app-2024
  npm install
  npm run dev

まずディレクトリを移動します。

cd react-vite-app-2024

続いてnpm installをします。

npm install

以下のようなコンソールが出ればインストールまでは完了です。

npm install

added 165 packages, and audited 166 packages in 15s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

開発サーバーの起動

続いて開発サーバーを立ち上げます。

npm run dev

このようなコンソールが出れば開発サーバーが立ち上がっています。

> react-vite-app-2024@0.0.0 dev
> vite


  VITE v5.0.11  ready in 413 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

「http://localhost:5173/」にアクセスして以下のような画面が出ればReactのインストールは完了です。


ちなみにフロントエンド系のパッケージはアップデートが早いです。
この記事を執筆している時点(2024年1月)と,この記事をご覧頂いてイントールをしている方と時期がずれると思います。

そのためうまく動かない場合も考えられますので、参考までに筆者が環境構築した時点のバージョンを記載しておきます。

{
  "name": "react-vite-app-2024",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

ESLintのインストール

はじめに

ESLintですが、2024年1月時点でVite+Reactの環境を構築するとデフォルトでインストールされているためそのままでも問題ないですが、今後ESLintのバージョンがアップもあるためESLintは最新版を新たにインストールを行います。

ESLintのイニシャライズ

まずは以下のコマンドを実行

 npx eslint --init

構文チェックと問題を見つけるので「To check syntax and find problems」を選択

? How would you like to use ESLint? … 
  To check syntax only
▸ To check syntax and find problems
  To check syntax, find problems, and enforce code style

JavaScriptでモジュールを扱うため「JavaScript modules (import/export)」を選択

? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

今回はReactの環境構築のため「React」を選択

? Which framework does your project use? … 
▸ React
  Vue.js
  None of these

TypeScriptを使用しているため「Yes」を選択

? Does your project use TypeScript? ‣ No / Yes

ブラウザーで動くため「Browser」を選択

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
▸ Browser
  Node

設定ファイルをどの形式にするかの問です。
ご自身の好みの問題もあるかもしれませんが無難に「JavaScript」を選択

? What format do you want your config file to be in? … 
▸ JavaScript
  YAML
  JSON

依存がある必要なパッケージをインストールするかの問です。
問答無用で「Yes」で良いです。

The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
? Would you like to install them now? ‣ No / Yes

パッケージマネージャー何を使用しているかの問です。
今回は「npm」を使っているので選択します。

? Which package manager do you want to use? … 
▸ npm
  yarn
  pnpm

これでイントールが始まります。
完了後のすると以下の用になります。

{
  "name": "react-vite-app-2024",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.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.0.8"
  }
}

今回実行した結果です。
ログ程度ですのであまり気にしなくても良いです。

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-react@latest, @typescript-eslint/parser@latest

added 93 packages, and audited 259 packages in 5s

105 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.cjs file

動作確認

上記の手順で構築するとこのような設定ファイルがrootに出来上がっているはずです。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "react"],
  rules: {},
};

では早速ESLintで構文をチェックしましょう。
package.jsonにすでに書かれているスクリプトを以下の用に修正します。

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
    "preview": "vite preview"
  },

修正後以下のコマンドを実行します。

npm run lint:fix

以下のように構文チェックが走り、エラーが出ればOKです。

> react-vite-app-2024@0.0.0 lint:fix
> eslint --fix --ext .ts,.tsx ./src

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

/home/wsl-user/app/react-vite-app-2024-1/src/App.tsx
  10:5   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  11:7   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  12:9   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  13:11  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  15:9   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  16:11  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  19:7   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  20:7   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  21:9   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  24:9   error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  25:16  error  'React' must be in scope when using JSX  react/react-in-jsx-scope
  28:7   error  'React' must be in scope when using JSX  react/react-in-jsx-scope

✖ 12 problems (12 errors, 0 warnings)

不要な設定を見直し

上記のエラーは少し煩わしいため、offにしておくと良いです。
offにするためには以下の設定を追加します。

- rules: {},
+ rules: { "react/react-in-jsx-scope": "off" },

追加後再度以下のコマンドを実行してみましょう。

npm run lint:fix

この用にエラーが消えていればOKです。

> react-vite-app-2024@0.0.0 lint:fix
> eslint --fix --ext .ts,.tsx ./src

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

Peritterのセットアップ

インストール

以下のコマンドを実行します。

npm install -D prettier eslint-config-prettier

Peritterの設定ファイルの作成

まずはインストールしたPeritterの設定ファルを作成します。
Linuxの場合は以下のコマンドを実行してrootに「prettier.config.js」ファイルを作成しましょう。

touch prettier.config.js

設定ファルに以下を追加します。
このルールは公式に記載があるので、自分にあったルールを適応すればよいですが、私のおすすめは以下になります。

/** @type {import("prettier").Config} */
const config = {
  semi: true,
  singleQuote: true,
};

export default config;

ESLintとの共存させるための設定

ESLintをインストールにした際に自動で作成された「.eslintrc.cjs」に以下の追記しましょう。
※追記する場所は必ず「extends」の一番下に追記してください。

  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
+   "prettier",
  ],

スクリプトを追記して動作確認

「src」配下を自動整形の対象とするため以下を追記します。

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
+   "format": "prettier --write ./src",
    "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
    "preview": "vite preview"
  },

追加後スクリプトを実行します。

 npm run format

こんな感じのコンソールが出力されればOKです。

> react-vite-app-2024@0.0.0 format
> prettier --write ./src

src/App.css 42ms (unchanged)
src/App.tsx 205ms
src/index.css 14ms (unchanged)
src/main.tsx 12ms
src/vite-env.d.ts 6ms (unchanged)

実際の画像がこちらですね。
自動整形の対象となったファイルは白抜きで表示されます。

Tailwindcssのセットアップ

Tailwindcssとは

tailwind cssとは

Tailwind CSSはユーティリティクラスを提供するCSSフレームワークで、デザインやスタイリングを簡素化し、柔軟性を高めることを目的としています。
開発者はHTMLにクラスを追加するだけでスタイルを適用でき、柔軟なカスタマイズが可能で学習コストも低く素早くサイトを作成したい方に向いてます。

Tailwindcssのインストール

公式ページ記載の通りインストールします。

npm install -D tailwindcss postcss autoprefixer

設定ファイルを追加

インストール後初期設定を行うため、以下のコマンドを実行します。

npx tailwindcss init -p

「tailwind.config.js」と「postcss.config.js」がrootに作成されます。

ファイルを開き以下の設定を追加します。

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

続いて「index.css」の中身をすべて消してから以下を追記します。

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

「App.tsx」も以下のように簡易的な内容に書き換えてみましょう。
「App.css」もこのタイミングで削除しても良いです。

function App() {
  return <h1 className="bg-teal-400">Vite + React</h1>;
}

export default App;

この状態で起動してみましょう。

npm run dev

以下の画面が表示されればtailwindcssの設定は完了です。

shadcn/uiのセットアップ

shadcn/uiとは

shadcn/uiとは

Radix UI とTailwind CSSで作成されたインストール型のコンポーネントライブラリになります。
近年(2023年頃)から普及するようになり、特にtailwindcssを利用しているプロジェクトで使用されています。

初学者でデザインなどあまりしらなくてもそれなりの良い感じのWebページが作成できるコンポーネント集になります。筆者自身も管理画面などあまりデザインにこだわらないページを作成するとは使用しています。

事前準備

これから色々なコンポーネントをインストールするため、絶対パスでインポートできるように「vite-tsconfig-paths」のプラグインを入れておきましょう。

npm i -D vite-tsconfig-paths

インストール後「vite.config.ts」を以下の用に編集します。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

続いて「tsconfig.json」に以下の内容を追加します。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    },
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

これでインポートする際に「@/」と入力すると絶対パスで参照できるようになります。

shadcn/uiのセットアップ

インストールコマンドを実行します。

npx shadcn-ui@latest init

以下の用に対話型で質問されるので1つずつ回答していきましょう。
TypeScriptを使用しているので「yes」を選択します。

? Would you like to use TypeScript (recommended)? › no / yes

スタイルを聞かれているのでここは「Default」を選択します。
設定後でも変更可能です。

? Which style would you like to use? › - Use arrow-keys. Return to submit.
❯   Default
    New York

基本の色を聞かれているのでここは「Slate」を選択します。
設定後でも変更可能です。

? Which color would you like to use as base color? › - Use arrow-keys. Return to submit.
❯   Slate
    Gray
    Zinc
    Neutral
    Stone

グローバルのCSSファイルの場所を入力します。
Viteの場合は「src/index.css」と入力します。

? Where is your global CSS file? › src/index.css

「Yes」を選択します。

? Would you like to use CSS variables for colors? › no / yes

カスタムクラスのプレフィックスを聞かれていますが、特にこだわりなければ「Yes」を選択します。

? Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) › 

ここはそのままEnterキーで良いです。

? Where is your tailwind.config.js located? › tailwind.config.js

コンポーネントをインストールする場所です。
特に変更なしでエンターを押しましょう。

? Configure the import alias for components: › @/components

ユーティリティーファイルの配置場所です。
特に変更なしでエンターを押しましょう。

? Configure the import alias for utils: › @/lib/utils

Viteはサーバーコンポーネントは使用しないため「no」で良いです。

? Are you using React Server Components? › no / yes

最後は「Y」で勝手にインストールが始まります。

? Write configuration to components.json. Proceed? › (Y/n)

インストールが完了すればこのような表示が出ます。

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/index.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) … 
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You may now add components.

動作確認

インストールが完了したので正しく動作するかを確認します。
まずは以下のコマンドを実行します。

npx shadcn-ui@latest add button
✔ Done.

そうすると「src/components」新たにuiディレクトリと「button.tsx」が作成されます。

ではこちらのコンポーネントを「App.tsx」で読み込みます。

import { Button } from "./components/ui/button";

function App() {
  return (
    <>
      <h1 className="bg-teal-400">Vite + React</h1>
      <Button>shaduiインストールしたよ!</Button>
    </>
  );
}

export default App;

「npm run dev」で起動してみて以下の画面が立ち上がればセットアップは完了になります。

まとめ: フロントエンド開発の未来への一歩

この記事では、2024年最新のフロントエンド開発環境を構築するためのステップバイステップの手順を詳しく解説しました。
React、Vite、Tailwind CSSの組み合わせは、開発者にとって驚くほどの快適さとパフォーマンスを提供します。

さらに、ESLint/Peritterやshadcn/uiといったツールの適切な導入により、コード品質やデザインの一貫性を向上させることができます。

新しい時代のフロントエンド開発では、効率的なツールの選定と正確な導入が不可欠です。
本記事で紹介した手順を実践することで、開発プロセスがスムーズに進み、品質の高いアプリケーションを生み出すことができるでしょう。

これからのフロントエンド開発者たちにとって、新たな可能性が広がる一歩となりますように。お役立ていただければ幸いです。未来のコーディングに向けて、共に歩んでいきましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次