共有できる検索ページを作るコースは、HTML、CSS、JavaScript の基礎を学んだ方のための実践的なフロントエンドプロジェクトです。架空の地域イベントサイト Fieldnote の検索ページを作り、別のブラウザコンテキストでリンクを開いても、同じ絞り込み条件、結果の順序、結果ページを再現できるようにします。
2 つのガイド付きラボでは、まず動作する共有ビューを使い、その後 URL に基づく検索状態とブラウザナビゲーションを実装します。独立したチャレンジでは、カテゴリと 1 ページの件数が異なる別のイベント版に同じ仕組みを適用します。各ラボには独立した開始用ファイルとデータが用意されています。
学習内容
このコースを修了すると、次のことができるようになります。
- 用意されたイベント一覧を絞り込み、並べ替え、ページ分割し、同名のイベントも含めて各レコードの内容と安定した ID の対応を維持する。
URLとURLSearchParamsでq、category、sort、pageを読み取り、正規化し、空白、&、文字としての+、未知の値、無効なページ番号を扱う。- 送信済みの絞り込み条件、表示された操作部品、結果、共有リンクを一致させ、検索結果なしの状態やページの境界を分かりやすく示す。
pushState、replaceState、popstateを使い、再読み込みと実際の「戻る」「進む」操作で確定済みビューを復元し、不要な履歴を増やさないようにする。- 保存状態のない新しいブラウザコンテキストで実際の共有リンクを開き、同じ順序のレコードを確認しながら、現在のパス、無関係なクエリパラメータ、フラグメントを保持する。
このコースの対象者
ブラウザの状態、JavaScript によるデータ処理、実用的な検索画面を結び付けたい方を対象としています。
前提知識： 基本的なターミナルとパスの操作、HTML フォーム、CSS レイアウトと見えるフォーカス、JavaScript のオブジェクト、配列、関数、DOM の選択と操作、イベントが必要です。プロジェクトファイルを編集して保存できることも前提です。ガイド付きラボで URL エンコード、filter/sort/slice、配列のコピー、安定したレコード ID、ブラウザ履歴を学んでからチャレンジに進みます。React やバックエンドプログラミングは不要です。
学習環境： LabEx がブラウザ上の開発環境、静的サイト、合成イベントデータを用意します。実装するのはブラウザ側の JavaScript で、サーバーはファイルを配信するだけです。サイトのラベルと実行時の出力は英語のままです。
よくある質問
検索バックエンドや訪問者の設定保存機能を作りますか？
作りません。絞り込み、並べ替え、ページ分割は、用意されたローカルデータを使ってブラウザ内で行います。確定済みビューは URL が表すため、別のブラウザが最初のブラウザの保存データに依存することはありません。
まだ送信していない変更はどうなりますか？
Search で送信するまでは操作部品の値は下書きです。再読み込みすると URL の確定済み状態に戻ります。絞り込みすぎた検索の修正や、説明された既定値とページ番号の補正も練習します。該当する結果がないことも有効な結果です。
このコースで永続的なリンクを公開できますか？
できません。共有できるのは、許可されたラボが稼働し、そのアクセス経路が利用できる間だけです。リンクは VM の稼働期間を延ばさず、別々のラボ VM 間での利用を保証せず、ページをインターネットに公開するものでもありません。本番環境へのデプロイと完全なアクセシビリティ認証はコースの対象外です。
