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 プロパティを指定すると，例えば nav や div など，リストを表現する要素を決められる．

• List API - Material-UI

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

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

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

• ListItem API - Material-UI

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

• ListItemText API - Material-UI

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>
);

ListItemIcon コンポーネント

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

• ListItemIcon API - Material-UI

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>
);

ListItemAvatar / Avatar コンポーネント

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

• ListItemAvatar API - Material-UI
• Avatar API - Material-UI

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>
);

ListItemSecondaryAction コンポーネント

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

• ListItemSecondaryAction API - Material-UI

今回は 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>
);

まとめ

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

github.com