【React】Material UI(MUI)のCardコンポーネントで制作物一覧デザインを実装｜ポートフォリオサイトの作り方
作成日: 更新日:
開発環境
- 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
- mui/icons-material:5.11.11
- chart.js:4.4.0
- react-chartjs-2:5.2.0
Reactでプロダクションコンテンツに制作物一覧を表示させる手順
Reactでプロダクションコンテンツに制作物一覧を表示させる手順を解説します。
カードコンポーネントで使用する画像ファイルを準備する
まずはカードコンポーネントで使用する画像ファイルを準備します。 ダミー画像の生成は「https://placehold.jp/」が使いやすいのでおすすめです。 今回は「320x240」でダミー画像を生成し、「public/images/production/配下」に画像を設置し、相対パスで画像を読み込ませていきたいと思います。
メディアカードコンポーネントを作成する
次にメディアカードコンポーネントを作成していきます。
1// react-portfolio-app\src\components\MediaCard.tsx 2import * as React from 'react'; 3import Card from '@mui/material/Card'; 4import CardContent from '@mui/material/CardContent'; 5import CardMedia from '@mui/material/CardMedia'; 6import Typography from '@mui/material/Typography'; 7import { Button, CardActionArea, CardActions } from '@mui/material'; 8 9interface MediaCardProps { 10 image: string; 11 title: string; 12 description: string; 13} 14 15const MediaCard: React.FC<MediaCardProps> = ({ image, title, description }) => { 16 return ( 17 <Card> 18 <CardActionArea> 19 <CardMedia 20 component="img" 21 height="140" 22 image={image} 23 alt={title} 24 /> 25 <CardContent> 26 <Typography gutterBottom variant="h5" component="div"> 27 {title} 28 </Typography> 29 <Typography variant="body2" color="text.secondary"> 30 {description} 31 </Typography> 32 </CardContent> 33 </CardActionArea> 34 <CardActions> 35 <Button size="small" color="primary"> 36 Link 37 </Button> 38 </CardActions> 39 </Card> 40 ); 41} 42 43export default MediaCard;
Material UIの公式サイトでCardデザインのサンプルがあります。 公式サイト：https://mui.com/material-ui/react-card/ 今回はMediaサンプルコードのを使用し、そこにPrimary actionのサンプルコードを加えてデザインを整えています。 また、今回はinterfaceで型を定義し、親コンポーネントから値を受け取れるようにしています。
プロダクションリストコンポーネントを作成する
次に、プロダクションリストコンポーネントを作成します。
1// react-portfolio-app\src\components\ProductionList.tsx 2import React from "react"; 3import Box from "@mui/material/Box"; 4import Grid from "@mui/material/Grid"; 5import Typography from "@mui/material/Typography"; 6import Button from "@mui/material/Button"; 7import MediaList from "./MediaCard"; 8 9const ProductionList: React.FC = () => { 10 const setMediaList = [ 11 { 12 'title': 'タイトル1', 13 'description': "タイトル1の説明が入ります。", 14 'image': "/images/production/production-001.png", 15 }, 16 { 17 'title': 'タイトル2', 18 'description': "タイトル3の説明が入ります。", 19 'image': "/images/production/production-002.png", 20 }, 21 { 22 'title': 'タイトル3', 23 'description': "タイトル3の説明が入ります。", 24 'image': "/images/production/production-003.png", 25 } 26 ]; 27 28 return( 29 <> 30 <Grid container rowSpacing={2} columnSpacing={2}> 31 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 32 <Typography component="h2" variant="h2"> 33 Production 34 </Typography> 35 </Grid> 36 {setMediaList.map((data) => { 37 return ( 38 <Grid item xs={12} md={4}> 39 <Box sx={{ width: "100%" }}> 40 <MediaList title={data.title} description={data.description} image={data.image} /> 41 </Box> 42 </Grid> 43 ); 44 })} 45 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 46 <Button variant="contained" size="large"> 47 LearnMore 48 </Button> 49 </Grid> 50 </Grid> 51 </> 52 ); 53}; 54 55export default ProductionList;
変数「setMediaLis」に配列で「タイトル」「説明」「画像パス」を定義しています。 配列で定義しておくことによってループ処理で効率よくメディアカードコンポーネントに値を渡しています。
トップページコンポーネントを修正する
最後にトップページコンポーネントを修正します。
1// react-portfolio-app\src\pages\homes\top.tsx 2 3import MV from "../../assets/images/mv.jpg" 4import SkillList from "../../components/SkillList" 5+ import ProductionList from "../../components/ProductionList" 6 7const Top: React.FC = () => { 8 return( 9 <> 10 <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}> 11 <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}> 12 <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}> 13 <Grid item xs={12} md={12}> 14 <Typography component="h2" variant="h2"> 15 MVタイトル 16 </Typography> 17 </Grid> 18 <Grid item xs={12} md={12}> 19 <Typography> 20 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 21 </Typography> 22 </Grid> 23 </Grid> 24 </Container> 25 <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}> 26 LearnMore 27 </Button> 28 </Box> 29 <Box> 30 <Container maxWidth='md'> 31 <SkillList /> 32 </Container> 33 </Box> 34+ <Box> 35+ <Container maxWidth='md'> 36+ <ProductionList /> 37+ </Container> 38+ </Box>
ProductionListコンポーネントをインポートし、プロダクションコンテンツでProductionListコンポーネントを呼び出す形にしています。
おわりに
Reactでプロダクションコンテンツにカードコンポーネントで成果物一覧を表示させる手順を解説していきましたが、いかがだったでしょうか。 モダンでおしゃれな一覧を作成するときにカードコンポーネントは非常に便利ですし、さらにループ処理と組み合わせればコードの管理もしやすくなります。 是非、ReactでMaterial UI(MUI)のCardコンポーネントを使いこなして、おしゃれなデザインにしていきましょう。