目的
material-uiを用いたヘッダー付きサイドメニュー用のコンポーネントの作成をします。
使用するのはmaterial-uiのDrawerです。この記事ではその中の「Persistent drawer」の左側にメニュー展開をするものを使用します。
そのままデモコードを入れるだけでも動作はしますが、実運用をする際にはコンポーネント化が必須かと思うのでその一例としてコンポーネント化の流れを記載します。
前提条件/筆者環境
npmを用いてReactをインストール済みの環境を想定しています。
React: 17.0.1
typescript: 4.1.3
material-ui/core: 4.11.2
material-ui/icons: 4.11.2
reactコンポーネントの表示できる環境の構築はこちらで作成した環境を使用しています。
コンポーネント化の際の構成
サイドメニュー用のコンテンツを下記の３種類に分割して考えます。
使う場面によって変更をしそうな箇所は子コンポーネントとして切り出すことで、他の構成のサイドメニューを作ることになった際にも同一のコードのコピーを防いでDRY(Don't Repeat Your Self)に保つ狙いがあります。
① サイドメニュー内容
② メインコンテンツ
③ その他
コンポーネント化の流れ
まずはデモコードを引いてきて、そのままの表示をさせます。
次に①と②に関連する箇所をコンポーネントの利用元から渡して利用可能な状態にします。その後に①と②をさらにコンポーネントとして切り出していきます。
最後に切り出したコンポーネントをサイドメニュー用のコンポーネントに引数として渡せるようにすることで、サイドメニューや表示内容が違う箇所に対しても共通して使用できるコンポーネントにしていきます
material-uiのインストール
npmを用いてインストールを行います。
npm install @material-ui/core # 基本機能のインストール
npm install @material-ui/icons # iconのインストール
デモコードの引用
下記の２つのファイルを作成します
- 呼び出し元のファイル（index.tsx）
- デモコードを引用したファイル（persistentDrawer.tsx）
index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { PersistentDrawerLeft } from './persistentDrawer' // デモコードのimport
ReactDOM.render(
<PersistentDrawerLeft/>, // デモコードをrender
document.getElementById('app')
);
persistentDrawer.tsx（デモコードそのままのため折り畳み）
:persistentDrawer.tsx
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: theme.spacing(2),
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
justifyContent: 'flex-end',
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
},
}),
);
export function PersistentDrawerLeft() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Persistent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main
className={clsx(classes.content, {
[classes.contentShift]: open,
})}
onClick={handleDrawerClose}
>
<div className={classes.drawerHeader} />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</main>
</div>
);
}
サイドメニューの内容をコンポーネント化
persistentDrawer.tsxからサイドメニュー部分を切り出したsidemenu.tsxを作成します。
persistentDrawer.tsx
// 不要になったimportを削除
- import List from '@material-ui/core/List';
- import ListItem from '@material-ui/core/ListItem';
- import ListItemIcon from '@material-ui/core/ListItemIcon';
- import ListItemText from '@material-ui/core/ListItemText';
- import InboxIcon from '@material-ui/icons/MoveToInbox';
- import MailIcon from '@material-ui/icons/Mail';
// 作成するコンポーネントのimport
+ import { Sidemenu } from './sidemenu';
// 下記のList内を削除してコンポーネントの呼び出しに変更
- <List>
- {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
- <Divider />
- <List>
- {['All mail', 'Trash', 'Spam'].map((text, index) => (
- <ListItem button key={text}>
- <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
- <ListItemText primary={text} />
- </ListItem>
- ))}
- </List>
+ <Sidemenu/>
sidemenu.tsx
// 関連するコンポーネントのみimportのコードをデモコードからコピーしてくる
import React from 'react';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
// function名をSidemenuとする
export function Sidemenu() {
return (
// 複数のエレメントを返すのでReact.Flagment（<></>）で囲む
<>
{/* 下記はデモコードのリスト部分 */}
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</>
);
}
メインコンテンツをコンポーネント化
サイドメニューと同様にpersistentDrawer.tsxからpersistentDrawerMainContent.tsxを切り出します。
persistentDrawer.tsx
// 作成するコンポーネントをimport
+ import { PersistentDrawerMainContent } from './persistentDrawerMainContent'
// メインコンテンツ部分を削除して作成したコンポーネントを呼び出し
- <Typography paragraph>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
- facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
- gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
- donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
- adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
- Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
- imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
- arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
- donec massa sapien faucibus et molestie ac.
- </Typography>
- <Typography paragraph>
- Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
- facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
- tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
- consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
- vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
- hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
- tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
- nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
- accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
- </Typography>
+ <PersistentDrawerMainContent/>
persistentDrawerMainContent.tsx
import React from 'react';
import Typography from '@material-ui/core/Typography';
export function PersistentDrawerMainContent() {
return (
<>
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
</Typography>
</>
);
}
サイドメニューの内容とメインコンテンツをサイドメニューコンポーネントに引数として渡せるように変更
まずはpersistentDrawer.tsxに引数用の型定義とこれまで作成していたサイドメニュー内容とメインコンテンツのコンポーネントの呼び出しを引数の利用に変更します
persistentDrawer.tsx
// コンポーネントの引数を削除
- import { Sidemenu } from './sidemenu';
- import { PersistentDrawerMainContent } from './persistentDrawerMainContent'
// 型定義の追加（コンポーネントのrenderをしているfunctionの上あたりにあると見やすい）
+ interface Props {
+ sidemenu: React.ReactNode
+ mainContent: React.ReactNode
+ }
// コンポーネントの引数に設定
- export function PersistentDrawerLeft() {
+ export function PersistentDrawerLeft(props: Props) {
// サイドメニューの内容のコンポーネントを引数の利用に変更
- <Sidemenu/>
+ {props.sidemenu}
// メインコンテンツ用のコンポーネントを引数の利用に変更
- <PersistentDrawerMainContent/>
+ {props.mainContent}
次に呼び出し元の呼び出し時に引数を渡すように変更します。
index.tsx
// 作成してたサイドメニューの内容とメインコンテンツのコンポーネントをimport
+ import { Sidemenu } from './sidemenu';
+ import { PersistentDrawerMainContent } from './persistentDrawerMainContent'
// persistentDrawer.tsxに引数を渡すように変更
- <PersistentDrawerLeft/>
+ <PersistentDrawerLeft
+ sidemenu={<Sidemenu/>}
+ mainContent={<PersistentDrawerMainContent/>}
+ />,
終わりに
以上でコンポーネント化は終わりです。
これで管理画面とユーザー画面などで同様のレイアウトは使いたいが表示するサイドメニューやコンテンツが違う場合でも作成した展開可能なヘッダー付きサイドメニューのコンポーネントを共通で使うことができるようになりました。