☰
あっくんブログ Written by Akihiro Tsuji

JavaScriptの通信処理

JavaScript プログラミング

こんにちはあっくんです。1週間ほど寝込んでました。体調とメンタル共にやられていました。みなさんは体調はいかがでしょうか？自分と向き合えずひたすら、プライムビデオを見て現実逃避してました。「祈りの幕が下りる時」という映画が現実離れして、おもしろかったです。
起きてることが辛すぎでひたすら寝てましたが、なんとか少しずつ復活してきました。どうか体調とメンタルには気をつけてくださいね。

今回はJavaScriptの通信処理についてやっていきましょう。主にJSONですね。

JavaScriptには通信処理でよく使われるデータ形式でJSON,JSONPがあります。

JSON

JSONはJavaScript Object Notationです。JavaScriptのオブジェクトに似た書き方です。

例、

{
	"menu": [
		{"name": "ホットコーヒー", "price": 450},
		{"name": "アイスコーヒー", "price": 450},
		{"name": "チョコケーキ", "price": 500},
		{"name": "チーズケーキ", "price": 500}
	]
}
Code language: JSON / JSON with Comments (json)

JSONでは、通常のオブジェクトのように、内容を入れ子にすることができます。
配列や文字列、数値、真偽値、nullを書くことができます。undefinedや関数は書けません。
オブジェクトは、プロパティ名を「”」(ダブルクォーテーション)で囲います。文字列も「”」で囲います。「’」(シングルクォーテーション)や「`」(バッククォート)は使えません。

JavaScriptには、ビルインのJSONオブジェクトがあります。JSONオブジェクトの静的メソッドを使うと、JSONをパースしたり、文字列化したりできます。

JSONオブジェクトのメソッド

JSON.stringify(o)
オブジェクトoをJSON形式の文字列にして返します。

JSON.stringify(o, null, s)
オブジェクトoをJSON形式の文字列にして返します。人間がよみやすいように整形して、第３引数の文字列sインデントします。

JSON.parse(s)
JSON形式の文字列sからオブジェクトを作る。失敗すると例外を起こします。

例、JSONオブジェクトで、文字列化。

Image from Gyazo 
<html>
<script>
    // オブジェクトを作成
    const shop = {
        menu: [{
            name: "ホットコーヒー",
            price: 450,
        }, {
            name: "アイスコーヒー",
            price: 450,
        }, {
            name: "チョコケーキ",
            price: 500,
        }, {
            name: "チーズケーキ",
            price: 500,
        }, ],
        order: null,
        open: true,
    };

    // 文字列化してコンソールに出力
    console.log(JSON.stringify(shop));
</script>

</html>
Code language: HTML, XML (xml)

例、JSON.stringify()に、第２引数、第３引数を設定します。

Image from Gyazo 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <script>
        // オブジェクトを作成
        const shop = {
            menu: [{
                name: "ホットコーヒー",
                price: 450
            }, {
                name: "アイスコーヒー",
                price: 450
            }, {
                name: "チョコケーキ",
                price: 500
            }, {
                name: "チーズケーキ",
                price: 500
            }, ],
            order: null,
            open: true,
        };

        // 文字列化してコンソール出力
        console.log(JSON.stringify(shop, null, " "));
    </script>
</body>

</html>
Code language: HTML, XML (xml)

例、JSON形式の文字列から、パースする例を示します。

Image from Gyazo 
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<script>
    // JSON形式の文字列を形成
    const text =
        '{"menu":[{"name":"ホットコーヒー","price":450},{"name":"アイスコーヒー","price":450},{"name":"チョコケーキ","price":500}, {"name":"チーズケーキ","price":500}],"order":null,"open":true}';

    // オブジェクトにパース
    let res = null;
    try {
        res = JSON.parse(text);
    } catch (e) {}

    // コンソールに出力
    console.log(res);
</script>

</html>
Code language: HTML, XML (xml)

JOSNP

JSONPはJSON with paddingの略です。JSONPは、JSONのテキストデータを別のドメインからJavaScriptのプログラムとして読み込みを施したJSONです。JSONをJavaScriptの関数ではさみ、JSONを引数として実行します。この関数部分がpaddingです。
JOSNは、JavaScriptで読み取るには便利な形式ですが、サーバー側で特殊な設定をしない限り、同じドメインからしか読み込めません。クロスオリジンの制約があるためです。この制約を回避するには、たとえばサーバー側で、レスポンスヘッダにaccess-control-allow-originという値をつけるといった対応が必要です。Web API(URLを指定してデータを取れるサービス)の中には、こうした設定をおこなうことで、JSONをJavaScriptから読み込みを可能にしています。

構文

resFnc({"menu": ["ホットコーヒー","アイスコーヒー"]})

Code language: JavaScript (javascript)

通常この関数名は、WevApiのcallbackの値として指定します。
URLのとき、resFncを関数名として付け足します。

構文

https://example.com/spi?q=abc&callback=reFnc
Code language: JavaScript (javascript)

Webページ側とプログラムで、resFncという関数を用意しておけば、JSONを受け取ることができます。

例、サーバーを利用せずに模式化した、JSONPの処理。
JSONP形式のファイルを用意します。Webページ側のプログラムを示します。script要素を作成して、JSONPのURLを作成して、documentのbodyに加えます。back()関数で、JSONを得ます。

Image from Gyazo

json.js

back({ menu: ["ホットコーヒー", "アイスコーヒー"] });
Code language: CSS (css)

jsonp.html

<html>
<script>
    // windowにDOMContentLoadedの処理を登録
    window.addEventListener("DOMContentLoaded", (e) => {
        // body要素にscript要素を加える。
        const el = document.createElement("script");
        el.setAttribute("src", "./jsonp.js");
        document.body.appendChild(el);
    });

    // JSONPが呼ぶ関数
    function back(json) {
        console.log(JSON.stringify(json, null, " "));
    }
</script>

</html>
Code language: HTML, XML (xml)

サンプル用のサーバーの起動

Fetch,XMLHttpRequestのサンプルを確かめるにはサーバーを起動する必要があります。サンプルを試したいときは、Node.jsなどの準備が必要です。
nodejsの環境構築はこちらの動画を参考にして導入しました。

CUI環境を開きます。カレントディレクトリに移動して
node .
とコマンドします。するとサーバーが起動します。Webブラウザで以下のURLにアクセスします。
http://localhost:3000/
http://127.0.0.1:3000/

Fetch APIで通信

JavaScriptには通信機能があります。インターネット上にあるリソースをダウンロードしたり、URLにデータをアップロードしたりできます。WebブラウザのJavaScriptには、fetch()関数があります。このfetch()関数は、第１引数にURLを書いて実行すると、インターネット上のリソースにアクセスできます。
このfetch()関数は、Promiseオブジェクトを返します。後続の.then()メソッドでは、Responseオブジェクトを受け取れます。通信後のデータを取り出したりする処理はこのResponseオブジェクトを使って行います。

構文

fetch(URLの文字列
.then(response => {
	Responseオブジェクトを使った処理クトを使った処理
})
Code language: JavaScript (javascript)

fetch()関数は第２引数にオブジェクトを書けます。このオブジェクトには、通信を制御する細かな設定を書きます。ファイルをPOSTでアップロードしたりするときは、第２引数にオブジェクトを指定します。

構文

fetch(URLの文字列, {
	method: 'POST', //GETやPOSTを指定
	body: '' //送信するデータ
})
.then(response =>  {
	Responseオブジェクトを使った処理クトを使った処理
})

Code language: JavaScript (javascript)

第２引数に指定するオブジェクトのプロパティ

method
GETやPOSTの文字列。

headers
Headersオブジェクト。

body
POSTのときに送るデータ。文字列なだ、いくつかのデータ形式を送れます。

cache
キャッシュモード。reload, force-cacheなど、いくつかの設定あり。

Headersオブジェクトは、new Headers()でインスタンスを作り、.append(キー, 値)でデータを追加します。

Responseオブジェクトには、さまざまなプロパティがあり、通信が成功したか確認できます。

Responseオブジェクトのプロパティ

.headers
ヘッダー。

.ok
レスポンスが成功したかの真偽値。

.status
HTTPステータスコード。200(成功)など。

.statusTest
HTTPステータスコードに応じたメッセージ。OKなど。

.url
レスポンスのURL。

.body
レスポンスのボディ。

Responseオブジェクトのメソッドです。値を取り出すものが多いです。

Responseオブジェクトのメソッド

.text()
Promiseオブジェクトを返します。文字列を引数にresolve()します。

.json()
Promiseオブジェクトを返します。JSONオブジェクトを引数にresolve()します。

例、fetch()関数で「data.json」を読み込みます。
読み込みの「data.json」と通信処理を行う「fetch.html」です。
手っ取り早く、サーバーにつなぐために、VSCodeのLive Serverをインストールします。
VSCodeのGo Liveでローカルサーバーにつなぎます。この処理は、サーバー上にファイルがある時に動きます。

Image from Gyazo

data.json

{ "menu": ["ホットコーヒー", "アイスコーヒー"] }
Code language: JSON / JSON with Comments (json)

fetch.html

<html>

<head> </head>
<script>
    // URL
    const url = "./data.json";

    // fetchの処理
    fetch(url)
        .then((response) => {
            // Responseの内容をコンソールに出力
            console.log("--- Response --- ");
            console.log(response.url);
            console.log(response.status);
            console.log(response.ok);
            console.log(response.statusText);

            // レスポンスからjsonを得る
            return response.json();
        })
        .then((result) => {
            // 成功時resultはJSONをパースしたオブジェクト
            const txt = JSON.stringify(result, null, " ");
            console.log("--- Success ---");
            console.log(txt);
        })
        .catch((error) => {
            // 失敗時
            console.error("--- Error ---");
            console.error(error);
        });
</script>

</html>
Code language: HTML, XML (xml)

XMLHttpRequestで通信

XMLHttpRequestはインターネット上のファイルを取得できます。

構文

変数= new XMLHttpRequest()
変数.addEventListener('load', function() {
	ファイル読み込み後の処理読み込み後の処理
});
変数.open('GET', URL);
変数.send(); 
Code language: JavaScript (javascript)

XMLHttpRequestオブジェクトのプロパティ

.status
HTTPステータスコード。200(成功)など。

.statusText
HTTPステータスコードに応じたメッセージ。OKなど。

.responseURL
レスポンスのURL。

.response
レスポンス。

.responseText
レスポンスの文字列。

例、XMLHttpRequestオブジェクトです。thisを使う方法と、インスタンスを使う方法で情報出力しています。得られる値は同じです。
VSCodeのGo Liveでローカルサーバーにつなぎます。この処理は、サーバー上にファイルがある時に動きます。

Image from Gyazo

data.json

{ "menu": ["ホットコーヒー", "アイスコーヒー"] }
Code language: JSON / JSON with Comments (json)

xml-http-request.html

<html>
<script>
    // URL
    const url = "./data.json";

    // XMLHttpRequestオブジェクトの作成
    var req = new XMLHttpRequest();

    // 読み込み後の処理を登録
    req.addEventListener("load", function() {
        console.log("--- this --");
        console.log(this.status);
        console.log(this.statusText);
        console.log(this.responseURL);
        console.log(this.response);
        console.log(this.responseText);
        console.log("--- req --");
        console.log(req.status);
        console.log(req.statusText);
        console.log(req.responseURL);
        console.log(req.response);
        console.log(req.responseText);
    });

    // 通信を開始
    req.open("GET", url);
    req.send();
</script>

</html>
Code language: HTML, XML (xml)

読んでいただいて、ありがとうございます。

JavaScript完全入門で勉強しています。

ＪａｖａＳｃｒｉｐｔ［完全］入門 独学に最適！初心者でも安心して学べる親切な解説 /ＳＢクリエイティブ/柳井政和
posted with カエレバ
楽天市場
Amazon

RELATED

JavaScriptによる非同期処理...

JavaScript

JavaScriptを使って、HTML5のCanvasでの図形の描画...

JavaScript

Vue3の基本的な仕組み

Vue.js

Vue3のレンダリングとJSX...

Vue.js

HOME >  JavaScript >  JavaScriptの通信処理