Type something to search...
to navigateto selectESC to close
【2024年】React開発環境構築をViteを使って構築しよう

【2024年】React開発環境構築をViteを使って構築しよう

Reactに何を導入するのか

2024年現在で個人的に導入した方が良いなと思うライブラリは以下です。

  • Vite (フロントエンドツール)
  • Vitest (テスト用)
  • Eslint (構文チェック)
  • Prettier (コードフォーマッタ)
  • husky, lint-staged(コミット前自動コマンド発火)
  • StoryBook (UIカタログ)
  • TailwindCSS (CSSフレームワーク, option)
  • Shadcn/ui (UIコンポーネントライブラリ, option)

初期セットアップとしてこれらを導入すればプロジェクト開発は割とスムーズにいくかなと思います。

完成系のGithubソースコードはこちらです。 完成版ソースコード

それでは順番にはじめます。

Viteを使って環境構築開始

まず始めにviteが高速なのでviteを利用します。ターミナルで以下を実行します。

npm create vite@latest react-env-setup -- --template react-swc-ts

swcはRustベースのWebコンパイラです。高速に動くので採用します。 作成したプロジェクトに移動します。

cd react-env-setup
npm install
npm run dev
npm run build
npm run preview

これらを実行して動くか確認してください。previewはbuildした際のdistフォルダのindex.htmlを読み込みます。本番環境で動く動作の確認ができます。

importパスエイリアス設定

ファイルをimportする際に

import Sample from "../../../components/Sample.tsx";

のような相対パスだと取り扱いにくいので

import Sample from @/components/Sample.tsx

のような形に変更するパスエイリアス設定をします。

(./tsconfig.json)

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },

これでパスエイリアス設定は終了です。ただ、viteで環境構築している場合はvite.config.tsも設定を変更する必要があるので、それは面倒です。なのでvite-tsconfig-pathsモジュールをインストールします。

npm i -D vite-tsconfig-paths

(./vite.config.ts)

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

export default defineConfig({
  plugins: [react(), tsconfigPaths()], //for path alias
});

これでtsconfig.jsonファイルの修正は不要になりました。

vitestでテストの導入

今回はvitestとtesting-libraryを使ってテストができる環境を作ります。以下をインストールしましょう。

npm install -D vitest happy-dom @vitest/coverage-v8 @testing-library/react @testing-library/user-event @testing-library/jest-dom

happy-domはjest-domよりも高速で動くテスト仮想環境を構築します。なので最近ではhappy-domが使われるのでこちらをインストールしましょう。

テストとカバレッジテストも行いたいので、package.jsonに以下を追加しましょう。

//省略
 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:watch": "vitest watch",
    "coverage": "vitest run --coverage",
  },
//省略

testしたいときはnpm run testコマンド、カバレッジテストしたい時はnpm run —coverageでテストができます。

また、happy-domとvitestをテストの際に利用したいので、vite.config.tsファイルを以下のように修正します。

/// <reference types="vitest" />
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true, //追加
    environment: "happy-dom", //追加
    setupFiles: ["./vitest-setup.ts"], //追加
  },
});

そしてvitest-setup.tsファイルを作成します。

(./vitest-setup.ts)

import "@testing-library/jest-dom/vitest";

つづいて、tsconfig.jsonの中身に以下を追加してください。

//省略
 /* path alias */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },

    "types": ["vitest/globals"] //これを追加
//省略

としてください。これでvitestで利用されるtestやexpect関数がimportなしで利用できるようになります。

もしもtestやexpect関数が利用できない場合は以下をtsconfig.jsonファイルに追加してください。

{
  "include": ["src", "vitest-setup.ts"]
}

それではテストの準備が完了したので、実際にテストできるかテストします。

仮のテスト実装

テキストを入力できるインプットコンポーネントを仮に実装してみます。

(.src/components/TextInput.tsx)

import { useState } from "react";

const TextInput = () => {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter some text"
        aria-label="Text Input"
      />
      <p>Entered Text: {text}</p>
    </div>
  );
};

export default TextInput;

ラベル文字のテストと入力発火のテストを実装してみます。

(./src/components/TextInput.test.tsx)

// TextInput.test.js
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";
import TextInput from "./TextInput";

test("TextInput Component Test", async () => {
  const user = userEvent.setup();
  render(<TextInput />);

  const inputElement = screen.getByLabelText("Text Input");
  expect(screen.getByText("Entered Text:")).toBeInTheDocument();

  await user.type(inputElement, "Hello World");
  expect(screen.getByText("Entered Text: Hello World")).toBeInTheDocument();
});

