Alert、使ってますか？

私はフロントエンドの実務経験はほとんどなく、独学です。
そりゃ、フロントも触ったことはありますが、JSFというフレームワークで、皆さんが示す傾向にある
「フロントエンド？Reactとか、Vueとか、、、、angularとか！！」というのとは、少し毛色が違う気がします。

なので、ログイン完了とか、エラーが起きたとき、パットフロントに映す手段は「alert」しか知りません。
実は、今回初めて使ったのですが、下記みたいな感じでお知らせしてくれます。

いや、便利すぎます。

一応環境など

パソコンのスペック(化石です）

• ジャンクを詰め込んだ自作PC
• Windows10 Pro
• i5-2400 3.10GHz
• DDR3 16GB
• NVIDIA Geforce GTX670
• SSD 120GB + SSD 240GB , HDD 4TB

開発関係

• Visual Studio Code
• yarn 1.22.22
• node 20.11.1
• vite 5.2.0
• react 18.2.0

サクッとオシャレにできるらしいから、５分でやってみた

下記の記事を参考にしました

Reactでオシャレなアラートを出す方法

まずはモジュールを追加します。

yarn add sweetalert2

import Swal from 'sweetalert2';
 // 省略

    await signOut(auth);
    await Swal.fire({
      title: 'ログアウトしました😎😊😉',
      text: '',
      icon: 'info',
      confirmButtonText: 'OK',
      timer: 7000,
    });
    window.location.reload();
  };

これだけ。こうなります

オシャレすぎる、、、度肝を抜きました

iconは、errorも使えるようで

    await Swal.fire({
      title: '😰😰😰😰😰😰危ない操作だよ😰😰😰😰😰😰😰😰😰',
      text: '',
      icon: 'error',
      confirmButtonText: 'OK',
      timer: 7000,
    });

簡単に、相手に何が起こっているかを、視覚的に伝えられます。これは使うしかない。。。

ユーザビリティ向上のため、活用していきたい

alertも純正で使えるので、便利なのは間違いありません。
ただ、唯一のネックが、一目で「危ないこと？正常なこと？」ということが伝えにくいです。
今回はおしゃれという言葉を並べて記事にしていますが、それよりも
ユーザーに意図したことを伝えやすい、というので重宝すると思いました。

ぜひ皆さんも試してみてください。

それでは、良いReact（限定じゃないけど、、、）ライフを！！！！