【学習ログ】MDN JavaScript チュートリアル (12 回目)

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃
　 ┣ 中級者向け
　 ┃ ┣ クライアントサイド Web API
　 ┃ ┃ ┣ Web API の紹介
　 ┃ ┃ ┣ 文章の操作
　 ┃ ┃ ┣ サーバからのデータ取得（本日の学習箇所）
　 ┃ ┃ ┣ サードパーティ API
　 ┃ ┃ ┣ 絵を描く
　 ┃ ┃ ┣ 動画と音声の API
　 ┃ ┃ ┗ クライアント側でのデータ保存
　 ┃ ┃
　 ┃ ┣ JavaScript 「再」入門
　 ┃ ┣ JavaScript のデータ構造
　 ┃ ┣ 等価比較と同一性
　 ┃ ┗ クロージャ
　 ┃
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

サーバからのデータ取得

サーバからデータを取得し、それを使用して Web ページのコンテンツを更新する方法を学習する。

ノート・メモ

もともと Web のページ読み込みは単純でした。 Web サイトのデータをサーバにリクエストすると、何も問題がなければ、ページを構成するいろいろなものがダウンロードされてユーザーのコンピュータに表示されていました。
しかし、上記の場合は問題点もあり、どこかページの一部分だけ書き換えたい場合に書き換えたい部分が一部なのにページ全体を読み込み直さなければならないという問題がありました。（UX の悪化を招く）
そこで、Web ページから細かなデータをリクエストして、必要な時だけ表示する技術が誕生しました。これは XMLHttpRequest や、最近では Fetch API の利用によって実現されます。
これらの技術一般は Ajax (Asynchronous JavaScript and XML) と呼ばれます。
XMLHttpRequest (よく XHR と略記されます)
- Microsoft によって 1990 年代に発明され、非常に長い間ブラウザを超えて標準化されてきました。
- 古いブラウザをサポートする場合は、XHR の方が良い。
Fetch
- Fetch API は、基本的には XHR の今風の代替品です — 最近になってブラウザに組込まれたもので、非同期 HTTP リクエストを JavaScript で、開発者や他の Fetch の上に組まれた API から簡単に行なえるようにするためのものです。
- モダンブラウザのみなら、Fetch が良い選択肢。

分かった事

Ajax には、XMLHttpRequest（以前からある方法）と Fetch（最近の方法）がある事とケースバイケースで使い分ける必要があると分かりました。

分からなかった事

Fetch のところで、「プロミス」という単語・概念が出てきたのですが、正直よくわからなかったです。重要そうな概念だと思ったので、理解したいところ。
最後の「課題：XHR 版の缶詰屋」に挑む以前に、Fetch 版のスクリプトの内容が理解出来ませんでした。

まとめ

悔しい事に今回は、詳細な部分の理解が出来なかったです。XHR と Fetch は Ajax ひいては、 JavaScript で重要な位置を占めると考えられるので、諦めずに何度でも学習にチャレンジしていこうと考えています。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。