Reactとaxiosを使ってgithubのAPIからデータを取得してみる

今回はReactとaxiosを使ってgithubのAPIからデータを取得しようと思います。

まず、初めにプロジェクトフォルダを作ってください。

作成後、プロジェクトフォルダに移動して以下のコマンドを実行してください。

create-react-app プロジェクト名

create-react-appはreactの環境を簡単に作成することができる超便利ツールです。

その後、yarn start自動でブラウザが立ち上がります。

編集するファイルはApp.jsとApp.cssファイルだけになります。 今回はgithub APIのデータをaxiosを使って取得することに集中したいのでコンポーネント化などはしません。

まず、必要なパッケージをインストールします。

yarn install -D axios

App.jsの全体のコードになります。 順を追って説明していきたいと思います。

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import User from './App.css'

class App extends Component {
  constructor(){
    super();
    this.state = {
      userDatas:[]
    };
  }
  componentWillMount(){
    const request = axios.create({
      baseURL: 'https://api.github.com'
    })
    request.get('/users/ユーザー名')
      .then(res => {
        this.setState({
          userDatas: res.data
        });
      })
  }
  render() {
    return (
      <Fragment>
      <header className="header"></header>
      <div className="user">
        <p className="user_img"><img src={this.state.userDatas.avatar_url}/ ></p>
        <div className="user_name">{this.state.userDatas.name}</div>
        <div className="user_id">{this.state.userDatas.login}</div>
        <div className="user_followArea">
          <div className="user_followers">followers:{this.state.userDatas.followers}</div> 
          <div className="user_following">following:{this.state.userDatas.following}</div>
        </div>
      </div>
      </Fragment>
    );
  }
}

export default App;

まずは1行目から見てみましょう。

import React, { Component, Fragment } from 'react';
import axios from 'axios';

FragmentとはReact v16から追加された機能になります。 簡単に言うとrender関数の中で余計なDOMノードを追加することが不要になります。 そのことの記事を書いたのでよかったら参考にしてください。

top-men.hatenablog.com

constructor(){
    super();
    this.state = {
      userDatas:[]
    };
}

constructorの中身についてですが、まずはstateにuserDatasを登録します。

次のコードが今回のコードのキーポイントになります。 componentWillMountというのはReactのコンポーネントのライフサイクルになります。 文字通り、コンポーネントがマウントされる前になんらかの処理を施すことができます。

componentWillMount(){
    const request = axios.create({
      baseURL: 'https://api.github.com'
    })
    request.get('/users/ユーザー名')
      .then(res => {
        this.setState({
          userDatas: res.data
        });
      })
  }

baseURLでgithubのAPIにアクセスします。 request.getでgithubの自分のデータをjson形式で取得しています。 その後、データを取得した後にsetStateでuserDatesにデータを入れています。

render() {
    return (
      <Fragment>
      <header className="header"></header>
      <div className="user">
        <p className="user_img"><img src={this.state.userDatas.avatar_url}/ ></p>
        <div className="user_name">{this.state.userDatas.name}</div>
        <div className="user_id">{this.state.userDatas.login}</div>
        <div className="user_followArea">
          <div className="user_followers">followers:{this.state.userDatas.followers}</div> 
          <div className="user_following">following:{this.state.userDatas.following}</div>
        </div>
      </div>
      </Fragment>
    );
  }

ここではstateのデータを整形し表示しているだけになります。

ブラウザで見るとこのよう表示になります。(Cssは別途設定しています。)

とっても手軽で簡単ですね。是非試してみてください！今回は初めからjson形式データを取得できていましたが、サーバーから取得するデータの形式がjsonではないときなどあります。どのような形式でデータが渡ってきているかなど意識することは大切です。

簡単ではありますが、以上になります。