HTTP プロトコル

https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP で HTTP プロトコルをおさらいします。

fetch API 基礎

メインテキストの 238 ～ 240 ページで、fetch API について把握します。

✅ポイント

• fetch() 関数を使うと URL を引数にしてネットワーク通信ができます。この処理は非同期処理です。

📝体験してみましょう

• fetch API 体験
  • https://codepen.io/1ft-seabass/pen/QWoqyxr

クロスオリジン

メインテキストの 242 ～ 243 ページで、クロスオリジンについて把握します。

✅ポイント

• ある Web ページの通信相手が同じドメインであれば信頼できます。
• もし Web ページの通信相手が違うドメインだと漏洩の危険があります。
• Web の世界では、こうした通信はセキュリティ上危険な行為としてブロックされることが多いです。
• こうした通信は CORS という略称、Cross-Origin Resource Sharing オリジン間リソース共有と言います。
• 難しい内容ではありますが、今後ネットワークでデータのやりとりをしていくには大切なことです。また、このあとのプログラム体験で必要な知識ですので、大まかに把握しておきましょう。
• 今回の授業ではクロスオリジンが許可されている API を触っています

📝体験してみましょう

• クロスオリジン体験
  • https://codepen.io/1ft-seabass/pen/xxBXyqV

fetch API 実践

メインテキストの 238 ～ 240 ページで、fetch API のメソッドやプログラムについて把握します。

✅ポイント

• fetch() 関数は Promise オブジェクトを返します。
• Promise オブジェクトの関数は Response オブジェクトを受けとります。
• この Response にはプロパティやメソッドがあり通信により取得したデータを取り出すことができます。
• より複雑な fetch 処理は Web 検索で調べてみましょう。
  • https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

📝体験してみましょう

• .
• fetch API データ受信実践
  • https://codepen.io/1ft-seabass/pen/zYbEraV
• fetch API データ送信実践
  • https://codepen.io/1ft-seabass/pen/RwdLrBK

外部サービス紹介

public-apis https://github.com/public-apis/public-apis で、外部サービスを例を把握します。

✅ポイント

• public-apis は、公開されている Web API の一覧をまとめたウェブサイトです。
• いろいろなカテゴリの API が掲載されていて API の説明や利用方法、エンドポイントの URL などが記載されています。
• 例えば、天気予報、ニュース、スポーツ、金融、交通、医療、科学、自然言語処理などのカテゴリがあります。

📝体験してみましょう

• 外部サービス API 受信実践
  • https://codepen.io/1ft-seabass/pen/WNmZrKJ
• 柴犬画像チャレンジ
  • https://codepen.io/1ft-seabass/pen/rNRYVYN

次回は obniz スターターキットを忘れないようにしましょう

よろしくお願いします！