web技術の知識

サーバ

・クライアントサーバシステム

コンピュータサーバとクライアントに分けてデータのやり取りを行うシステム

クライアントがサーバに対してリクエストを送信し、サーバはリクエストに対する反応をレスポンスとしてクライアントに送信する。

・リクエスト(request)

サーバにデータの要求を送ること

(種類)

GET

サーバからデータを要求

POST

サーバにデータを送る

・レスポンス(response)

リクエストに対するサーバの反応

API

アプリケーションやソフトウェア、ハードウェア間でデータや機能を共有するためのインターフェース

(目的)
異なるプログラム同士でデータや機能を共有できるようにする

ハードウェアの場合
規定のグラフィックAPIに従っていれば、異なるGPUでも共有化されたプログラムで操作が可能

Webサービスの場合
WebAPI(REST API、RPC API)に従っていれば、Webサーバが提供するサービスの種類や言語に関わらず、リクエストを送信してデータを受けとることができる

JSON

APIでのデータのやり取りでよくJSONが使用される

(JavaScriptでの使用例)
1.変数などに文字列として変数にJSON形式のデータを入れる

const jsonString = `
    {
        "model": "Tesla X",
        "brand": "Tesla",
        "price": "$100k",
        "year": 2018
    }
`;

2.文字列をJSONデータとして扱えるようにパース(解析)する

const jsonData = JSON.parse(jsonString)

3.JSONデータを操作する

console.log(jsonData.model);

JavaScriptでサーバからデータを取得するには

fetchを使用する

fetchとはサーバから特定の情報を取得するためのJavaScriptライブラリ。
指定されたURL(リソース)に対してHTTPリクエストを送信してレスポンスを取得する

使用方法
1.APIからPromiseオブジェクトを作成する(fetchメソッド)
※学習教材用のAPIを使用

const fetchPromiseRanInt = fetch('https://api.recursionist.io/random-integer');

2.サーバからのレスポンスをJSONに変換する

const jsonResponse = fetchPromiseRanInt.then(function(response){
    // サーバからのレスポンスをJSONに変換するためのjsonメソッドを呼び出します
    return response.json();
});

3.渡されたデータを表示

// このコールバック関数の引数dataは、解析されたJSONデータを表します
JsonResponse.then(function(data){
    console.log(data);
});

(出力)
726107178