Apps

014-React Hooks｜Step0_React環境構築：Material UIのToolPadを使ってひな形作成

はじめに

Reactアプリを効率的に開発するためには、適切な開発環境の構築が重要です。本記事では、Googleが提供するToolPadを活用して、Material UIベースのReactアプリのひな形を簡単に作成する方法を解説します。

ToolPadを使えば、フロントエンドの初期設定を素早く完了できるため、デザインやコンポーネントの実装に集中することができます。さらに、本記事ではレイアウトの調整やアイコンの変更についても触れ、カスタマイズしやすい環境を整えます。

これからReactアプリ開発を始める方や、Material UIを活用したプロジェクトのひな形を素早く作成したい方にとって、役立つ内容となっています。ぜひ一緒に学んでいきましょう！

Step0-1 MUI：MaterialUIのToolPadでひな形作成

npx create-toolpad-app@latest --example tutorial
cd <project-name>
npm install && npm run dev
参考記事：https://sekkeiyanosagyoubeya.com/013-toolpad-materialui-tutorial/

page1/page.tsx

import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function Page1() {
  return <Typography>Welcome to the Toolpad page1!</Typography>;
}

dashboard/layout.tsx

import * as React from 'react';
import { NextAppProvider } from '@toolpad/core/nextjs';
import DashboardIcon from '@mui/icons-material/Dashboard';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import type { Navigation } from '@toolpad/core/AppProvider';
import LinearProgress from '@mui/material/LinearProgress';
import theme from '../theme';
import TimelineIcon from '@mui/icons-material/Timeline';

const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: '',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'page1',
    title: 'Page1',
    icon: <TimelineIcon />,
  },
];

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" data-toolpad-color-scheme="light">
      <body>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <React.Suspense fallback={<LinearProgress />}>
            <NextAppProvider theme={theme} navigation={NAVIGATION}>
              {children}
            </NextAppProvider>
          </React.Suspense>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Step0-2 MUI：Layout調整

dashboard/page.tsx

import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function HomePage() {
  return (
    <Typography>
      <h2>DashboardPage</h2>
      <p>Reactの練習用のサイトを作成しました</p>
      <p>このサイトにReactの基礎を学習するための簡単なアプリをたくさん作りましょう！！！</p>
    </Typography>
  );
}

Step0-3 MUI：アイコン変更

NextAppProviderをインポート

import { NextAppProvider } from '@toolpad/core/nextjs';

<NextAppProvider>

NextAppProviderにlogo、title、homeUrlを追加します。

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" data-toolpad-color-scheme="light">
      <body>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <React.Suspense fallback={<LinearProgress />}>
            <NextAppProvider 
            // -----ココから追記-----
              theme={theme} 
              navigation={NAVIGATION} 
              branding={{
                logo: <img src="https://sekkeiyanosagyoubeya.com/wp-content/uploads/2024/05/cropped-sekkeiya.png" alt="Custom Logo" />,
                title: 'React Practice',
                homeUrl: '/',
              }}
            // -----ココまで追記-----
            >
              {children}
            </NextAppProvider>
          </React.Suspense>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
補足：NextAppProviderとAppProviderの違いについて

NextAppProvider と AppProvider は異なるコンポーネントですが、どちらもアプリケーションの設定や状態管理に関わるプロバイダーコンポーネントです。

NextAppProvider:

  • NextAppProvider は、主に Next.js アプリケーション に特化した設定を提供します。
  • Next.js での アプリケーション全体のテーマ設定 や ナビゲーション設定 を行うために使用されます。
  • Next.js の特殊な要件（例えば、SSRやSSGの設定）に対応した設定が可能です。 NextAppProviderは、Next.js のページやルーティングに合わせてアプリケーションの状態やテーマなどを適切に管理する役割を担っています。

AppProvider:

  • 一方で AppProvider は、一般的な React アプリケーション や ツールパッドアプリケーション に使用されるプロバイダーです。
  • アプリケーションの ナビゲーションメニュー や ブランド設定（ロゴやタイトルの設定）などのカスタマイズを行います。

違い:

  • NextAppProvider は Next.js 特有の機能や設定を意識しており、特に Next.js アプリケーションのために最適化 されています。
  • AppProvider はより汎用的なReactアプリケーションに適用され、React ベースのツールパッドコンポーネントやアプリケーションの UI 設定をサポートします。

つまり、Next.js アプリケーションにおいては、NextAppProvider を使用するのが一般的です。 AppProvider は、Next.js 以外の環境や特定のツールで使用されます。

-Apps