【GASを使ったHTTP通信】JavaScriptでHTTP通信

2022年3月29日 15:57

1.JavaScriptとは
プログラミング言語の一つで、プロトタイプベースのオブジェクト指向言語であるが、クラスベースに見られる機能も取り込んでいるweb開発向けの言語である。
よくJavaと間違えられるが、別の言語である。

2.Chromeで簡易的なプログラム
まずはメモ帳を開いて以下のように入力します。test.htmlとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script>
console.log('Hello,world')
</script>
</body>
</html>

これを入力出来たら、保存してchromeにドラッグ&ドロップします。
真っ白なページが表示されますが、F12を押してデベロッパーツールを開くとコンソールに、
Hello,worldと表示されます。
コンソールにconsole.log('Hello,world')と書くだけでも同じことは出来ますが、
今回HTTP通信する上でwebAPIを使うため、コンソール上だけだと出来ません。
そのため簡易的なページを作成して実行させます。

3.JavaScriptでHTTP通信
JavaScriptでHTTP通信する方法として、今回はXMLHttpRequest(XHR)を紹介します。
前回の#05GASでHTTP通信で作ったプロジェクトを使います。作ってない方は読むだけでも問題ないです。

・GETメソッド
先ほどのtest.htmlを以下のように書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script>
const URL = ’前回作ったURLをここに’;
const xhr = new XMLHttpRequest();
xhr.addEventListener('load',()=>{
console.log(xhr.responseText);
});
xhr.open('GET',URL);
xhr.send();
</script>
</body>
</html>

保存してまたchromeに投げてみて下さい。
コンソールを確認するとHello,worldが表示されます。
これでjavascriptでHTTP通信が出来ました。

・XMLHttpRequestについて
XHRはJSがHTTP通信する際の唯一の方法として使われていました。
しかし、数年前にfetchAPIが出てきて現在ではFetchが多く使われると聞きます。
私が使った事があるのがXHRしか無い為、今回はXHRで通信してます。
気になる方がいたらFetchAPIの勉強をすることをオススメしておきます。

4.まとめ
今回の通信ではHello,worldだけ送りましたが、これも立派なHTTP通信です。
送信するデータをJsonファイルに変えるなどすることで、様々な使い方が生まれます。
皆さんも色々な使い方に挑戦してみてください。

参考URL
・https://ja.wikipedia.org/wiki/JavaScript
・https://qiita.com/sirone/items/412b2a171dccb11e1bb6
・https://qiita.com/uhyo/items/91649e260165b35fecd7