# バックエンドからデータを取得 先ほどの`useEffect`を利用して、バックエンドからデータを取得する方法を説明します。今回バックエンドは学習用に用意された以下のサイトを利用します。 {% embed url="" %} バックエンドのAPIからデータを取得するために、`axios`というライブラリをインストールします。 ```bash npm install axios ``` `axios`をインストールしたら、JsonPlaceholderの [https://jsonplaceholder.typicode.com/post](https://jsonplaceholder.typicode.com/posts) というURLを叩いて投稿一覧を取得しましょう。`useEffect`内にて、`axios.get(url)`とすることで、データを取得することができます。`axios.get(url)`にて返却する型ですが、`Promise型`という型で、**非同期処理**の操作が完了したときに結果を返却するものです。 まず**非同期処理**の説明の前に**同期処理**の説明をします。**同期処理**とは、上から順に処理が行われることで、以下コードがあった場合1,2,3と順番にコンソールに出力されるかと思います。 ```javascript console.log(1) console.log(2) console.log(3) ``` 一方で**非同期処理**はその処理が完了するのを待たずに次の処理が実行されます。その時点で非同期処理をコンソールに出力しようとすると、`pending`というPromise型のオブジェクトが返却されます。 ``` console.log(1) console.log(2) 非同期処理 console.log(3) ``` その`Promise`型の処理結果を受け取るためには、`.then`と繋げることで処理結果を受け取ることができます。ですので、`axios.get(url).then((res) => ...)`と記述することで、バックエンドからデータを取得することができます。まずは取得した結果をコンソールに出力してみましょう。 
import axios from "axios";
...
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
      console.log(res);
    });
  }, [userId]);
...
以下のようなオブジェクトが出力されるかと思います。投稿一覧は`data`プロパティに格納されています。
こちらのデータを`postList`というstateを作り、取得した投稿一覧を格納しましょう。 そして、`Post`型を作り、`postList`の型を`Post`型の配列にしましょう。 また、`res.data`の型を`axios.get(...)`と宣言することができます。 
...

type Post = {
  id: number;
  userId: number;
  title: string;
  body: string;
};

export const PostList = () => {
  const [postList, setPostList] = useState<Post[]>([]);
  const [userId, setUserId] = useState(1);

  useEffect(() => {
    axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts").then((res) => {
      setPostList(res.data as Post[]);
    });
  }, [userId]);
...
格納した投稿一覧をUserListを作成したときのようにtableタグにて表示するようにしましょう。 
...
  return (
    <div>
      <h2>PostsList</h2>
      <div>
        <p>userID: {userId}</p>
        <input
          type="number"
          value={userId}
          onChange={(e) => setUserId(Number(e.target.value))}
        />
      </div>
      <table className="table">
        <thead>
          <tr>
            <th scope="col">id</th>
            <th scope="col">ユーザーid</th>
            <th scope="col">タイトル</th>
            <th scope="col">内容</th>
          </tr>
        </thead>
        <tbody>
          {postList.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.userId}</td>
              <td>{post.title}</td>
              <td>{post.body}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
...
これで投稿一覧が表示されました。
次に投稿一覧から、特定のユーザーIDのもののみを表示するようにしましょう。先ほど、useEffectにて`userId`を監視するようにしましたが、バックエンドのAPIを叩く際に`userId`などのパラメータを渡して、バックエンド側でフィルターをかけるような実装が多々あります。そういった場合は、`userId`を監視するようにするのですが、今回はフロントエンド側でフィルターをかけるようにしますので、`useEffect`の監視する値を空としましょう。 
...
  useEffect(() => {
    axios.get<Post[]>("https://jsonplaceholder.typicode.com/posts").then((res) => {
      setPostList(res.data as Post[]);
    });
  }, []);
...
そして、`postList`の`map`する前に`userId`にて`filter`しましょう 
...
          {postList
            .filter((post) => post.userId === userId)
            .map((post) => (
              <tr key={post.id}>
                <td>{post.id}</td>
                <td>{post.userId}</td>
                <td>{post.title}</td>
                <td>{post.body}</td>
              </tr>
            ))}
...
上記にて、userIdを変更することで投稿内容を特定のユーザーのみにフィルターすることができます。