kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Material-UI の List コンポーネントを実装する

先週「React + TypeScript + Material-UI」を使ってプロトタイプ開発をする機会があった.今まで Material-UI は使ったことがなかったけど,ドキュメントを読むとコンポーネントも多く用意されていて,非常によくできていた.React で Material Design を簡単に実装できる.

material-ui.com

今回は Material-UI の List コンポーネントをサンプルコードを参考に実装しながら理解を深めていく.

material-ui.com

なお,実装したサンプルコードは GitHub に公開してある.TypeScript で create-react-app を実行してから実装を進めた.記事に載せるコードはポイントを限定し抜粋するため,実際にコード全体を見る場合は GitHub を参照して頂ければと!

$ create-react-app sandbox-material-ui-list --typescript

github.com

List / ListItem / ListItemText コンポーネント

まず,リストを実装する場合は List コンポーネントを使う.List コンポーネントに component プロパティを指定すると,例えば navdiv など,リストを表現する要素を決められる.

List コンポーネントに含める項目1個1個は ListItem コンポーネントを使う.代表的なプロパティとして以下を指定できる.

  • button : ボタンとして押せるようになる / デフォルト false
  • disabled : 非活性にして選択できないようにする
  • selected : 最初から選択状態にする
  • divider : リストに下線を引く
  • component : 要素を決める

詳細は以下に載っている.

リストに文字列を表示する場合は ListItemText コンポーネントを使う.primary プロパティに文章を指定する.

List / ListItem / ListItemText コンポーネントを使ってリストを実装した.紹介したプロパティも一部使っている.キャプチャに載せた「List 6」ListItem コンポーネントに a 要素を指定した関数を実装し ListItemLink として使えるようにしている(GitHub 参照).クリックすると kakakakakku blog に遷移する.

return (
  <div className={classes.root}>
    <List component="nav">
      <ListItem>
        <ListItemText primary="List 1" />
      </ListItem>
      <ListItem button>
        <ListItemText primary="List 2 (button)" />
      </ListItem>
      <ListItem disabled>
        <ListItemText primary="List 3 (disabled)" />
      </ListItem>
      <ListItem selected>
        <ListItemText primary="List 4 (selected)" />
      </ListItem>
      <ListItem divider>
        <ListItemText primary="List 5 (divider)" />
      </ListItem>
      <ListItemLink href="https://kakakakakku.hatenablog.com/">
        <ListItemText primary="List 6 (link)" />
      </ListItemLink>
    </List>
  </div>
);

f:id:kakku22:20190915143303p:plain

ListItemIcon コンポーネント

ListItemIcon コンポーネントを使うとリストにアイコンを追加できる.

Material-UI は「Material Icons」としてアイコン自体も配布しているため,コンポーネントとして使える.よって,以下のようにアイコンを import し,ListItemIcon コンポーネントと組み合わせることができる.

import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';

material-ui.com

ListItemIcon コンポーネントを使ってアイコン付きリストを実装した.「List 7」「List 8」はより直感的になった.

return (
  <div className={classes.root}>
    (中略)
    <List component="nav">
      <ListItem button>
        <ListItemIcon>
          <CloudUploadIcon />
        </ListItemIcon>
        <ListItemText primary="List 7 - Upload" />
      </ListItem>
      <ListItem button>
        <ListItemIcon>
          <CloudDownloadIcon />
        </ListItemIcon>
        <ListItemText primary="List 8 - Download" />
      </ListItem>
    </List>
  </div>
);

f:id:kakku22:20190915143320p:plain

ListItemAvatar / Avatar コンポーネント

ListItemAvatar コンポーネントと Avatar コンポーネントを使うと写真をプロフィール画像のように表現できるようになる.Avatar コンポーネントには alt / src / className プロパティなどを指定できる.さらに ListItemText コンポーネントに secondary プロパティを指定するとリスト2行目に文章を追加できる.

ListItemAvatar / Avatar コンポーネントを使ってプロフィール画像とイニシャル画像(個人的に Gmail Inbox でよく見た)を実装した.イニシャル画像の場合は backgroundColor を指定した makeStyles() を定義している(GitHub 参照).

return (
  <div className={classes.root}>
    (中略)
    <List component="nav">
      <ListItem button>
        <ListItemAvatar>
          <Avatar alt="kakakakakku" src="https://pbs.twimg.com/profile_images/604918632460656640/FdOmiWZW_200x200.png" />
        </ListItemAvatar>
        <ListItemText primary="List 9 - @kakakakakku" secondary="https://kakakakakku.hatenablog.com/" />
      </ListItem>
      <ListItem button>
        <ListItemAvatar>
          <Avatar alt="kakakakakku" className={classes.orangeAvatar}>K</Avatar>
        </ListItemAvatar>
        <ListItemText primary="List 10 - @kakakakakku" secondary="https://github.com/kakakakakku" />
      </ListItem>
    </List
  </div>
);

f:id:kakku22:20190915143334p:plain

ListItemSecondaryAction コンポーネント

ListItemSecondaryAction コンポーネントを使うとリストをカスタマイズできる.

今回は ListItemSecondaryAction コンポーネントと Checkbox コンポーネントを組み合わせて,選択可能なリストを実装した.実際にアクションを含める場合,ドキュメントに載っているように handleToggle() などを実装し onClick() から呼び出すようにする.

return (
  <div className={classes.root}>
    (中略)
    <List component="nav">
      {[1, 2, 3].map(value => {
        return (
          <ListItem button>
            <ListItemAvatar>
              <Avatar className={classes.purpleAvatar}>{value}</Avatar>
            </ListItemAvatar>
            <ListItemText primary={`List ${value + 10} - User ${value}`} />
            <ListItemSecondaryAction>
              <Checkbox />
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  </div>
);

f:id:kakku22:20190915143347p:plain

まとめ

  • Material-UI を使うと React で Material Design を簡単に実装できる
  • 今回はドキュメントを読みながら List コンポーネントを実装しながら理解を深めた
  • 他にも多くのコンポーネントがあり,プロトタイプ開発のためにも調べたいと思う

github.com