React Qiita APIでビュー数を取得して表示する

## やりたいこと
* Qiita APIで記事ビュー数を取得する。
* 取得したビュー数を表示する。

## 参考にしたサイト
[こちらのサイト【Reactでのaxiosの使い方【外部APIの取得方法】】](https://yoheiko.com/blog/react%E3%81%A7%E3%81%AEaxios%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%90%E5%A4%96%E9%83%A8api%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95%E3%80%91/)が参考になりました。

## 実践
### QiitaのAPIアクセストークンを作成
QiitaのAPIを利用するにはまずアクセストークンを作成する必要があります。
こちらの[ユーザー管理画面](https://qiita.com/settings/applications)から作成しておきましょう。
![スクリーンショット 2023-02-17 10.52.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484097/6475ea5f-c7ba-bdb2-845a-edec47512caa.png)


### 必要なライブラリのインストール
今回は`axios`を利用してAPIを呼び出すため、こちらをインストールします。
```
$ npm install axios
```

### axiosをインスタンス化
先ほどインストールしたaxiosをインスタンス化します。別ファイルでインスタンス化しておくことで保守性が高まりますし、コードもシンプルになります。`axios.js`を以下のように作成していきます。
*本来はアクセストークンをベタ書きすべきではありませんが、ここではAPIの実行を主としているためこのまま進めます。
```javascript:axios.js
import axios from "axios";

// Qiita用のaxiosをインスタンス化
const qiitaInstance = axios.create({
  baseURL: "https://qiita.com",
  headers: {
    Authorization: `Bearer XXXXXXXXXXX` // << Qiitaアクセストークン
  }
});

export default qiitaInstance;
```

### リクエスト先APIを記述する
今回はQiitaが用意いている[投稿API](https://qiita.com/api/v2/docs#%E6%8A%95%E7%A8%BF)を利用していきます。こちらの情報を別ファイルの`Requests.js`に記述します。ここでも別ファイルにAPI情報をまとめることで保守性が高まります。
```javascript:Request.js
// Qiita 投稿一覧取得
const requests = {
  getPostsInfo: `/api/v2/authenticated_user/items`,
};

export default requests;
```

### APIをコールして表示させる
さてここからがメインになります。といっても内容はシンプルです。
私の場合は`BlogPage`コンポーネントで記事のView数を使う予定のため、`BlogPage.js`の中で以下処理を記載していますが、用途に応じて記載するファイルは調整してください。

まずは先ほどまでに作成した`axios`インスタンスや`Request`をインポートする必要があります。加えて、処理の中でReact Hooksの`useState`や`useEffect`も利用するので、それらもインポートします。
```javascript:BlogPage.js
import React, { useState, useEffect } from "react";
import axios from "../axios";
import requests from "../Requests";
...
```

関数BlogPageの1行目では`useState`を使って、Qiita APIからの投稿データを格納するための変数 `postsInfo`を宣言します。APIは配列で返ってくるので空配列を初期値をしておきます。
`useEffect`関数にてaxiosを用いてAPIをコールしています。返却される`response.data`の中身を`postsInfo`に格納しています。
```javascript:BlogPage.js
...
function BlogPage() {
  const [postsInfo, setPostsInfo] = useState([]);
  let totalViewCount = 0;
  
  // Fetching Qiita Info
  useEffect(() => {
    async function fetchData() {
      const response = await axios.get(requests.getPostsInfo);
      setPostsInfo(response.data);
      return response;
    }
    
    fetchData();
  }, []);
...
```
今回は投稿済みの記事の合計View数だけを表示させたいため、以下のようにして合計数を取得します。
```javascript:BlogPage.js
...
function BlogPage() {
  const [postsInfo, setPostsInfo] = useState([]);
  let totalViewCount = 0;
  
  // Fetching Qiita Info
  useEffect(() => {
    async function fetchData() {
      const response = await axios.get(requests.getPostsInfo);
      setPostsInfo(response.data);
      return response;
    }
    
    fetchData();
  }, []);
  
  // Counting total view number
  if(postsInfo.length > 0){
    let count = 0;
    for(let i=0; i<postsInfo.length; i++){
      count += postsInfo[i].page_views_count;
    }
    totalViewCount = count;
  } 
...
```
あとはこのコンポーネントの`return`として上記で取得・計算した合計View数`totalViewCount`をJSXの中に埋めこんで返却してあげればOKです。同じ`BlogPage.js`の中に記載しています。
```BlogPage.js
...
return (
    <div className="container">
    ...
    ...
        <p>
            Qiita記事 Total View数: 
            { postsInfo.length > 0 ? totalViewCount : "Counting..."}
        </p>
    </div>
...
```
画面に表示されました！
![スクリーンショット 2023-02-17 11.19.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484097/1bacfc2d-94cc-aa88-141f-6745564c6a1b.png)

## まとめ
今回はReactベースのアプリケーションにおいて外部APIと接続したい場合の記述方法をQiita APIを例にとって記載してみました。Reactの関数やHooksについては[こちらの記事【React入門 関数コンポーネントとは】](https://yoheiko.com/blog/react-js%e5%85%a5%e9%96%80-%e9%96%a2%e6%95%b0%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%a8%e3%81%af/)がわかりやすかったので、その部分についても復習されたい方は参考にしてみてください。
また、ベタ書してしまっているトークンなどを環境変数として読み込みたい場合の方法は[こちらの記事【Reactで環境変数を読み込む】](https://ralacode.com/blog/post/use-env-variables-in-react/)が参考になりました。

以上。