React でフェスティバルの日程を作るコースは、React の基礎をすでに学んだ方のための実践プロジェクトです。用意されたフェスティバル一覧から個人の一日計画を作ります。イベントを絞り込み、選択を保持し、新しい候補がすでに選んだイベントと衝突する理由を説明できるようにします。
2 つのガイド付きラボでは、まず時間が重ならない正常な 2 件を選び、その後で時間が衝突する候補を扱います。続いて、選択から導出する日程データ、時間の確認、ローカル保存を結び付けます。独立したチャレンジでは、イベント、ステージ、ID が異なる別のフェスティバル日のデータに同じ仕組みを適用します。各ラボには独立した開始用プロジェクトとデータが用意されています。
学習内容
このコースを修了すると、次のことができるようになります。
- 選択したイベントの ID を唯一の状態の基準とし、現在の一覧から対応するレコード、選択件数、合計時間を導出する。
- 既存の選択を削除せずに表示する一覧を絞り込み、同名のイベントを安定した ID で区別する。
- 半開区間で時間を比較し、一方の終了と他方の開始が一致するイベントは許可し、実際の重複は衝突相手を示して拒否し、削除した選択を再び追加できるようにする。
- コース専用の
localStorageキーには ID のリストだけを保存し、現在も有効な選択を復元しながら、失われた古い ID を知らせ、有効な選択は残す。 - 壊れた JSON から復旧し、必要最小限の
useEffectで、ラボが利用できる間、同じブラウザとオリジンで再読み込み後の選択を復元する。
このコースの対象者
ばらばらなリストを扱うだけでなく、実用的な個人日程を中心に React コンポーネントを連携させたい方を対象としています。
前提知識： 基本的なターミナルとパスの操作、ファイル編集、HTML/CSS、JavaScript の配列・オブジェクト・関数、React のコンポーネント、JSX、props、useState による state、イベント、条件付きレンダー、map/filter、安定したリストの key、制御されたフォームが必要です。ガイド付きラボで派生状態、ID による選択、簡単な区間比較、必要な useEffect と localStorage の概念を学んでからチャレンジに進みます。React を初めて学ぶためのコースではありません。
学習環境： LabEx がブラウザ上の React プロジェクト、依存関係、プレビュー、合成フェスティバルデータを用意します。学習者はフロントエンドを実装します。サイトのラベルと実行時の出力は英語のままです。教材の翻訳は、画面も翻訳されていることを意味しません。
よくある質問
どのような場合に時間が衝突しますか？
すべてのイベントは同じ日付の現地時間を分単位で扱います。一方が終了する瞬間に他方が始まることは可能ですが、実際に時間が重なる場合は拒否します。日をまたぐ日程、タイムゾーンをまたぐ日程、ステージ間の移動時間は扱いません。
別の端末やラボにも日程を引き継げますか？
できません。復元は、同じブラウザ、同じ実際のオリジン、まだ利用できるラボ環境に限られ、ブラウザがストレージを許可していることも条件です。ブラウザのポリシーでストレージが拒否される場合、選択はその訪問中のメモリ内でのみ利用でき、再読み込み後の復元は保証されません。localStorage はアカウントやサーバーバックアップではなく、永久保存や VM 間の保存を保証するものでもありません。
完全なフェスティバル予約サービスを作りますか？
作りません。用意された合成データから個人の計画を作ります。バックエンド、アカウント、地図、ドラッグ＆ドロップ、行程の最適化、サーバーとの動的同期はコースの対象外です。
