2023.12.28

シングルページアプリケーションとFetchの探求

marugotoyoten

cs50のYoutube動画「シングルページアプリケーションとFetchの探求」について要点と要約をまとめました

３つの要点

要点１
1. シングルページアプリケーション（SPA）は、1つのページが骨組みとなり、JavaScriptを使って動的に更新されるフロントエンド開発の人気のあるトレンドです。
要点２
2. DOM操作は、JavaScriptの最も強力な機能の1つであり、DOM要素を作成および変更することができます。
要点３
3. Fetchを使用することで、動的に情報をロードすることができます。Fetchを使うことで、トークンをリクエストヘッダーに含めることができ、認証の必要性を回避できます。

要約

シングルページアプリケーション（SPA）について
このセッションでは、フロントエンド開発の探求を続け、シングルページアプリケーション（SPA）に焦点を当てました。SPAは、1つのページが骨組みとなり、すべてがJavaScriptを使って動的に更新されるフロントエンド開発の新しいトレンドです。AngularやEmber、Meteorなどのフレームワークでは、AJAXを使用してSPAを実装しています。AJAXと「fetch」関数の重要性についても議論しました。

DOM操作について
JavaScriptの最も強力な機能の1つは、DOM操作です。これにより、DOM要素を作成および変更することができます。「document.createElement」関数について学びました。これは、変更可能な仮想DOM要素を作成し、「element.innerHTML」や「element.appendChild」などの関数を使って変更できます。また、JavaScriptを使ってページ上にHTML要素を動的に作成する方法についても議論しました。これは、以前のデモで示されたように、SPAの構築には重要な知識です。

Fetch関数の使用について
バニラJavaScriptを使用して独自のSPAを作成するためには、「fetch」関数の使い方に習熟する必要があります。Fetchを使用すると、特に認証が必要な情報を動的にロードすることができます。Fetchを使用する利点は、トークンをリクエストヘッダーに含めることができるため、URLに含める必要がないことです。これにより、フロントエンドでの認証の必要性を回避し、リクエストを逆プロキシを介して直接バックエンドに渡すことができます。

Fetchのマスターに向けて
Fetchをマスターするためには、情報の送信と受信の両方でFetchを使用する練習が必要です。サーバーにGETリクエストを行うことで、Fetchを使用してデータを取得する方法について議論しました。ページのレンダリングとデータの取得を分離することで、必要なデータをフェッチし、JavaScriptを使って動的にページにロードすることができるシンプルなページを作成することができます。このアプローチにより、URLに認証情報を含める必要がなくなり、効率的かつ安全なデータの取得方法が提供されます。

▼今回の動画