【React】Material UI(MUI)のCardコンポーネントで制作物一覧デザインを実装｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 Reactでプロダクションコンテンツに制作物一覧を表示させる手順
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
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/配下」に画像を設置し、相対パスで画像を読み込ませていきたいと思います。

メディアカードコンポーネントを作成する

次にメディアカードコンポーネントを作成していきます。

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions } from '@mui/material';

interface MediaCardProps {
  image: string;
  title: string;
  description: string;
}

const MediaCard: React.FC<MediaCardProps> = ({ image, title, description }) => {
  return (
    <Card>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image={image}
          alt={title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            {title}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Link
        </Button>
      </CardActions>
    </Card>
  );
}

export default MediaCard;

import * as React from 'react';

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

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

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

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

import { Button, CardActionArea, CardActions } from '@mui/material';

interface MediaCardProps {

image: string;

title: string;

description: string;

}

const MediaCard: React.FC<MediaCardProps> = ({ image, title, description }) => {

return (

<Card>

<CardMedia

component="img"

height="140"

image={image}

alt={title}

{title}

</Typography>

{description}

</Typography>

</CardContent>

</CardActionArea>

Link

</Button>

</CardActions>

</Card>

);

}

export default MediaCard;

Material UIの公式サイトでCardデザインのサンプルがあります。

公式サイト：https://mui.com/material-ui/react-card/

今回はMediaサンプルコードのを使用し、そこにPrimary actionのサンプルコードを加えてデザインを整えています。

また、今回はinterfaceで型を定義し、親コンポーネントから値を受け取れるようにしています。

プロダクションリストコンポーネントを作成する

次に、プロダクションリストコンポーネントを作成します。

import React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import MediaList from "./MediaCard";

const ProductionList: React.FC = () => {
    const setMediaList = [
        {
            'title': 'タイトル1',
            'description': "タイトル1の説明が入ります。",
            'image': "/images/production/production-001.png",
        },
        {
            'title': 'タイトル2',
            'description': "タイトル3の説明が入ります。",
            'image': "/images/production/production-002.png",
        },
        {
            'title': 'タイトル3',
            'description': "タイトル3の説明が入ります。",
            'image': "/images/production/production-003.png",
        }
    ];

    return(
        <>
            <Grid container rowSpacing={2} columnSpacing={2}>
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Typography component="h2" variant="h2">
                        Production
                    </Typography>
                </Grid>
                {setMediaList.map((data) => {
                    return (
                        <Grid item xs={12} md={4}>
                            <Box sx={{ width: "100%" }}>
                                <MediaList title={data.title} description={data.description} image={data.image} />
                            </Box>
                        </Grid>
                    );
                })}
                <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                    <Button variant="contained" size="large">
                        LearnMore
                    </Button>
                </Grid>
            </Grid>
        </>
    );
};

export default ProductionList;

import React from "react";

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

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

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

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

import MediaList from "./MediaCard";

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

const setMediaList = [

{

'title': 'タイトル1',

'description': "タイトル1の説明が入ります。",

'image': "/images/production/production-001.png",

{

'title': 'タイトル2',

'description': "タイトル3の説明が入ります。",

'image': "/images/production/production-002.png",

{

'title': 'タイトル3',

'description': "タイトル3の説明が入ります。",

'image': "/images/production/production-003.png",

}

];

return(

Production

</Typography>

</Grid>

{setMediaList.map((data) => {

return (

</Box>

</Grid>

);

})}

LearnMore

</Button>

</Grid>

</>

);

};

export default ProductionList;

変数「setMediaLis」に配列で「タイトル」「説明」「画像パス」を定義しています。

配列で定義しておくことによってループ処理で効率よくメディアカードコンポーネントに値を渡しています。

トップページコンポーネントを修正する

最後にトップページコンポーネントを修正します。

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

import MV from "../../assets/images/mv.jpg"
import SkillList from "../../components/SkillList"
import ProductionList from "../../components/ProductionList"

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <SkillList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <ProductionList />
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Profile
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

import MV from "../../assets/images/mv.jpg"

import SkillList from "../../components/SkillList"

import ProductionList from "../../components/ProductionList"

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

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

<Box>

</Container>

</Box>

<Box>

</Container>

</Box>

ProductionListコンポーネントをインポートし、プロダクションコンテンツでProductionListコンポーネントを呼び出す形にしています。

おわりに

Reactでプロダクションコンテンツにカードコンポーネントで成果物一覧を表示させる手順を解説していきましたが、いかがだったでしょうか。

モダンでおしゃれな一覧を作成するときにカードコンポーネントは非常に便利ですし、さらにループ処理と組み合わせればコードの管理もしやすくなります。

是非、ReactでMaterial UI(MUI)のCardコンポーネントを使いこなして、おしゃれなデザインにしていきましょう。