【React】シンプルな管理画面を作る方法【初心者編】

はじめに

Webサービスを開発する際、
ユーザー管理やデータ管理のために管理画面が必要になることが多いです。

例えば以下のような機能です。

• ユーザー一覧
• データ検索
• ステータス変更
• 管理者操作

本記事ではReactを使ってシンプルな管理画面を作る方法を紹介します。

⚠ 本記事は初心者向けにシンプルな構成で説明しています。
実際のプロダクション環境では、セキュリティや状態管理などの追加実装が必要になります。

---

目次

1. 管理画面とは
2. 使用技術
3. プロジェクト作成
4. Sidebar作成
5. Header作成
6. ユーザー一覧テーブル
7. Layout統合
8. まとめ

---

1. 管理画面とは

管理画面とは、サービスのデータやユーザーを管理するための画面です。
一般的な管理画面の構成は以下のようになります。

Admin Dashboard
├ Sidebar
├ Header
└ Content
   ├ User Table

2. 使用技術

今回使用する技術は以下です。

技術	役割
React	UI構築
Axios	API通信
CSS	レイアウト

---

3. プロジェクト作成

まずReactプロジェクトを作成します。

npx create-react-app admin-dashboard
cd admin-dashboard
npm start

API通信のためにAxiosをインストールします。

npm install axios

4. Sidebar作成

管理画面では Sidebarナビゲーション がよく使われます。

function Sidebar() {
  return (
    <div className="sidebar">
      <h2>Admin</h2>
      <ul>
        <li>Dashboard</li>
        <li>Users</li>
        <li>Settings</li>
      </ul>
    </div>
  );
}

export default Sidebar;

CSS

.sidebar {
  width: 200px;
  background: #1f2937;
  color: white;
  height: 100vh;
  padding: 20px;
}

5. Header作成

function Header() {
  return (
    <div className="header">
      <h1>Admin Dashboard</h1>
    </div>
  );
}

export default Header;

CSS

.header {
  background: #f5f5f5;
  padding: 15px;
}

6. ユーザー一覧テーブル

管理画面では テーブル表示 がよく使われます。

import { useEffect, useState } from "react";
import axios from "axios";

function UserTable() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data));
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>

      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default UserTable;

7. Layout統合

最後にコンポーネントを統合します。

import Sidebar from "./Sidebar";
import Header from "./Header";
import UserTable from "./UserTable";

function App() {
  return (
    <div className="app">
      <Sidebar />

      <div className="main">
        <Header />
        <UserTable />
      </div>
    </div>
  );
}

export default App;

CSS

.app {
  display: flex;
}

.main {
  flex: 1;
}

管理画面でよくある機能

実際の管理画面では、以下の機能が追加されることが多いです。

• 検索機能
• ページネーション
• 編集 / 削除
• 権限管理
• ログ管理

まとめ

Reactを使うと比較的簡単に 管理画面（Admin Dashboard）を作ることができます。

基本構成は以下です。

Sidebar
Header
Table
API通信

これらを組み合わせることで実用的な管理画面を構築できます。
この記事が、Reactで管理画面を作りたい方の参考になれば幸いです。