シングルページ アプリでは、新しいページを読み込まなくても異なるコンテンツを表示できます。そのために、リンクのクリック ハンドラと 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 のウェブアプリで応答します。
- サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
新しいシークレット ウィンドウでリンクを更新して開くと、想定どおりに動作するようになります。