【React】ヘッダーとフッターをMaterial UI(MUI)で作る｜ポートフォリオサイトの作り方
作成日: 更新日:
開発環境
- 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」を以下のように修正しておきます。
1// react-portfolio-app/src/App.tsx 2import React from "react"; 3import { Routes, Route, Link } from "react-router-dom"; 4 5import Top from "./pages/homes/top"; 6import Profile from "./pages/homes/profile"; 7import Skill from "./pages/homes/skill"; 8import Production from "./pages/homes/production"; 9import Contact from "./pages/homes/contact"; 10import Blog from "./pages/homes/blog"; 11import NoMatch from "./pages/nomatch"; 12 13+ import Header from "./components/Header"; 14+ import Footer from "./components/Footer"; 15 16const App: React.FC = () => { 17 return( 18 <> 19+ <Header /> 20 <Routes> 21 <Route path="/" element={<Top />} /> 22 <Route path="/profile" element={<Profile />} /> 23 <Route path="/skill" element={<Skill />} /> 24 <Route path="/production" element={<Production />} /> 25 <Route path="/contact" element={<Contact />} /> 26 <Route path="/blog" element={<Blog />} /> 27 <Route path="*" element={<NoMatch />} /> 28 </Routes> 29+ <Footer /> 30 </> 31 ); 32}; 33 34export default App;
上記により、ヘッダーとフッターをコンポーネントで読み込む設定をしています。
ヘッダーコンポーネントを作成する
次にヘッダーコンポーネントを作成していきます。
1// react-portfolio-app/src/components/Header.tsx 2import React from "react"; 3import { Link } from "react-router-dom"; 4import AppBar from "@mui/material/AppBar"; 5import Container from "@mui/material/Container"; 6import Box from "@mui/material/Box"; 7import List from "@mui/material/List"; 8import ListItem from "@mui/material/ListItem"; 9import ListItemButton from "@mui/material/ListItemButton"; 10import ListItemText from "@mui/material/ListItemText"; 11import Typography from "@mui/material/Typography"; 12import Logo from "../assets/images/logo.png" 13 14const setNavLinks: Array<{ text: string, url: string }> = [ 15 { text: "Top", url: "/" }, 16 { text: "Profile", url: "/profile" }, 17 { text: "Skill", url: "/skill" }, 18 { text: "Production", url: "/production" }, 19 { text: "Contact", url: "/contact" }, 20 { text: "Blog", url: "/blog" }, 21]; 22 23const Header: React.FC = () => { 24 return( 25 <> 26 <AppBar component="header" position="static"> 27 <Container maxWidth="md"> 28 <Box sx={{ display: 'flex', justifyContent: 'space-between'}}> 29 <Box> 30 <Typography component="h1"> 31 <Link to="/"> 32 <img src={Logo} alt="Webエンジニアのポートフォリオサイト" height="60" width="auto" /> 33 </Link> 34 </Typography> 35 </Box> 36 <Box> 37 <List component="nav" sx={{ display: 'flex', justifyContent: 'flex-start' }}> 38 { setNavLinks.map( (navLink) => ( 39 <ListItem disablePadding> 40 <ListItemButton sx={{ textAlign: 'center' }} component={Link} to={navLink.url}> 41 <ListItemText primary={navLink.text} /> 42 </ListItemButton> 43 </ListItem> 44 ))} 45 </List> 46 </Box> 47 </Box> 48 </Container> 49 </AppBar> 50 </> 51 ); 52}; 53 54export default Header;
MUIはとても便利で、下記のリンクにあるデモコードをコピペするだけでヘッダーを作ることもできます。 Material UI(MUI)公式サイト：https://mui.com/material-ui/react-app-bar/ ただ、今回はポートフォリオサイトでもあるため、自分自身で使用するMUIのライブラリを厳選してヘッダーを構築しています。 特に「setNavLinks」というナビゲーションを配列にしており、ヘッダーのナビゲーション部分である「ListItem」以下のコードをループ処理して保守性を高めています。
フッターコンポーネントを作成する
次にフッターコンポーネントを作成していきます。
1// react-portfolio-app/src/components/Footer.tsx 2import React from "react"; 3import AppBar from "@mui/material/AppBar"; 4import Container from "@mui/material/Container"; 5import Box from "@mui/material/Box"; 6import Typography from "@mui/material/Typography"; 7 8const Footer: React.FC = () => { 9 return( 10 <> 11 <AppBar component="footer" position="static" sx={{ backgroundColor: '#000000' }}> 12 <Container maxWidth="md"> 13 <Box sx={{ textAlign: 'center' }}> 14 <Typography variant="caption"> 15 ©2023 engr-sng 16 </Typography> 17 </Box> 18 </Container> 19 </AppBar> 20 </> 21 ); 22}; 23 24export default Footer;
上記はヘッダーの一部分を抜粋して使用しているだけになります。 ただ、ヘッダーと同じ背景色にしたくないため、「sx」で「backgroundColor」を黒に指定しています。 以上でヘッダーとフッターの作成は完了です。
おわりに
ReactでヘッダーとフッターをMaterial UI(MUI)で作るための手順を解説してきましたが、いかがだったでしょうか。 Material UI(MUI)はとても優秀なライブラリなため、使い方次第でたくさんのアイデアはありますので、今回の使い方が正解と言うわけではありません。 是非、魅力的なヘッダーとフッターをMaterial UI(MUI)で作っていきましょう。