今回は、React TypeScriptのアプリケーションでMaterial UIのChipを使う方法を紹介していこうと思います。
Chipは情報の入力、選択、コンテンツのフィルタリング、アクションのトリガーなど様々な使い道があり、コンパクトな要素なのでぜひ使ってみてください！
まだ、React TypeScriptの開発環境を未構築の方は、「ReactとTypeScriptとRedux Toolkitの開発環境構築をしよう！」を参考にしてくれるといいと思います。
本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。
学習に使った本はこちら！
ポチップ
ポチップ
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
事前準備をしよう！（前回の続き）
本記事のみを参考にしたい方は不要ですが、前回からみてくれている方はこちらを参考にしてみてください！
ChipCard.tsxとChipCard.module.scssを追加する。
いつも通り、tsxとscssを追加しましょう！
- components＞mobules＞cards＞chipCard＞ChipCard.tsx
- components＞mobules＞cards＞chipCard＞ChipCard.module.scss
ChipCard.tsxを修正する。
前回を見てくれている方はわかると思いますが、Chipを使うためのCardを作成していきましょう。
前回までの内容が気になる方は、ぜひ過去記事を参考にしてみてください！
- ここはいつも通りのため、詳細は省略します。
import React from "react";
// material-ui
import { Card, CardHeader, Typography } from "@material-ui/core";
// styles
import styles from "./ChipCard.module.scss";
const ChipCard = (): JSX.Element => {
return (
<div className={styles.root}>
<Card className={styles.card}>
<CardHeader
title={<Typography variant="h5">ChipCard</Typography>}
subheader="チップカード"
className={styles.card_header}
/>
</Card>
</div>
);
};
export default ChipCard;Sample1Page.tsxを修正する。
続いて、ChipCard.tsxをSample1Page.tsxにインポートして利用していきます！
- ここもいつも通りのため、詳細は省略します。
- 今回は、XS=3の一番左に適応しています。
import React from "react";
// react-router-dom
import { RouteComponentProps } from "react-router-dom";
import { Link } from "react-router-dom";
import { Path } from "../../../Routes";
// material-ui
import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
// styles
import styles from "./Sample1Page.module.scss";
// components
import ProfileCard from "../../modules/cards/profileCard/ProfileCard";
import PiechartCard from "../../modules/cards/piechartCard/PiechartCard";
import ChipCard from "../../modules/cards/chipCard/ChipCard";
type PropsTypes = RouteComponentProps;
const Sample1Page = ({ history }: PropsTypes): JSX.Element => {
return (
<div className={styles.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Card className={styles.card}>xs=12</Card>
</Grid>
<Grid item xs={6}>
<ProfileCard />
</Grid>
<Grid item xs={6}>
<PiechartCard />
</Grid>
<Grid item xs={3}>
<ChipCard />
</Grid>
<Grid item xs={3}>
<Card className={styles.card}>xs=3</Card>
</Grid>
<Grid item xs={3}>
<Card className={styles.card}>xs=3</Card>
</Grid>
<Grid item xs={3}>
<Card className={styles.card}>xs=3</Card>
</Grid>
</Grid>
</div>
);
};
export default Sample1Page;動作確認をする。
ここまでできたら動作確認しておきましょう！
画面左下にChipCardが作成されていれば大丈夫です！
今回は、ここにChipを使って色々実装していきます！
Chipを実装しよう！
では、早速Chipを使っていきましょう！
今回はプログラミング言語をChipで表示したいと思います！
ChipCard.tsxを修正する。
先ほど空のカードを作成したChipCard.tsxを修正していきましょう。
- 表示するデータを用意する。（今後はRedux Toolkitで管理するが今回はコンポーネント内で管理）
const [chipData, setChipData] = React.useState([
{ key: 0, label: “Angular”, level: 1 },
{ key: 1, label: “jQuery”, level: 2 },
{ key: 2, label: “Polymer”, level: 3 },
{ key: 3, label: “React”, level: 2 },
{ key: 4, label: “Vue.js”, level: 1 },
]); - chipDataから要素を１つづつ取り出して、要素分ループさせる。
chipData.map((data) => { })} - levelによって表示するアイコンを変更する。
let icon = ;
if (data.level === 1) {
icon = ;
} else if (data.level === 2) {
icon = ;
} - Chipを表示する。
<Chip icon={icon} label={data.label} className={styles.chip} />
import React from "react";
// material-ui
import {
Card,
CardHeader,
CardContent,
Divider,
Typography,
Chip,
} from "@material-ui/core";
import {
SentimentVerySatisfied as SentimentVerySatisfiedIcon,
SentimentSatisfied as SentimentSatisfiedIcon,
SentimentVeryDissatisfied as SentimentVeryDissatisfiedIcon,
} from "@material-ui/icons";
// styles
import styles from "./ChipCard.module.scss";
interface ChipData {
key: number;
label: string;
level: number;
}
const ChipCard = (): JSX.Element => {
const [chipData, setChipData] = React.useState<ChipData[]>([
{ key: 0, label: "Angular", level: 1 },
{ key: 1, label: "jQuery", level: 2 },
{ key: 2, label: "Polymer", level: 3 },
{ key: 3, label: "React", level: 2 },
{ key: 4, label: "Vue.js", level: 1 },
]);
return (
<div className={styles.root}>
<Card className={styles.card}>
<CardHeader
title={<Typography variant="h5">ChipCard</Typography>}
subheader="チップカード"
className={styles.card_header}
/>
<Divider />
<CardContent className={styles.card_content}>
{chipData.map((data) => {
let icon = (
<SentimentVeryDissatisfiedIcon
className={styles.verydissatisfied_icon}
/>
);
if (data.level === 1) {
icon = (
<SentimentVerySatisfiedIcon
className={styles.verysatisfied_icon}
/>
);
} else if (data.level === 2) {
icon = (
<SentimentSatisfiedIcon className={styles.satisfied_icon} />
);
}
return (
<Chip icon={icon} label={data.label} className={styles.chip} />
);
})}
</CardContent>
</Card>
</div>
);
};
export default ChipCard;動作確認をする。
ここまでできたら動作確認してみましょう！
どうでしょうか、データ数分のChipが表示されていることを確認できましたでしょうか？
ただ、このままだとChip同士の間隔がないので見にくいですね。
ちょっとだけStyleを変えてみましょう！
ChipCard.module.scssを修正する。
styleを修正していきましょう！
今回はscssでスタイルを実装していきますので、もしscssって何？？と思っている方は、ぜひ「node-sassを導入して、SCSSを使おう！」を参考にしてみてください！
- Cardの背景色を変更
background-color: yellowgreen; - Chipの間隔を空ける
margin: 5px; - 他はアイコンのカラーを修正
.root {
.card {
background-color: yellowgreen;
.card_header {
}
.card_content {
.chip {
margin: 5px;
}
.verydissatisfied_icon {
color: gray;
}
.verysatisfied_icon {
color: blue;
}
.satisfied_icon {
color: salmon;
}
}
}
}再度動作確認をする。
再度確認してみましょう！
背景色を変えて、Chipの間隔も空けて、アイコンにも色をつけてあげました。
これだけで見た目はだいぶ変わってきますね！
クマじいほかにも使い道が色々ありそうじゃの！
まとめ
React TypeScriptのアプリケーションでMaterial UIのChipを使う方法を紹介していきました。
今回は表示に使ったのみですが、ボタンとして使ったりも可能です。ぜひ色々試してみてください！
本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。
また、今回のReactを勉強するにあたり利用した教材をあげています。
主に本（Amazon Unlimitedを含む）とUdemyの動画教材を利用しています。ここには私なりに理解した内容をもとに独自に内容を考えて共有しているので興味ある方は、本やUdemyを購入して勉強してみることをおすすめします。
学習に使った本はこちら！
ポチップ
ポチップ
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
