【React】apiから jsonデータを取得してブラウザに表示する方法

今回は、テーマ通り、Reactを使って、apiからJsonを取得→表示を実施。
都度都度reactで使う基本をまとめてみました。参考までに。。


今回使うapiは無料でEuroベースの為替情報を取得できるこちらを使用。
https://api.exchangeratesapi.io/latest

今回はこのapiのjsonデータをブラウザに表示するところまでを紹介します。

[DEMO](https://stackblitz.com/edit/react-fgqecz)はこちら

##実装手順
①index.htmlにid="root"を用意
②index.jsを用意。(下処理)
③　②の中に処理を記述。(api→json取得 + 表示)
という流れで行きます。


##index.htmlにid="root"を用意
デフォルトでindex.htmlにあると思います。今回はindex.jsに記述しますが、試し書きならApp.jsでもok。

##index.jsを用意
大枠はこちら。

```javascript:index.js
import React, { Component } from 'react';
import { render } from 'react-dom';


class Exchange extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //stateを書く場所
    };
  }
  componentDidMount() {
    fetch("")//apiをここに記述
      //jsonをひっぱりだすところ
  }

  render() {
    var {  } = this.state; //state内容を変数へ
    //処理を書く場所
  }
}

export default Exchange;

render(<Exchange />, document.getElementById('root')); //id="root"に反映

```

[補足説明]
・Exchangeクラスコンポーネントに最初```constructor(props)```なるものがあります。これはstateを初期化する唯一の場所でsuper(props)で親クラスのコンストラクタを参照(ここではextendsされたComponent)するためのものです。propsとは 親コンポーネントから渡されたプロパティで、一般的に、親コンポーネントから子コンポーネントに渡される値として使われます。stateはそのコンポーネント自体によって保持されるものなので、親から子へみたいな事はできません。
こちらにめちゃんこわかりやすくpropsとstateを紹介している記事があるので参考までに。
https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504

・componentDidMount()はRender直後に行いたい処理を書く時などに使います。
こちらも詳しい説明や類例が下記Urlに紹介されているので参考までに。
https://qiita.com/sekikawa_a/items/8ab70f457ef73871419f


##②の中に処理を記述。(api→json取得 + 表示)

```javascript:index.js
import React, { Component } from 'react';
import { render } from 'react-dom';

class Exchange extends Component {
  constructor(props) {
    super(props);
    this.state = { //state初期化
      isLoaded: false,
      items: []
    };
  }
  componentDidMount() { //render直後に行いたい処理を書くところ
    fetch("https://api.exchangeratesapi.io/latest") //api
      .then(res => res.json()) 
      .then(json => {
        console.log(json.rates);
        this.setState({
          isLoaded: true,
          items: json.rates
        });
      });
  }

  render() {
    var { items, isLoaded } = this.state;
console.log(items);
    if (!isLoaded) {
      return <div>...Loading</div>;
    } else {
      return (
        <div>
          <ul>
            {Object.keys(items).map(key => (
              <li key={key}>{key} - {items[key]}</li>
            ))}
          </ul>
        </div>
      );
    }
  }
}

export default Exchange;

render(<Exchange />, document.getElementById('root'));

```
[補足説明]
・まず最初にReactサイクルに基づいて、初期ステートをconstructorにセットしておきます。itemsというステートは配列宣言してあげましょう。そのあと、componentDidMount()でリクエストやレスポンスといった HTTP のパイプラインを構成する要素を操作できるfetchを使います。res オブジェクトから JSON を抽出するには、 json() メソッドを使用する必要があるので、json欲しかったらちゃんと書きましょう。

・あとはconsole.logでjsonが取得されているのを確認して、steta更新をするthis.setState({})のitemsにjson.ratesと書いてあげましょう。ちなみにisLoadをstateに記述する理由は、render()時のif処理で取得できているか否かを示すためです。なので、setState({})をrenderに反映するために、いったん```var { items, isLoaded } = this.state;```のように変数宣言しておきましょう。

・最後に

```javascript

{Object.keys(items).map(key => (
              <li key={key}>{key} - {items[key]}</li>
            ))}
```
と書いていますが、
これはObject.key()メソッドで引数にitemsを入れる事でプロパティを取得しています。次にmap()を用いて、配列として返し、keyにはapiの国コードが、items[key]には為替レートが出るように記述しています。
Object.key()やmap()について知りたい方はこちらを参考にしてみてください。
https://www.sejuku.net/blog/64361

以上、雑ですがapiからjsonを取得→データ表示できます。

##まとめ

今回は簡単なjsonデータの取得から表示まで紹介しました。
次回はfirebaseとreactの連携でも紹介してみようかなと思います。

読んでくれてありがとうございました。