Apps

013-ToolPad｜MaterialUI-Tutorialでダッシュボードのひな形を作成

はじめに

Material UI（MUI）は、React向けの人気のあるUIライブラリで、ToolPadはMUIを活用したWebアプリの開発を効率化するツールです。

本記事では、Material UIの公式チュートリアルを参考に、ToolPadを使用してダッシュボードのひな形を作成する手順を解説します。

Material UIとは

Material UI（MUI） は、Googleが提唱する Material Design のガイドラインに基づいた React向けのUIコンポーネントライブラリ です。

MUIを使用すると、洗練されたデザインのWebアプリケーションを簡単に構築できます。

特徴

  • 豊富なコンポーネント：ボタン、テーブル、フォーム、モーダルなど、多様なUIコンポーネントが揃っている。
  • テーマカスタマイズ：デフォルトのMaterial Designに従いながら、独自のデザインを適用可能。
  • レスポンシブデザイン：モバイルファーストで設計されており、適切なブレイクポイントを設定しやすい。
  • パフォーマンスの最適化：CSS-in-JSによるスタイル適用で、高速にレンダリングが可能。

ToolPadとは

https://mui.com/toolpad/core/introduction/tutorial

ToolPad は、Material UI（MUI）と統合された Reactベースのローコード開発ツール です。
データの取得・表示・操作を直感的に行えるため、管理画面やダッシュボードを短期間で構築 できます。

特徴

  • ローコード開発：Reactの知識が少なくても、GUI操作でWebアプリを作成できる。
  • Material UIとの統合：MUIのコンポーネントを活用し、デザイン性の高いUIを簡単に実装可能。
  • データ連携が簡単：REST APIやデータベースと連携し、データをダッシュボードで管理しやすい。
  • Next.jsとの親和性：Next.jsアプリの一部として、ToolPadを組み込むことが可能。

ToolPadを使うことで、開発の効率を大幅に向上させつつ、洗練されたダッシュボードを構築できます。

概要

ToolPadのMaterialUI-Tutorialを活用し、Material UIベースのダッシュボードのひな形を作成 します。

さらに、新しいページを追加し、ナビゲーションに反映する方法についても解説します。

主な実装内容

  1. ToolPadアプリのセットアップ
  2. page-2という新しいページの作成
  3. ナビゲーションにpage-2を追加

最終的に実現する構成

  • ダッシュボードの基本レイアウト を構築
  • ページ遷移を可能にするナビゲーション を追加
  • Material UIを活用したデザインの適用

このチュートリアルを通じて、ToolPadの基本的な使い方と、Material UIを活用したUI設計 を学びます。

実装準備：ページ作成

まず、ToolPadを使用してプロジェクトを作成し、開発環境をセットアップします。

1. ToolPadアプリの作成

以下のコマンドを実行して、新規のToolPadアプリを作成します。

npx create-toolpad-app@latest --example tutorial
cd <project-name>
npm install && npm run dev
  • npx create-toolpad-app@latest --example tutorial
    → ToolPadの公式チュートリアルプロジェクトを作成。
  • cd <project-name>
    → 作成したプロジェクトフォルダに移動。
  • npm install && npm run dev
    → 必要なパッケージをインストールし、開発サーバーを起動。

開発サーバーが起動すると、http://localhost:3000 でダッシュボードの基本画面を確認できます。

実装：手順とコードの解説

ここでは、新しいページを追加し、ナビゲーションに組み込む方法を解説します。

1. page-2のページを作成

新しいページを作成するために、pages/page-2/page.tsx を作成し、以下のコードを追加します。

import Typography from '@mui/material/Typography';

export default function Home() {
  return (
    <Typography variant="h6" color="grey.800">
      This is page 2!
    </Typography>
  );
}

解説

  • Typography コンポーネントを使用して、シンプルなテキストを表示するページを作成。
  • variant="h6" により、見出しサイズを調整。
  • color="grey.800" でテキストカラーを指定。

2. ナビゲーションにpage-2を追加

ダッシュボードのサイドメニューに新しいページを追加するため、dashboard/layout.tsx を編集します。

import TimelineIcon from '@mui/icons-material/Timeline';

const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: '',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
  {
    segment: 'page-2',
    title: 'Page 2',
    icon: <TimelineIcon />, // 追加
  },
];

解説

  • segment: 'page-2' により、/page-2 にアクセスできるようにする。
  • title: 'Page 2' でナビゲーションメニューに表示されるテキストを指定。
  • icon: <TimelineIcon /> でアイコンを設定し、視認性を向上。

3. レイアウトの更新

ToolPadのアプリ全体のレイアウトを管理する dashboard/layout.tsx のコードを修正します。

import * as React from 'react';
import { NextAppProvider } from '@toolpad/core/nextjs';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
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: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
  {
    segment: 'page-2',
    title: 'Page 2',
    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>
  );
}

解説

  • <React.Suspense fallback={<LinearProgress />}>
    → 遅延読み込み時に ローディングインジケーター を表示。
  • <NextAppProvider theme={theme} navigation={NAVIGATION}>
    → カスタムテーマとナビゲーションメニュー を適用。

動作確認

開発サーバーを起動した状態で、ブラウザで http://localhost:3000 にアクセスすると、ナビゲーションメニューに「Page 2」が追加されている はずです。

  • 「Page 2」をクリックすると、新しいページが表示されることを確認してください。

このように、ToolPadを使用すれば、簡単にページの追加とナビゲーションの更新が可能 です。

最終コード

page-2/page.tsx

import Typography from '@mui/material/Typography';

export default function Home() {
  return (
    <Typography variant="h6" color="grey.800">
      This is page 2!
    </Typography>
  );
}

dashboard/layout.tsx

import * as React from 'react';
import { NextAppProvider } from '@toolpad/core/nextjs';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
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: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
#以下追記
  {
    segment: 'page-2',
    title: 'Page 2',
    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>
  );
}

まとめ

本記事では、ToolPadとMaterial UIを活用してダッシュボードのひな形を作成 し、新しいページを追加する方法を解説しました。

実装のポイント

  • npx create-toolpad-app@latest --example tutorial で ToolPadの環境をセットアップ。
  • page-2/page.tsx を作成し、新しいページを追加。
  • dashboard/layout.tsx を編集し、ナビゲーションメニューに「Page 2」を反映。

Material UIを使うメリット

  • 洗練されたデザインのUIを簡単に構築 できる。
  • コンポーネントが豊富 で、ダッシュボードや管理画面の開発がスムーズ。
  • レスポンシブ対応 で、モバイル・タブレット・PCのすべてに適応可能。

ToolPadの活用ポイント

  • ローコード開発 で、素早くダッシュボードを構築できる。
  • データ連携が容易 で、APIやデータベースと統合しやすい。
  • Next.jsとの統合 で、拡張性の高いアプリ開発が可能。

このチュートリアルを通じて、ToolPadとMaterial UIを用いたダッシュボードの基本構築 を学びました。
さらに、ページの追加やナビゲーションの編集など、実用的な機能を取り入れることで、カスタマイズの幅が広がります。

今後は、データの表示やフォーム機能の実装 などを加えることで、より実践的なダッシュボードの開発に挑戦してみてください！

-Apps