【React】ヘッダーとフッターをMaterial UI(MUI)で作る｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 ヘッダーとフッターをMaterial UI(MUI)で作る手順
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10

ヘッダーとフッターをMaterial UI(MUI)で作る手順

ヘッダーとフッターをMaterial UI(MUI)で作る手順を解説していきます。

ヘッダーとフッターをコンポーネント化する

まずはヘッダーとフッターをコンポーネント化していきます。

「src/components」のフォルダに「Header.tsx」と「Footer.tsx」を作成しておき、「src/App.tsx」を以下のように修正しておきます。

import React from "react";
import { Routes, Route, Link } from "react-router-dom";

import Top from "./pages/homes/top";
import Profile from "./pages/homes/profile";
import Skill from "./pages/homes/skill";
import Production from "./pages/homes/production";
import Contact from "./pages/homes/contact";
import Blog from "./pages/homes/blog";
import NoMatch from "./pages/nomatch";

import Header from "./components/Header";
import Footer from "./components/Footer";

const App: React.FC = () => {
  return(
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/skill" element={<Skill />} />
        <Route path="/production" element={<Production />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
      <Footer />
    </>
  );
};

export default App;

import React from "react";

import { Routes, Route, Link } from "react-router-dom";

import Top from "./pages/homes/top";

import Profile from "./pages/homes/profile";

import Skill from "./pages/homes/skill";

import Production from "./pages/homes/production";

import Contact from "./pages/homes/contact";

import Blog from "./pages/homes/blog";

import NoMatch from "./pages/nomatch";

import Header from "./components/Header";

import Footer from "./components/Footer";

const App: React.FC = () => {

return(

</Routes>

</>

);

};

export default App;

上記により、ヘッダーとフッターをコンポーネントで読み込む設定をしています。

ヘッダーコンポーネントを作成する

次にヘッダーコンポーネントを作成していきます。

import React from "react";
import { Link } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Typography from "@mui/material/Typography";
import Logo from "../assets/images/logo.png"

const setNavLinks: Array<{ text: string, url: string }> = [
    { text: "Top", url: "/" },
    { text: "Profile", url: "/profile" },
    { text: "Skill", url: "/skill" },
    { text: "Production", url: "/production" },
    { text: "Contact", url: "/contact" },
    { text: "Blog", url: "/blog" },
];

const Header: React.FC = () => {
  return(
    <>
        <AppBar component="header" position="static">
            <Container maxWidth="md">
                <Box sx={{ display: 'flex', justifyContent: 'space-between'}}>
                    <Box>
                        <Typography component="h1">
                            <Link to="/">
                                <img src={Logo} alt="Webエンジニアのポートフォリオサイト" height="60" width="auto" />
                            </Link>
                        </Typography>
                    </Box>
                    <Box>
                        <List component="nav" sx={{ display: 'flex', justifyContent: 'flex-start' }}>
                            { setNavLinks.map( (navLink) => (
                            <ListItem disablePadding>
                                <ListItemButton sx={{ textAlign: 'center' }} component={Link} to={navLink.url}>
                                    <ListItemText primary={navLink.text} />
                                </ListItemButton>
                            </ListItem>
                            ))}
                        </List>
                    </Box>
                </Box>
            </Container>
        </AppBar>
    </>
  );
};

export default Header;

import React from "react";

import { Link } from "react-router-dom";

import AppBar from "@mui/material/AppBar";

import Container from "@mui/material/Container";

import Box from "@mui/material/Box";

import List from "@mui/material/List";

import ListItem from "@mui/material/ListItem";

import ListItemButton from "@mui/material/ListItemButton";

import ListItemText from "@mui/material/ListItemText";

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

import Logo from "../assets/images/logo.png"

const setNavLinks: Array<{ text: string, url: string }> = [

{ text: "Top", url: "/" },

{ text: "Profile", url: "/profile" },

{ text: "Skill", url: "/skill" },

{ text: "Production", url: "/production" },

{ text: "Contact", url: "/contact" },

{ text: "Blog", url: "/blog" },

];

const Header: React.FC = () => {

return(

<Box>

</Link>

</Typography>

</Box>

<Box>

{ setNavLinks.map( (navLink) => (

</ListItemButton>

</ListItem>

))}

</List>

</Box>

</Container>

</AppBar>

</>

);

};

export default Header;

MUIはとても便利で、下記のリンクにあるデモコードをコピペするだけでヘッダーを作ることもできます。

Material UI(MUI)公式サイト：https://mui.com/material-ui/react-app-bar/

ただ、今回はポートフォリオサイトでもあるため、自分自身で使用するMUIのライブラリを厳選してヘッダーを構築しています。

特に「setNavLinks」というナビゲーションを配列にしており、ヘッダーのナビゲーション部分である「ListItem」以下のコードをループ処理して保守性を高めています。

フッターコンポーネントを作成する

次にフッターコンポーネントを作成していきます。

import React from "react";
import AppBar from "@mui/material/AppBar";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

const Footer: React.FC = () => {
  return(
    <>
        <AppBar component="footer" position="static" sx={{ backgroundColor: '#000000' }}>
            <Container maxWidth="md">
                <Box sx={{ textAlign: 'center' }}>
                    <Typography variant="caption">
                        ©2023 engr-sng
                    </Typography>
                </Box>
            </Container>
        </AppBar>
    </>
  );
};

export default Footer;

import React from "react";

import AppBar from "@mui/material/AppBar";

import Container from "@mui/material/Container";

import Box from "@mui/material/Box";

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

const Footer: React.FC = () => {

return(

</Typography>

</Box>

</Container>

</AppBar>

</>

);

};

export default Footer;

上記はヘッダーの一部分を抜粋して使用しているだけになります。

ただ、ヘッダーと同じ背景色にしたくないため、「sx」で「backgroundColor」を黒に指定しています。

以上でヘッダーとフッターの作成は完了です。

おわりに

ReactでヘッダーとフッターをMaterial UI(MUI)で作るための手順を解説してきましたが、いかがだったでしょうか。

Material UI(MUI)はとても優秀なライブラリなため、使い方次第でたくさんのアイデアはありますので、今回の使い方が正解と言うわけではありません。

是非、魅力的なヘッダーとフッターをMaterial UI(MUI)で作っていきましょう。