WEBアプリでのAlert表示について
目次
１．はじめに
２．オススメのアラート表示
２－１．React Material-UI Snackbar
２－２．React Material-UI Snackbar ＋ Alert
２－３．React-toastify
３．おわりに
１．はじめに
こんにちは！ システム開発部のＥ.Ｎです。
トラストではお客様のDX化のお手伝いをさせていただくために、様々なWEBアプリを開発しています。
多種多様なアプリがありますが、どのアプリにも共通して 『ユーザーにアラート(メッセージ)を表示』
する機能が必要となります。
（※ 『ユーザーにアラート(メッセージ)を表示』 するとは…？）
・ 何かしらのデータを登録 → 『登録が完了しました』 と画面に表示したり…
・ 入力項目に不備がある場合 → 『未入力の項目があります』 と注意喚起を行ったり…
システムからユーザーへお知らせしたい情報をアラート(メッセージ)表示し、可視化します。
今回はReactでWEBアプリを実装する際にオススメの、
WEBデザイナーではない私でもすぐに実装することができたアラート表示フレームワークをご紹介いたします。
２．オススメのアラート表示
２－１．React Material-UI Snackbar
たくさん情報が公開されており、簡単に綺麗なデザインを使うことのできる 『Material-UI』 です。
何等かのイベントの後に、画面下部に任意のアラートを表示することができます。
① 実装イメージ(例)
② インストール
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material③ Snackbarの実装(例)
import { useState } from 'react';
import Snackbar from '@mui/material/Snackbar';
import ClearIcon from "@mui/icons-material/Clear";
function App() {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
return (
<div>
<button
className='btn btn-primary'
onClick={ handleOpen }
>Click</button>
<Snackbar
open={ open }
message="complete!!"
onClose={ handleClose }
action={<ClearIcon onClick={ handleClose }/>}
/>
</div>
);
}
export default App;＜Snackbarプロパティ＞
open：
trueの場合にコンポーネントが表示されます。ReactのuseStateを利用し、表示状態を管理します。
今回の例ではbutton押下時にopenステートをtrueに変更しています。
message：
表示メッセージを設定します。
onClose：
コンポーネントを閉じる際に実行するコールバック関数を設定します。
action：
Snackbarの最後にレンダリングされる要素を設定します。
今回使用したプロパティはSnackbarを表示するために必要な最小限の設定となります。
その他にもたくさんのプロパティが準備されているため、アラートの表示位置や表示時間など、自由にカスタマイズすることが可能です。
https://mui.com/material-ui/api/snackbar/
２－２．React Material-UI Snackbar ＋ Alert
２－１．のSnackbarにAlertを追加し、デザイン性の高いアラート表示を実現できます。
① 実装イメージ(例)
② インストール ※２－１と同様
③ Snackbar ＋ Alertの実装(例)
import { useState } from 'react';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';
import ClearIcon from "@mui/icons-material/Clear";
function App() {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
return (
<div>
<button
className='btn btn-primary'
onClick={ handleOpen }
>Click</button>
<Snackbar open={ open }>
<Alert
onClose={ handleClose }
severity="success"
variant="filled"
>
Snackbar + Alert !!
</Alert>
</Snackbar>
</div>
);
}
export default App;＜Alertプロパティ＞
severity：
アラートの重要度を設定することにより、色やアイコンが設定されます。
https://mui.com/material-ui/api/alert/
２－３．React-toastify
React-toastifyを使用することで、Snackbarより簡単に動きのあるアラート表示を実現できます。
① 実装イメージ(例)
② インストール
npm install react-toastify③ React-toastifyの実装(例)
＜最上位のコンポーネントで読み込み＞
最上位のコンポーネントでインポートすることにより、すべての子コンポーネントでtoastが使用可能となります。
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
<ToastContainer theme="colored" />＜子コンポーネントで呼び出し＞
アラート表示を行いたいタイミングでtoastを呼び出します。
import React from "react";
import { toast } from 'react-toastify';
function App() {
return (
<div>
<button
className='btn btn-success'
onClick={() => {
toast.success('success!!');
}}
>success</button>
<button
className='btn btn-info'
onClick={() => {
toast.info('info!!');
}}
>info</button>
<button
className='btn btn-warning'
onClick={() => {
toast.warning('warning!!');
}}
>warning</button>
<button
className='btn btn-danger'
onClick={() => {
toast.error('error!!');
}}>error</button>
</div>
);
}
export default App;アラート表示したいタイミングで 「toast.success(＜表示メッセージ＞)」 と記述するだけですので、
非常にシンプルですよね。
３．おわりに
今回ご紹介した３つのアラート表示は、数あるフレームワークのごく一部分にすぎません。
これからも様々なコンポーネントを試作し、
ユーザー様に使い心地が良いと感じていただけるアプリ開発をトラストは続けていきます。
