今回は、テーマ通り、Reactを使って、apiからJsonを取得→表示を実施。
都度都度reactで使う基本をまとめてみました。参考までに。。
今回使うapiは無料でEuroベースの為替情報を取得できるこちらを使用。
https://api.exchangeratesapi.io/latest
今回はこのapiのjsonデータをブラウザに表示するところまでを紹介します。
DEMOはこちら
##実装手順
①index.htmlにid="root"を用意
②index.jsを用意。(下処理)
③ ②の中に処理を記述。(api→json取得 + 表示)
という流れで行きます。
##index.htmlにid="root"を用意
デフォルトでindex.htmlにあると思います。今回はindex.jsに記述しますが、試し書きならApp.jsでもok。
##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取得 + 表示)
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;のように変数宣言しておきましょう。
・最後に
{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の連携でも紹介してみようかなと思います。
読んでくれてありがとうございました。