これでテストに成功すればvitestのセットアップは終了です。続いてはeslintとprettierのセットアップに移行します。

EslintとPrettierで構文チェックとコード整形

Eslintはプロジェクト内での構文ルールを決めるために使われるライブラリで、Prettierはコードフォーマッタ(コード整形)に関与するライブラリです。これらのセットアップを行います。

まずはEslintのインストールから。

npm install -D eslint
npx eslint --init

として初期化コマンドを実行してください。eslintrc.cjsファイルが自動生成されます。package.jsonにlintするためのスクリプトを記述しておきましょう。

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:watch": "vitest watch",
    "coverage": "vitest run --coverage",
    "lint": "eslint src", //追加
}

eslintrc.cjsを以下のように修正してください。

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: {
    "react/react-in-jsx-scope": "off",
  },
};

構文チェックが自動で入ります。ここで恐らく./src/App.tsxファイルに構文エラーが出てくるはずです。具体的には

 <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">

の部分ですね。rel=“noopener noreferrer”に修正してください。タブを開いた時に参照元の追跡ができないような修正です。セキュリティ対策になります。 構文エラーの場所を探すのが面倒という場合は

npm run lint

と実行するとエラー箇所のファイル名とルール名がターミナル上で出力されるので確認してみてください。

Prettierの設定

Prettierをインストールします。既にPrettierの拡張機能をエディタにインストールしている場合はこの手順はスキップしても構いません。

npm i -D prettier

prettier.config.jsを作成してください。プロジェクトのルートディレクトリで構いません。

/** @type {import("prettier").Config} */
const config = {};

export default config;

設定は何もしていません。デフォルトのままで行います。これでも整形されるのでOKです。エディタのセーブ時にコード整形を行いたい場合はVSCodeのsettings.jsonファイルにformat on saveを追加してください。

これで簡単ではありますがprettierの設定も終了です。

hasky + lint-stagedの導入

haskyとlint-stagedを組み合わせる事で、gitにコミットする前(Gitフックで任意に設定可能)にlintやformat等のコマンドを走らせることができます。リポジトリを汚さないという意味でコミット前に整形済みのコードを入れるために使われます。

まずは今作っているプロジェクトのgithubのリポジトリを作成してみてください。リポジトリの作成方法に関しては省略します。次に必要なライブラリをインストールします。

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install" //package.jsonのscriptにprepareが追加される
npm run prepare //.huskyディレクトリが生成される
npx husky add .husky/pre-commit "npx lint-staged"

次に、package.jsonファイルを修正します。

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,md}": ["prettier --write", "eslint --fix"]
  },
  "ignorePatterns": ["!.storybook"]
}

commitする前に実行されるコマンドとstorybookのディレクトリは無視するという記述です。これでcommitする前にeslintとprettierのコマンドが走ります。もし構文エラーの場合はcommitされません。コミットしてみます。

git init
git remote add origin https://github.com/GitHubのユーザー名/リポジトリ名.git
git branch -M main
git add .
git commit -m "first commit" //ここで検証される
git push -u origin main

もしも構文エラーが発生した場合は修正してから再度コミットしてください。これでhuskyとlint-stagedの設定は終了です。

StoryBookの導入

StoryBookは作成したUIライブラリをカタログとして保存・共有できるライブラリです。チーム内でUIイメージの齟齬がないように利用されます。最近のプロジェクトでは導入されるケースが多いので、これもセットアップしておきましょう。以下のコマンドで初期化します。

npx storybook init --builder @storybook/builder-vite

これで必要なEslintのプラグインやpackage.jsonのscriptsの中身が更新されます。 自動でstoryディレクトリ内部にサンプルとしてボタンやヘッダーのコンポーネントやストーリが入るので実際にローカルで確認してみます。

また、自動でストーリーのサーバがブラウザで立ち上がると思います。手動で立ち上げたい場合は

npm run storybook

でlocalhost:6006番で確認できます。これでStoryBookのセットアップは完了です。

※TailwindCSSとshadncn/uiライブラリの導入は公式のinstallタブからviteやreactを選択して行ってみてください。手順通りに簡単に初期化セットアップができます。

最後に

こちらのセットアップ方法ですが、Youtubeにてアップロードしています。

分からなかったという方はこちらの動画を見てみてください。またハイレベルなWebエンジニアを目指すためのコミュニティも運営しております。

ShinCode_Camp

1週間お試し無料期間をやっておりますので気になる方はぜひチェックしてみてください。それでは今回は以上になります。

Tags :
Share :

Related Posts