【learning】React_jsx記法_1st

jsx記法を使ってランダムに画像を切替える処理

※学習中のアウトプットを目的として記事投稿をしております。
　参考にはならないかもしれませんが、役に立ったと思っていただける方がいらっしゃいましたら幸いです。

また今回が初投稿となりますのでお見苦しいかとは思いますが見やすく投稿できるよう精進していければと思っております。

【下準備】

VS Codeのインストール
VS Codeの拡張機能『 ES7+ React/Redux/React-Native snippets 』をインストール
※Reactの環境構築がまだの場合は、『React 環境構築』や『React ローカルサーバー立ち上げ』等で検索してみてください。

---

それでは本題です！

見出しにある通りではありますが
本記事では" jsx記法 "を使って画像を切替えるコードを実装していきますがイメージをもってもらう為に先に完成形を共有します。

⬇ ⬇ 完成イメージはこちらです ⬇ ⬇

これからこちらを実装する手順を踏んでいきます。

---

基礎コンポーネントの記述

jsxファイル（今回はAppとして）を作成。


次に" rafce "と記述し予測が出てきたらEnter。


すると以下のように基礎コンポーネントが自動で補完されます。

他にも" rafcp "や" rafc "といった形で用途に合わせてご選択ください。
※他の方も記事にされていますので今回は省かせていただきます。


さて話を戻しますが


画像を切り替えていくのに必要なボタンを設置する為のコードを記述します。


－該当コード－

import React, { useState } from 'react';

const App = () => {

  return (
    <div>
        <button>Change</button>
    </div>
  )
}

export default App

記述が終わったらファイルの保存（Command or Ctrl + S）をしてください。
ボタンの設置が完了しました。

状態（state）を更新（setState）し状態管理（useState）する

buttonを設置する事で内部的にはボタンを押されたという処理は走るのですが、当然これだけではデータを変更する事はできません。


画面上に表示するデータや入力値などが変わったデータの状態情報を保持する" state "を使います。

またこのデータを切り替える等の制御（コントロール）をする" setState "を使います。

更にこれらのすべてを管理する為、useStateを使います。
忘れてはいけないのが" useState "は、" import（インポート）処理 "が必要です。


この背景にあるのが useState を含む Hook（フック） と呼ばれるものなのですが、元々のReactの機能にはこの state という変数は存在しておらず後から追加された機能である為です。
Hookについては公式ドキュメントでも丁寧に説明されている為、こちらをご確認ください。
公式ドキュメント：https://ja.legacy.reactjs.org/docs/hooks-overview.html


基本的には" state ", " setState " , "useState"はセットと覚えておく。


useStateの（）内にそのデータを差し込んでおく事で初期値が設定されます。

import React, { useState } from 'react'; // useStateをimport

const App = () => {
const [dogUrl, setDogUrl] = useState("https://images.dog.ceo/breeds/spaniel-brittany/n02101388_6057.jpg");

※useStateの初期値設定は一度のみと決まっており、再レンダリングされても元には戻りませんが、画面リロードを行うと初期値に戻されます。

リロードと再レンダリングは異なります。


※しかしながらこちらの内容については本題と逸れる為、省略します。

切り替える情報（画像）の設定

先にコードを記述します。

const rondomDogAPI = () => {
  fetch("https://dog.ceo/api/breeds/image/random", {
    method: "GET",
    mode: "cors"
  })

今回はランダムに犬の画像を提供してくれるDogAPIを叩くと、JSON形式で返してきます。 それをWeb上で表示すると犬の画像が表示される仕組み。
このAPIを叩く時に使う関数が" fetch "関数です。
このfetchはHTTP通信によりデータの受け渡しをしてくれる関数となっております。
HTTP通信とは：（Hypertext Transfer Protocol）の略。WebブラウザとWebサーバー間でテキストや画像などの情報をやり取りするための通信規格となります。

受け渡してくれたらそれで終わりでしょ？

そう思われた方もいらっしゃるかと思いますが「違います」。 この送受が完了したらデータを解析（確認）する作業が入ります。

APIで受け取ったデータはAPIという箱に入っているようなイメージです。 画面に表示させる為には中身を確認して取り出す処理が必要になります。
⬇⬇ それがこちら ⬇ ⬇

.then(response => response.json()) // まずJSON形式でレスポンスを解析
.then(data => {
   setDogUrl(data.message); // JSONの中の画像URLを state にセット
})
.catch((error) => {
   console.log("失敗", error); // エラーが発生した場合の処理
  });
};

いよいよ取得したデータを表示させる為の記述をしていきます。

return (
  <div>
    <header>
      <h1>Dogアプリ</h1>
    </header>
    <p>犬の画像を表示するサイトです</p>
    <hr />
    <img src={dogUrl} alt=" 犬の画像 " /> {/* 現在の dogUrl を表示 */}
    <button onClick={rondomDogAPI}>Change</button> {/* ボタンをクリックしたら rondomDogAPI を実行 */}
  </div>
);

ここまでのところでファイルを保存して" npm start "とターミナルで打ち込むと実際のローカルサーバーが立ち上がりますのでご確認ください。 ※エラーが発生した場合はエラー内容を確認し、閉じ括弧や記述内容のどこかに抜け漏れがないか等をご確認ください。

ここまで閲覧いただきありがとうございました🙇
まだまだ学習中の身で至らない点も多いですが頑張っていきたいと思いますので応援していただけましたら幸いです🙇

全コード

import React, { useState } from 'react'

const App = () => {
const [dogUrl, setDogUrl] = useState("https://images.dog.ceo/breeds/spaniel-brittany/n02101388_6057.jpg");
const rondomDogAPI = () => {
  fetch("https://dog.ceo/api/breeds/image/random", {
    method: "GET",
    mode: "cors"
  })
  .then(response => response.json()) // まずJSON形式でレスポンスを解析
    .then(data => {
      setDogUrl(data.message); // JSONの中の画像URLを state にセット
    })
    .catch((error) => {
      console.log("失敗", error); // エラーが発生した場合の処理
    });
  };
  return (
    <div>
      <header>
        <h1>Dogアプリ</h1>
      </header>
      <p>犬の画像を表示するサイトです</p>
      <hr />
      <img src={dogUrl} alt="犬の画像" /> {/* 現在の dogUrl を表示 */}
      <button onClick={rondomDogAPI}>Change</button> {/* ボタンをクリックしたら rondomDogAPI を実行 */}
    </div>
  );
};

export default App;