映画上映スケジュール風アプリ

映画館の上映スケジュールを想定したWebアプリケーションです。APIから取得した上映データをタイムテーブル形式で表示し、日付の切り替え、作品名検索、ジャンル・上映形式による複数条件での絞り込みに対応しています。上映作品を選択すると、モーダルで詳細情報を確認できます。

制作背景

前職で類似のタイムテーブルをTypeScriptで実装した経験から、Reactを用いればデータの表示や複数条件による絞り込みをより効率的に実装できるのではないかと考えていました。
そこで、Reactの状態管理への理解を深めることを目的に、映画館の上映スケジュールを題材としたアプリケーションを制作しました。

実装内容

• mockAPIから上映データを取得し、Reactのstateで検索条件やモーダルの開閉状態を管理
• CSS Gridを使用し、上映開始・終了時刻とスクリーン番号から、上映カードの配置位置と高さを算出
• 日付切り替え、作品名の部分一致検索、ジャンル・上映形式の複数選択を組み合わせた絞り込み実装
• HTMLのdialog要素とuseRefを使用した作品詳細モーダルを実装し、表示中は背景のスクロールを抑止
• データ取得中・取得失敗・検索結果0件の各状態に応じた表示切り替えの実装