https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FWQWQdH9JWwcSugQeWIJMxh%2F2023-frontend-basic-react-todoapp%3Ftype%3Ddesign%26node-id%3D323-757

<aside> 💡 アラートの配置について デスクトップ表示：画面上から80px、画面左右中央に配置 モバイル表示：画面上から40px、画面左右から20pxの余白

</aside>

いよいよ最後の課題です。ここではいままで学んできたことを振り返りながら、もう一つ React の機能を新しく紹介します。

以前 Organisms/TodoCard の作成の際に、名前が空のタスクを消去する処理を書いたと思います。 しかし、タスクを勝手に削除してしまうのはユーザーにとっては一瞬ぎょっとする挙動です。 ですから、「あなたのタスクは名前がついていなかったので消しましたよ」としっかり伝えてあげる必要があります。 そのために、アラートを表示する仕組みを作成していきます。

作成、編集するファイルは以下です。

ディレクトリ構造

src
  ├ components
  | ├ Atoms
  | | └ Alert
  | |   ├ index.jsx
  | |   ├ story.jsx （旧テンプレートの場合）
  | |   └ index.stories.jsx （新テンプレートの場合）
  | └ Organisms
  |   ├ AlertManager
  |   | └ index.jsx
  |   └ TodoCard
  |     └ index.jsx
  ├ contexts
  | └ alert_handler.jsx
  └ index.jsx

アラート実装の流れ

1. アラート本体のコンポーネントを作成する。
2. アラートを出したり消したりする命令を受け付ける Context を作成する。
3. 2 で作成した Context を参照し、アラートの表示・非表示を管理するコンポーネントを作成する。
4. 2,3 を設置する。
5. Organisms/TodoCard のタスクを勝手に消す部分の処理に、2 を介してアラートを表示する処理を入れる。

Atoms/Alert の作成

まずはアラート本体を作りましょう。

表示するテキストと、表示するかしないかは props で制御するとよいでしょう。

お手本と同様に、表示・非表示が切り替わる際にそれぞれフェードイン・アウトするようにしましょう。 表示、非表示の切り替えには、styled-components の機能を使いましょう。 styled-component のスタイル定義の中にアロー関数を埋め込むと、その第一引数に props が渡ってくるという仕組みがあります。 三項演算子等を使って props に応じた値を設定することで、styled-component のスタイルを動的に変更することができます。

// 例）isActive の Props に応じて文字色を変化させたい場合
import styled from "styled-components";

const Component = () => {
  return <Example isActive={true}> hogehoge </Example>
}

const Example = styled.div`
  color: ${(props) => props.isActive ? "red" : "blue"}
`

AlertHandlerContext の作成