先週「React + TypeScript + Material-UI」を使ってプロトタイプ開発をする機会があった．今まで Material-UI は使ったことがなかったけど，ドキュメントを読むとコンポーネントも多く用意されていて，非常によくできていた．React で Material Design を簡単に実装できる．
今回は Material-UI の List コンポーネントをサンプルコードを参考に実装しながら理解を深めていく．
なお，実装したサンプルコードは GitHub に公開してある．TypeScript で create-react-app を実行してから実装を進めた．記事に載せるコードはポイントを限定し抜粋するため，実際にコード全体を見る場合は GitHub を参照して頂ければと！
$ create-react-app sandbox-material-ui-list --typescript
List / ListItem / ListItemText コンポーネント
まず，リストを実装する場合は List コンポーネントを使う．List コンポーネントに component プロパティを指定すると，例えば nav や div など，リストを表現する要素を決められる．
List コンポーネントに含める項目1個1個は ListItem コンポーネントを使う．代表的なプロパティとして以下を指定できる．
button: ボタンとして押せるようになる / デフォルトfalsedisabled: 非活性にして選択できないようにする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> );
ListItemIcon コンポーネント
ListItemIcon コンポーネントを使うとリストにアイコンを追加できる．
Material-UI は「Material Icons」としてアイコン自体も配布しているため，コンポーネントとして使える．よって，以下のようにアイコンを import し，ListItemIcon コンポーネントと組み合わせることができる．
import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
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 / 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 コンポーネントと 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 を簡単に実装できる
- 今回はドキュメントを読みながら
Listコンポーネントを実装しながら理解を深めた - 他にも多くのコンポーネントがあり，プロトタイプ開発のためにも調べたいと思う
