学習ノート

2023/02/10 AJAXとAPI

API、JSON、Axios。そしてPostman、Fetch API、そしてとりあえずXHR。
JavaScriptからリクエストを流す
AJAX = Asynchronous Javascript And XML
webサイトを表示している裏側でリクエストを投げて情報をやり取りする
命令によってHTML/CSSを書き直しているのではなく、表示をしたまま裏側でデータをやり取りして、画面を書き換えていける仕組み。
最後のXMLは今はほとんど使われることがなく、JSONがそこに入るので
AJAJが本来の姿である。ただ呼びならわしでAJAXとしている。

API = Application Programing Interface 
WEB API HTTPでの情報をやり取りするためのインタフェース
天気予報、ビットコインのレート、SNSの自動返信・情報取得等々仕組みやサービスとして存在するものもあり。JSON、その実態は生データのかたまり

JSON = Java Script Object Notation 
JavaScriptのオブジェクトとは似て非なるもの。形は似ているが使い方が違う。
JSONのAPIはJS専用というわけではなくあらゆる言語で使える。要はただのストリングの羅列なのでそれ用の変換をすることで使える。
undifinedがない。JSONへの変換の際に省略されたり、null化されてしまう。
JSON.parse (parse = 変換,parseInt)
JSON.stringify (ストリング化。JSからJSONへの変換）
APIをリクエストしたらJSONが返ってくるので、それをJavaScriptのobjectにparseして、その情報をJavaScriptで使っていくことになる。

Fetch API 
Promise が使え、async , await のおかげで連続で呼び出すようなコードもスッキリまとまる。

そのFetch より 簡単、HTTPリクエスト用外部ライブラリ「Axios」がある。オープンソース、無料で使える、直感的に使えるので現在はこちらがメイン。
ライブラリ読み込んでメソッドで簡単に呼び出せる、というところがPythonのBeautifulSoupみたい。

Promiseのあたりからざっくりと動画を流し読みするだけ、要はコード入力練習を省いて、いわゆる座学だけにしている。この辺りから理解が飽和状態にあって、一つひとつ理解、腑落ちさせながら進めるのは時間的コストに大変な負荷がかかると判断。もう少しJSの基礎的な部分で実践を繰り返してからこれらのより深いWEB開発全体の知識として学びたいと思いました。

こんな流し読みでも効果はめっちゃある。

「APIをリクエストしたらJSONが返ってくるので、それをJavaScriptのobjectにparseして、その情報をJavaScriptで使っていくことになる。

この意味がとりあえずスッと理解できるくらいにまでは成長しているのだ。

また「座学なのでノートを取っておきたい」と考え、Notionの利用を最初考えたが、こういった記録を公開することのメリットも少なくないはずなので語源が同じこの「note」で記録していくことにしました。