Reactを基本からまとめてみた【2】【axiosを用いたHTTP通信の実装】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Reactの学習した事を言語化し、認識の深化による備忘録として記載。

##HTTP通信とは
HTTPという規則に従って行われる通信のこと。

##HTTPとは
HTTPは、「Hyper Text Transfer Protocol」の略。WebサーバーとWebクライアントの間でデータの送受信を行うためのプロトコル（通信規約）。

##axiosとは
公式：ブラウザやnode.js上で動くPromiseベースのHTTPクライアント。
axiosを使う事で、容易に非同期的なHTTP通信を実装できる。

##1. 作成するアプリ
『Post』『Albums』という２つのボタンを作成し、それぞれのボタンを押したら、
それぞれ異なる文字列が表示される。googleデベロッパーツールで、Networkを開く。『Post』『Albums』という２つのボタンを押すと外部のデータを取得するのをPreviewで確認できる。

##2.　{JSON} Placeholderを使用する
####{JSON} Placeholderとは
テストやプロトタイピングのための無料のフェイクAPI。
{JSON} Placeholderは、Resourcesを用意してくれているので、フロントエンドだけを実装すれば、サーバーサイドのデータを取得して、フロントエンドの画面に表示する事ができる。

作成するアプリでは、下記のURLを使用する。
『Post』= https://jsonplaceholder.typicode.com/posts
『Albums』=https://jsonplaceholder.typicode.com/albums

##3. 新規プロジェクトを作成する
terminalで新規プロジェクトを作成する。

```
① npx create-react-app 新規プロジェクト名
② cd 新規プロジェクト名
③ npm start
```

##4. 初期設定
####① デフォルトのファイルを全削除
srcフォルダのindex.jsと App.js以外を削除する。
####② semantic-uiの導入
(1) semantic-ui cdnを検索する。
(2)https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css をコピーする。
(3)　public.index.htmlファイルに、下記のソースを貼り付ける。

```public.index.html
<link rel="style" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css/>
```
####③ index.jsの作成

```src.index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.querySelector('#root'));

```

####④ App.jsの作成

```src.App.js
import React from 'react';
const App = () => {
 retrun (
   <div>
    <p>App</p>
   </div>
);
};
export default App;

```

##5. axiosの追加
terminalでaxiosを追加する。

```
yarn add axios
```

##6. baseURLの作成
srcフォルダにapiフォルダを作成し、jsonplaceholder.jsファイルを作成する。

```api.jsonplaceholder.js
import axios from 'axios';
export default axios.create({
 baseURL: 'https://jsonplaceholder.typicode.com';
});
```
##7. Buttonコンポーネントの作成
srcフォルダにcomponentsフォルダを作成し、Button.jsファイルを作成する。

```components.Button.js
import React from 'react';
const Button = ({ onClick, color, text }) => {
 retrun (
    <button onclick={onclick} className={`ui ${color} button`>
      {text}
    </button>
  );
};

export default Button;
```

##8. Resourcesコンポーネントの作成
componentsフォルダに、 Resrouces.jsファイルを作成する。
※何故、map関数を使用するか　=> jsonplaceholder.comのpostsとalbumsから
100個の配列のデータをそれぞれ取得している。100個のデータを表示する際に、100行の
コードを書くのは非効率なので、map関数を使用するとそれぞれ配列の中身の個数分、
処理を行ってくれる。配列で多大なデータを取得した際は、map関数を使用し、展開するのが一般的である。

```components.Resources.js
import React from 'react';
const Resources = ({ resources }) => {
 retrun (
    <React.Frangment>
      {resources.map((resrouce)=> {
        <p key={resouces.id}>{resouces.title}</p>
      ))}
    </React.Frangment>
  );
};
export default Resources;
```

```src.App.js
import React, { useState } from 'react';

import jsonplaceholder from './apis/jsonplaceholder;
import Button from './components/Button;
import Resources from './components/Resources;

const App = () => {
 const [resouces, setResources] = useState([]);

 const getPosts = async() => {
   try {
     const posts = await jsonplaceholder.get('./posts');
     setResources(posts.data);
   } catch (err) {
     console.log(err);
   }
 };

const getAlbums = async() => {
   try {
     const albums = await jsonplaceholder.get('./posts');
     setResources(albums.data);
   } catch (err) {
     console.log(err);
   }
 };
 retrun (
   <div className='ui container' style={{margeinTop: '30px' }}>
    <Button onClick={getPosts} color='primary' text='posts' />
     <Button onClick={getAlbums} color='red' text='albums' />
     <Resouces resouces={resouces} />
   </div>
 );
};
export default App;
```
 


##参考サイト
[【React入門】#7 axiosを用いたHTTP通信の実装]
(https://www.youtube.com/watch?v=tPK0nDpnu98)