Reactとの連携　その５ Ajax利用の基本


Reactのスクリプトを作る。

```javascript：app>javascript>packs>dummy_data.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

var target_dom = null; #①

document.addEventListener('DOMContentLoaded', () => {#②
   target_dom = document.querySelector('#data');#③
   const url = new URL(location.href);   #③
   let f = url.searchParams.get("name"); #④
   if (f == null){ f = ''; }
   getData(f);
});

function getData(f){
  let url = "http://localhost:3000/data/ajax";
  if (f != ''){
    url += '?name=' + f;
  }
fetch(url)
  .then(
    res => res.json(),
      (error) => {
        const el = (
          <p>ERROR!!</p>
        );
        ReactDOM.render(el, target_dom);
    }
  )
  .then(
    (result) => {
      let arr =[];
      for(let n in result){　#⑤
        let val = result[n];
        arr.push(<li class="list-group-item">
          {val.id}:{val.name} ({val.mail})</li>);
      }
      const el = (
        <ul class="list-group">{arr}</ul>
      );
      ReactDOM.render(el, target_dom);
    },
    (error) => {
      const el = (
        <p>ERROR!!</p>
      );
      ReactDOM.render(el, target_dom);
    }
  );
}
```
受け取ったデータをjavascriptのデータとして取り出す。

①

|変数を宣言するvar|
|--|
|var 変数名 = 値|

②発火ポイントを決定：addEventListener
③指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Element を返す：querySelector

locationとは
-

locationとは、現在表示されているウェブページのURLを抽出したり、別のページへ遷移する場合などに便利なオブジェクト

URlを操作
-
**const url = new URL(location) で初期化**
**url.searchParams.set("hoge", "fuga") などで設定。URLに含まれるGETクエリ引数にアクセス** 

|プロパティ名|内容|
|--|--|
|location.href|指定したURLに画面遷移する|
|location.protocol|現在のプロトコル情報(http:など)を取得する|
|location.host|プロトコル情報を除外したURLを取得する(port情報あり)|
|location.hostname|プロトコル情報を除外したURLを取得する(port情報なし)|
|location.port|ポート番号を取得・設定する|
|location.pathname|URLでパスの部分を取得・設定する|
|location.search|URL内のクエリ情報を抽出して取得する|
|location.hash|URL内のハッシュ情報を抽出して取得する|
|location.origin|プロトコルやポートを含めたURLを取得する|


JavaScript で URL のクエリパラメータを操作する方法
-

|append(　)|指定されたキーと値のペアを新しい検索パラメーターとして追加します。|
|--|--|
|delete(　)|指定された検索パラメーターとその値を、検索パラメーターのリストから削除します。|
|entries(　)|このオブジェクトに含まれる全てのキーと値のペアを列挙するための iterator を返します。|
|get(　)|指定された検索パラメーターに対応する最初の値を返します。|
|getAll(　)|指定された検索パラメーターに対応する全ての値を返します。|
|has(　)|指定された検索パラメーターが存在するかを表す Boolean 値を返します。|
|keys(　)|このオブジェクトに含まれる全てのキーと値のペアのキーを列挙する iterator を返します。|
|set(　)|指定された検索パラメーターに対応する値を設定します。複数の値が存在していた場合、それらは削除されます。|
|sort(　)|全てのキーと値のペアを、キーを基準にソートします。|
|toString(　)|URL で使用するのに適したクエリー文字列を返します。|
|values(　)|このオブジェクトに含まれる全てのキーと値のペアの値を列挙する iterator を返します。|

const
-
constとは、一般的なJavaScriptの定義の宣言。varと違い、値の上書き・同一名での宣言を禁止。

```javascript:<例>
const el = document.querySelector('p');
console.log(el));  // → <p>Hellow World!!</p>
```
<例>メソッドが実行されると、定数 el に p エレメントが代入されます

```javascript
const 定数 = メソッド();
↓
const 定数 = 戻り値;
```

メソッド（や関数）が戻り値に置き換わることを「戻り値が返ってくる」といいます。
メソッドの立場からすると「戻り値を返す」わけです。そのため、“返り値” という表現をする人もいます。

getData()
-

計算後のデータを返します。 


基本的なfatchメソッドの書き方
-

JSONファイルを取得するまでは下記のような流れが基本。functionを使った場合とアロー関数を使った場合の２通りがあります。

```javascript
 //通常のバージョン
 fetch('URL', {
   method: 'GET'
 }).then(function (response) {
   return response.json();
 }).then(function (myjson) {
   consol.log(myjson);
 }).catch(function (error) {
   console.log(error);
 });
```

```javascript
 //アロー関数の場合    
 fetch("URL", {
   method: 'GET'
 }).then((response) => {
   return response.json();
 }).then((myjson) => {
   console.log(myjson);
 }).catch((err) => {
   console.error(err);
 });
```

　fetchメソッドを呼び出して、第１引数にURL、第2引数に実はオプションが付けられます。「method」プロパティに「GET」としていますが、他にも「POST」があります。ただ「GET」はデフォルトの状態なので、省略することができます。

　fetchメソッドは非同期処理が可能で戻り値をPromiseオブジェクトとして返します。＊詳しくは「javascript promise」などと検索すれば出てきます。

　jsonメソッドでJSON形式にして返す
-

 fecthメソッドは Promiseの為、Promiseオブジェクトにあるthenメソッドで繋げて処理ができます。

fetchメソッド実行した後はその結果をResponse オブジェクトとして受け取れます。その為thenメソッドでResponseオブジェクトを受け取っています。変数は「response」としていますが、「res」とかでも大丈夫です。

 Responseオブジェクトにはデータを読み取る関数としてjsonメソッドがあります。jsonメソッドを使用することでResponseオブジェクトとして受け取ったデータをJSON形式として返す事ができます。
 JSONファイルをJavascriptJavascriptで扱う場合はparseメソッドでパースするのですが、どうやらResponseオブジェクトのjsonメソッドでは内部的にパースされてるようです。今回はJSONファイルだったのでjsonメソッドを使用しましたが、テキストを読み込みたい場合はtextメソッドもあります。


for - in文
-

一般的な構文としては次のようになります。

```javascript
for( var 変数 in オブジェクト ) {
    //ここに繰り返し処理を書く
}
```

変数宣言 let / const / var
-

**(1)再宣言**
var、let、constの中で再宣言が可能なのはvarのみです。

```javascript
//一度宣言した後に、、、
var techacademy = '宣言1回目';
//再度同じ変数名で宣言しなおせる
var techacademy = '宣言2回目'
let、constで同じことをしようとするとエラーが出るため、再宣言を予防することができます。
```


**(2)スコープの違い**
スコープとは、簡単にいうと「変数の有効範囲」です。宣言した変数はコード内のどこでも使えるわけではなく、このスコープによって使える範囲が定められています。

**varは関数スコープ**
varはlet、constに比べて広いスコープを持っています。
名前の通り、ある関数内でvarを用いて宣言した変数は、その関数をどこからでも呼び出すことが可能です。

**let, constはブロックスコープ**
ブロックとは、{　}で括られた処理のことです。
let、constを使うと、同じ関数内であってもブロックの外側からは変数を呼び出せません。

（#⑤）val = result[n]で配列の要素を取り出して、先ほどのダミーデータをval.id val.name val.mailで取り出している。