シングルページ アプリでは、新しいページを読み込むことなく、さまざまなコンテンツを表示できます。そのためには、リンクのクリック ハンドラと History API を使用します。History API を使用すると、ブラウザのセッション履歴を操作できます。これにより、別のページ（シングルページ アプリでは通常「ビュー」と呼ばれます）を表示するときに URL を更新できます。また、ブラウザの [戻る] ボタンが想定どおりに機能することも確認します。
この Codelab のシングルページ アプリを見てみましょう。猫または犬の画像が表示され、2 種類の動物を切り替えるリンクが表示されます。問題なく動作しているようです。
巧妙な 404 エラーを暴く
残念ながら、アプリには小さなバグがあります。見てみましょう。
- サイトをプレビューするには、[View App] を押します。次に、[Fullscreen]
を押します。 - [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 のウェブアプリを返します。
- サイトをプレビューするには、[View App] を押します。次に、[Fullscreen] を押します。
新しいシークレット ウィンドウでリンクを更新して開くと、想定どおりに動作するようになります。