システム屋さんの備忘録: 【第1回】React + Vite + TypeScript + MUIで開発環境を最速構築しよう【2025年版】

✅はじめに

こんにちは！このシリーズでは、React + Vite + TypeScript + MUIという現代的な技術スタックを使って、Webアプリを開発する方法をステップバイステップで解説していきます。

第1回となる今回は、開発環境の構築と初期プロジェクトの作成、そしてMUIを使った簡単なUI表示までを行います。

📦使用する技術スタック

ツール	バージョン	説明
React	19.1.0	フロントエンドJavaScriptライブラリ
Vite	6.3.5	爆速な開発環境を提供するビルドツール
TypeScript	5.8.3	型安全なJavaScriptのスーパーセット
MUI	7.1.0	Googleのマテリアルデザインに基づいたUIライブラリ

🛠1.必要なツールの準備

以下がインストールされていることを確認してください。

Node.js（最新版）
任意のエディタ（例：Visual Studio Code）

🚀2.プロジェクトの作成

以下のコマンドをターミナルで実行して、Vite + React + TypeScript のプロジェクトを作成します。

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

🎨3.MUIのインストール

次に、MUIのライブラリとRobotoフォントをインストールします。

npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto

🧹4.index.cssを空にする

Vite のテンプレートには、初期状態でスタイルが含まれています。このスタイルは MUI のレイアウトに干渉するため、src/index.css の中身をすべて削除（もしくはコメントアウト）してください。

🧑‍💻5.main.tsxの編集

Robotoフォントを適用するために、src/main.tsxを以下のように編集します：

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

// Robotoフォントのインポート
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

👨‍💻6.App.tsxの作成

次に、src/App.tsxを以下のように書き換えて、MUIのコンポーネントとRobotoフォントを使用したUIを作成します：

import { useState } from 'react'
import { Button, Container, Typography, ThemeProvider, createTheme, Box } from '@mui/material'

type CounterProps = {
  initialCount?: number;
};

// カスタムテーマを作成
const theme = createTheme({
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
});

function App({ initialCount = 0 }: CounterProps) {
  const [count, setCount] = useState(initialCount)

  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="sm" sx={{ textAlign: 'center', mt: 5 }}>
        <Typography variant="h4" gutterBottom>
          React + Vite + MUI スターター
        </Typography>
        <Typography variant="body1" gutterBottom>
          カウント: {count}
        </Typography>
        <Button variant="contained" onClick={() => setCount(count + 1)}>
          カウントを増やす
        </Button>

        {/* フォントの比較表示 */}
        <Box sx={{ mt: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <Typography variant="h6">
            フォントの比較
          </Typography>
          <Typography sx={{ fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif' }}>
            これはRobotoフォントです (The quick brown fox jumps over the lazy dog)
          </Typography>
          <Typography sx={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
            これはシステムフォントです (The quick brown fox jumps over the lazy dog)
          </Typography>
        </Box>
      </Container>
    </ThemeProvider>
  )
}

export default App

✨主な変更点と改善点

Robotoフォントの追加: MUIのデフォルトフォントであるRobotoを正しく実装
ThemeProviderの導入: フォントファミリーを明示的に設定し、一貫したデザインを実現
TypeScriptの活用: CounterPropsインターフェースを定義し、型安全性を確保
フォント比較機能: Robotoフォントとシステムフォントの違いを視覚的に確認可能

✅表示確認

以下のコマンドで開発サーバーを起動しましょう。

npm run dev

ブラウザでhttp://localhost:5173を開くと、以下の要素が確認できます：

Robotoフォントを使用したヘッダーテキスト
カウンター機能付きのボタン
フォントの違いを確認できる比較セクション

🔚まとめ

これで、React + Vite + TypeScript + MUI の環境が整い、Robotoフォントも正しく実装されました！

📌次回予告

次回は、この環境を使って複数ページを作成する方法（React Router）を紹介します。お楽しみに！

2025年5月24日土曜日

【第1回】React + Vite + TypeScript + MUIで開発環境を最速構築しよう【2025年版】