見出し画像

Web開発勉強日記 🧸その5🧸

ふぉい

とりあえず午前中に学んだことをアウトプット！！

恒例の余談ですが・・・
GPTsにてポートフォリオ作成をサポートしてくれる先輩を召喚しました！
名前は「パイセン」、性格は社内にいる優しい先輩風で自己肯定感を上げてくれる・・・と他にも細かく性格を設定してみました。
早速、ポートフォリオのアプリを作るにあたってのサポートをしてくれているので、ありがたい🥹
AIなのでお礼の品とかをプレゼントできなくて残念…🙏

本日の学び✍️

午前中はJSONPlaceholderを扱ってみました！

JSONPlaceholderとは

JSONPlaceholderとは、APIでデータの取得が出来るか？を手軽にテスト出来るREST APIのことです。
REST APIという言葉をよく耳にしていましたが、意味をあまり理解していなかったので調べてみました。詳細を記述する語彙力がないので説明は割愛いたしますが、、以下の記事がめちゃめちゃ分かりやすかったので、参考にしてみてください！

ざっくり自分の認識では・・・

JSON形式で簡単に外部サービスのデータを取得できる窓口！！

だと思ってます！（違ってらすみません。。。）

話は戻りますが、JSONPlaceholderが用意してくれるのは、あくまでダミーデータのため自分のアプリ内で手軽に気軽にAPIのテストを行うことができます。

JSONPlaceholderの使用方法

axiosのインストール

プロジェクトにaxiosをインストールします。
ｱｸｼｵｽ と読むそうです👨‍💻（むず。。。）

ちなみにaxiosはNode.jsで書かれた非同期通信でデータを取得するためのモジュールです。

自分のプロジェクトに移動しコマンドラインにてaxiosのインストールを行います。

$ npm install axios --save


続けて、Reactの場合はaxiosのインポートを行います。

import axios from "axios";

下記よりコードの説明をしていきますが、一旦コードの全量を書いておきます！

import axios from "axios";
import "./styles.css";

export default function App() {
  const onClickUsers = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onClickUser1 = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users/3")
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return (
    <div className="App">
      <button onClick={onClickUsers}>users</button>
      <button onClick={onClickUser1}>id=1のuser</button>
    </div>
  );
}

全ユーザー情報データの取得

実際にデータを取得してみます！
適当にボタンを用意しておきます。
1つ目のボタンは、JSONPlaceholderに定義されている全てのユーザ情報を取得します。2つ目のボタンは、id=1のユーザのみ取得するボタンです。
それぞれにonClick属性を指定しているので、関数の中身を書いていきます！

import axios from "axios";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <button onClick={onClickUsers}>users</button>
      <button onClick={onClickUser1}>id=1のuser</button>
    </div>
  );
}

では最初に1つ目のボタン（全ユーザを取得）の関数を書いていきます。

const onClickUsers = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

💡ポイント1
axios.get('')で取得したいJSONデータのURLを指定します。

💡ポイント2
続けて.then()をアロー関数で記述します。
引数にはHTTP情報が格納されているため、任意の変数を記述します。（今回は'res'としてます。）
エラーハンドリングとしえcatch()も指定しておきます。

💡ポイント3
実際にconsole.logで見てみたいのですが、まずは console.log(res);でHTTP情報の全てを取得してみてください。取得してみると色々な情報が入っているのですが、その中のdata配列に取得したいユーザ情報が格納されていることがわかるはずです・・・！では、続けて以下のコンソールを実行してみてください。

console.log(res.data);

こちらを実行することで、対象のユーザ情報のみが取得できたと思います！

ユーザーID=1のユーザー情報のみ取得

では続けて特定のユーザーの情報のみ取得する方法です。
上記のやり方とほとんど変わりません！

const onClickUser1 = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/users/3")
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

💡ポイント1
コードを書き換えた部分は関数名とgetの中身のみです。
getの中身はuserのkey（今回はid）を指定することで、取得が可能です。
上記は/3のようにしていますが、クエリストリング（…/users?id=3）での取得も可能です。

まとめ🙆‍♂️

今回はJSONPlaceholderを使用して、非同期通信の基礎of基礎をかじりました！まだGETメソッドでデータ取得しかしてないのでPOSTやDELETEなどのメソッドも学んでいきます！
非同期通信であれやこれや取得できたらアプリの幅が広がりそうで面白そうです😊

では( ＾∀＾)

この記事が気に入ったらサポートをしてみませんか？