ウェブサーバーの章に Fetch API を追加 (アウトライン)

Author: chelproc

docs/3-web-servers/06-fetch-api/index.mdx

@@ -0,0 +1,40 @@
+---
+title: ブラウザとサーバー間の通信
+---
+
+- 前頁では、Webサーバーを構築した
+- ブラウザとWebサーバーはHTTPを使って通信することを学んだ
+- ブラウザがリクエストを発行するのは、次のいずれかの場合だった
+  - アドレスバーにURLを入力したとき
+  - リンクをクリックしたとき
+  - 取得した HTML に外部リソースを読み込むタグが含まれていたとき
+- 実は、JavaScriptを使ってブラウザにリクエストを発行させることもできる
+- そのためのAPIがFetch APIだ
+
+## ブラウザで動く JavaScript でモジュールを用いる
+
+- Fetch API を用いることにより、Webアプリはブラウザの枠を超えた機能を実現できる
+- しかし、複雑な処理を行う場合、JavaScriptのコードが長くなり、可読性が低下する
+- Node.js では、モジュールを用いてコードを分割することができた
+- 実は、ブラウザでも、JavaScriptのコードをモジュールとして分割することができる
+- これ以降は、ブラウザで動く JavaScript でもモジュールを用いることを前提にする
+
+サンプルプログラム・解説 (../04-module/ と同様の内容)
+
+## Fetch API
+
+- Fetch API は、 `fetch` 関数を呼び出すことで実行できる
+- `fetch` 関数にリクエストを発行したい URL を指定することで、[Response](https://developer.mozilla.org/ja/docs/Web/API/Response) オブジェクトを取得できる
+- Response オブジェクトの `text` メソッドを呼び出すことで、レスポンスを文字列として取得できる
+
+非同期処理についてのコラム (async await をつけることだけ触れる)
+
+サンプルプログラム・解説 (../../4-advanced/01-fetch-api/ と同じ内容)
+
+## 演習問題1
+
+- Fetch API を用いて日経平均株価を取得するプログラム。日経平均はサーバーで乱数生成
+
+## 演習問題2
+
+- 演習問題1に加え、 Fetch API を用いて 10 秒ごとに日経平均株価を取得してリアルタイムに反映させるプログラム