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と違い、値の上書き・同一名での宣言を禁止。

const el = document.querySelector('p');
console.log(el));  // → <p>Hellow World!!</p>

<例>メソッドが実行されると、定数 el に p エレメントが代入されます

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

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

getData()

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

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

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

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

 //アロー関数の場合    
 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文

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

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

変数宣言 let / const / var

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

//一度宣言した後に、、、
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で取り出している。