シングルページ アプリでは、新しいページを読み込むことなく、異なるコンテンツを表示できます。そのために、リンクのクリック ハンドラと History API を使用します。History API を使用すると、ブラウザのセッション履歴を操作できます。これにより、別のページ（シングルページ アプリでは通常「ビュー」と呼ばれます）を表示するときに URL を更新できます。また、ブラウザの [戻る] ボタンも想定どおりに機能します。
この Codelab のシングルページ アプリを見てみましょう。猫または犬の画像が表示され、2 つの動物を切り替えるリンクがあります。うまくいったみたいだね。
不正な 404 を発見
アプリに微妙なバグがあります。確認してみましょう。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示
を押します。 - [Doggos] リンクをクリックします。URL がどのように変更されたかに注目してください。
- アプリを再読み込みします。
「Cannot GET /doggos」と書かれたページ（不正な 404）が表示される。ウェブアプリは、アプリ内のリンクをクリックするだけで正常に動作するように見えるため、「不審」に見えます。新しいブラウザ ウィンドウで URL を使用した場合や、ページを更新すると、破損します。問題は、これらの URL へのリクエストに応答する方法をサーバーが認識していないことです。ウェブアプリの JavaScript コードは History API を使用して URL 間を移動していますが、サーバーは URL の処理方法を認識していません。サーバーはリクエストされた URL の処理方法を把握できない場合に常に、HTTP ステータス コード 404 を返します。このコードでは、リクエストされた URL に一致するものが何もないとサーバーが通知しています。
この場合、検索エンジンは URL をインデックスに登録しません。これは、ユーザーが検索結果をクリックしてエラー メッセージを表示するためです。ただし、犬の写真など、探しているコンテンツは検出されないためです。
サーバーを修正する
このプロジェクトでは、JavaScript で記述された express.js サーバーを使用します。index.html で応答するようにサーバーを修正し、残りはシングルページ アプリが処理するようにしましょう。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
server.jsファイルを選択します。
このファイルにはサーバーコードが含まれています。express.js サーバーをセットアップし、index.html の内容を送信します。15 行目のルート設定では、リクエストが URL / に送信される場合にのみ、ウェブアプリが提供されます。サーバーは、作成した他の URL も処理する必要があります。これをすべての URL に対応するように変更し、今後他の URL でも機能するようにしましょう。
これを行うには、15 行目以降のコードを次のように変更します。
app.get('/*', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
/* は任意の URL と一致し、サーバーは指定された URL について index.html のウェブアプリを返します。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示
を押します。
新しいシークレット ウィンドウでリンクを更新して開くと、想定どおりに機能するようになりました。