プログラミング

【JavaScript】Web APIを使えるようになる

更新日:

{JSON} PlaceholderのAPIを使ってみる

JSON Placeholderというサイトの、サンプルAPI使ってみようかと

APIって何ってなりますが、アプリケーション間インターフェースといい、プログラムから、APIを呼び出すことで、例えば、サイトのデータベースを読み込んだりなんてできます。まずは、APIってなにを以下のコードをコピペして体験してみることにします。

こちらも同じく、Chromeのデベロッパー機能を使います。

とりあえず、index.htmlを作ります

以下が作れたら、ChromeのURL欄にドラッグ&ドロップして、デベロッパーツールを開きます

APIを呼び出すjavascript

index.jsというファイルを作り、以下をコピペします。

コンソールで確認

コンソールで実行すると、JSONの内容が見れるかと思います

今日はfetchとasyscとawaitが使えるようになったところで終わり

fetchするときは async functionとして、レスポンスはawait使用!

応用編 Jsonデータをクリックするごとに増やしていく

同じく、index.htmlを以下のコードコピペ

index.jsも以下の内容をコピペで作る

実行すると以下のようになります

See the Pen ボタン押すと名前が無限増殖スクリプト by cattleya crispa (@hamankarn) on CodePen.

ここまでのコードを覚えたら、DOM操作でJSON API使えるかなと

人気の記事!

1

ふんわり始まった激アツキャンペーン!なんとアマゾンのスマートスピーカーであるエコードットの第3世代が通常価格5,980円の所、ななななん84%割引の500円で購入できるチャンスです。 ⇩購入は以下の画 ...

2

出典:io-data.jp 2022/5/4更新 こんにちは。↑の写真のようなPCモニター環境を目指しています。4K43インチくらいの大きさの4KテレビをMacBook ProのUSB-Cと接続、もし ...

3

目次 キャンペーンを駆使!最安を渡り歩くLINEモバイルのキャンペーン楽天モバイルキャンペーンまとめ17ヶ月間の合計スマホ維持費LINEモバイルの口コミ、評判通信速度とりあえずは今の所通信速度は問題な ...

-プログラミング
-,

Copyright© コスパ部 , 2024 All Rights Reserved.