SHIMIZU KASUMI

ドットインストールReact入門講座を受講し、以下の基礎を習得しました。

• ・コンポーネントの作成
• ・stateを用いた状態管理
• ・条件分岐による表示制御
• ・配列を用いたリスト描画

講座のデモアプリをベースに、実務を意識したUI/UXの改善と機能追加を行いました。

■UI改善

• ・増減ボタンを色分けをして、直感的に操作できるよう改善
• ・ボタンのクリック領域を拡張し、誤操作を防止
• ・要素間の余白を調整し、視認性と操作性を向上

■UX改善・機能追加

• ・注文フロー（数量選択 → 金額確認 → 注文 → 履歴保存）を実装
• ・合計金額が高額（3,000円以上）の場合、警告メッセージを表示
• ・エラー（未選択）および成功時にメッセージを表示

ユーザーの操作ミスを防ぐことと、直感的に操作できるUIを意識して改善を行いました。
ただし本制作ではReactの状態管理やロジック設計の理解を優先し、UIは最低限の実装としました。

モバイルファーストでレイアウトを設計したため、PC表示では余白が目立つ構成となっています。
PCでもより多くの情報を効率よく確認できるよう、レイアウトの最適化を検討しています。

また、Web Storage（LocalStorage）を利用して注文履歴を保持し、ページ更新後もデータが保持されるようにすることで、利便性の向上を図りたいと考えています。