TypeScript+Next.js+Vite+VitestでWebアプリを開発する【環境構築編】

現時点でトレンドであるライブラリを集めて環境を構築してみます。

Node.js+npmのインストール

Node.jsの公式ウェブサイトからインストーラーをダウンロードしてインストールします。
インストーラーを実行したら適宜次に進んでインストールを完了してください。

Next.jsのプロジェクト作成

まずはnpx create-next-app@latestというコマンドを打って以下の質問に答えましょう。

What is your project named?
作成するプロジェクト名を入力しましょう。
Would you like to use TypeScript?No / Yes
TypeScriptを使用したい場合はYes、JavaScriptを使用したい場合はNoを入力してください。
今回はTypeScriptの学習を目的としていますので、Yesとします。
JavaScriptに比べるとやや大変ですが、主流のようなので覚えておくとよいでしょう。
Would you like to use ESLint? No / Yes
静的解析ツールとしてESLintを使用する場合はYesを入力します。
こちらはYesを入力しましょう。
Would you like to use Tailwind CSS? No / Yes
CSSフレームワークTailwindCSSを使用する場合はYesを入力してください。
boostrapを使用したい等の理由で使用しない場合はNoを入力してください。
Would you like to use `src/` directory? No / Yes
srcフォルダを使用するかどうかですね。
こちらはお好みでどうぞ。
Would you like to use App Router? (recommended) No / Yes
Next.jsの新しいルーティング機能としてPages Routerから変えたようです。
以降App Routerを推すようなのでYesとしておきましょう。
Would you like to customize the default import alias (@/*)? No / Yes
モジュールをインポートする際に@マークを指定することでソースコードのルートディレクトリを指定することができます。基本的にはNoで問題ないですが、そのディレクトリを変更したい場合のみYesとしてください。
例：import { OtherModule } from "@/commponents/mains/OtherModule"

Vite+Vitestの環境構築

必要なパッケージの追加

まずはnpm install -D vite vitest @vitejs/plugin-react-swc jsdom @testing-library/reactを実行して必要なプラグインを追加します。

Viteの設定

続いてプロジェクトのルートディレクトリにvite.config.tsとvitest.config.tsの二つのファイルを作成し、以下のコードを追加してください。

vite.config.ts

import { defineConfig } from "vite"
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
    plugins: [react()]
})

vitest.config.ts

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react-swc'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

そしてpackage.jsonにtestを追加してください。

package.json

{
  "scripts": {
    // ...

    "test": "vitest"
  }
}

Viteの確認

npx viteを実行してViteを起動。その後npm run devを実行してhttp://localhost:3000にアクセスする。
Next.jsのスタートページが表示されたらNext.jsとViteの導入は完了です。

Vitestの確認

ルートディレクトリに__tests__フォルダを作成。その中にpage.test.tsxを作成し以下のテストコードを追加してください。

page.test.tsx

import { expect, test } from 'vitest'
import { getByRole, render, screen } from '@testing-library/react'
import Home from '../app/page'
 
test('スタートページに"Get started by editing"という文字が表示される', () => {
  render(<Home />)
  expect(screen.getByText('Get started by editing')).toBeDefined()
})

その後npm run testを実行して結果を確認。1 passedと表示されたらテスト成功です。