HTMLはどこから取得できるのか 「サーバー」が HTML をブラウザに渡す ブラウザ（クライアント）は、 HTML を取得するためのリクエストを送信する →サーバーがクライアントからのリクエストを受け取って、レスポンス (HTML)をブラウザに返す （クライアント／サーバーシステムの一種） 第2章で登場したHTTPを用いて通信 GET “https://example.com/” ステータスコード：200, OK
HTML を返す方法① リクエストを受け取るたびに静的 HTML を返す ブラウザが表示する HTMLはどこから取得できるのか 〜静的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ HTML 画面描画
HTML を返す方法① リクエストを受け取るたびに静的 HTML を返す ブラウザが表示する HTMLはどこから取得できるのか 〜静的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ 「材料から探す | 豚肉」をクリック GET https://delishkitchen.tv/categories/458 HTML 画面描画
HTML を返す方法① リクエストを受け取るたびに静的 HTML を返す ブラウザが表示する HTMLはどこから取得できるのか 〜静的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ 「豚肉のレシピ」ページへ遷移 GET https://delishkitchen.tv/categories/458 静的HTML① 静的HTML② 画面描画 画面描画 HTML はページ ごとに異なる
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ DB 外部データソー ス
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ DB 外部データソー ス SELECT おすすめレシピ動画 結果
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ HTML 画面描画 DB 外部データソー ス 埋め込み SELECT おすすめレシピ動画 結果
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ 「豚肉のレシピ」ページへ遷移 GET https://delishkitchen.tv/categories/458 画面描画 DB 外部データソー ス SELECT おすすめレシピ動画 結果 HTML 埋め込み
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ 「豚肉のレシピ」ページへ遷移 GET https://delishkitchen.tv/categories/458 画面描画 DB 外部データソー ス SELECT おすすめレシピ動画 SELECT 豚肉レシピ動画 結果 結果 HTML 埋め込み
HTML を返す方法② リクエストを受け取るたびに動的にレンダリングした HTML を返す 外部データソースを利用した動的なレンダリング 〜動的サイト〜 イメージ ※実際のDK webの構成とは異なる部分があります ブラウザ サーバー GET https://delishkitchen.tv/ 「豚肉のレシピ」ページへ遷移 GET https://delishkitchen.tv/categories/458 HTML 画面描画 画面描画 DB 外部データソー ス 埋め込み SELECT おすすめレシピ動画 SELECT 豚肉レシピ動画 結果 結果 HTML 埋め込み
Web APIを用いることで非同期処理を実現している Web APIの例 • fetch api • storage api • DOM ブラウザは複数のスレッドを持っており、メインスレッドとブラウザのスレッドに分けられる 1. メインスレッドから非同期処理を呼び出す 2. Web APIが呼び出される 3. Web APIがブラウザのスレッドで実行される 4. 完了後コールバックがタスクキューに追加される 5. メインスレッドが空くとコールバックがメインに移動し実行される フロントエンド メインスレッド （コールスタック） Web API タスクキュー 非同期処理 イベント ループ 監視 非同期処理 コールバック 1 2 3 コールバック コールバック コールバック 4 5
Architecture: クイズ1 B/E - 層ベースのアーキテクチャ シナリオ：レシピデータをMySQLに保存する 問題：「ライブラリを使用してSQL INSERT文を実行する」処理はどの層に実装すべきですか？ A. User Interface層（フォーム送信処理の一部として） B. Business Logic層（レシピ作成ロジックとして） C. Data層（データアクセス抽象化として） D. Infrastructure層（SQL実行の技術的実装として）
Architecture: クイズ2 B/E - 層ベースのアーキテクチャ シナリオ：レシピ検索結果を返す実装を行うが、以下のルールを適用させたい • ユーザーがプレミアム会員の場合、お気に入りレシピを上位3件に表示 • 通常会員の場合、お気に入りレシピに「★」マークを付けるだけ • 残りは人気順でソート 問題：この「お気に入りレシピの表示順制御」ロジックはどの層に実装すべきですか？ A. User Interface層（画面表示のレイアウト制御として） B. Business Logic層（ビジネスルールの実装として） C. Data層（データ取得時のソート処理として） D. Infrastructure層（キャッシュシステムの一部として）
Architecture B/E - 分散システムアーキテクチャ A B C D A B C D User Interface User Interface • アプリケーションを、独自の責任範囲を持つ独立した小さな部分に分割 ◦ 例. 全社共有の認証機能を認証サービスとして独立させる • 大規模システムやスケーラブルなシステムで利用 • 各サービスの管理コストが増加してしまうデメリットもある 従来の設計 マイクロサービスアーキテクチャ
everypr
inesmontani
quramy
chriscoyier
mfonobong
davidcarrasco
rkaga
destraynor
honzajavorek
tammielis
khoart
trishagee
addyosmani
