チャレンジ：チャット通知における条件付きレンダリングの実装

課題：チャット通知の作成

ユーザーに未読メッセージがある場合のみ通知を表示する仕組みの考案。ユーザーが未読メッセージを持っているかどうかを確認し、この条件が真であれば、メッセージ数を示す通知を表示。メッセージがない場合は何も表示しない。

課題内容：

• 2つのコンポーネントを作成：親コンポーネントAppと子コンポーネントNotification
• 親コンポーネントAppは、messagesというプロップを子コンポーネントに渡す。messagesプロップはメッセージを含む配列。
• 子コンポーネントでは、messages配列の長さを確認。
• 配列にメッセージがある場合、You have <amount> of unread messages.という文字列を表示。<amount>は未読メッセージの実際の数に置き換える。

1. 配列にメッセージがあるかどうかを判定するには、lengthプロパティを使って配列の長さを確認。構文は array.length。
2. Reactでは、&&文のロジックを実装するためにif演算子を使用。
3. 文字列を正しく構築するには、プレースホルダーamountを配列の実際の長さで置き換える。
4. 文字列内で配列の長さを設定するには、中括弧{array.length}を使用。