ReactとWebAPIを取得して画面表示してみよう！！

こんにちは~~~~☆:.｡. o(≧▽≦)o .｡.:☆

株式会社iimonでエンジニアをしている「マウンテンぴー」です！！！！

本記事は株式会社iimonアドベントカレンダー19日目です！

今回は「React」＋「WebAPI」に関して調べてみました！！

いちばんの目的は画像検索アプリの実装までできればと思います。

どうぞ最後までよろしくお願い致します。

Reactについて

ReactはWebサイトやWebアプリのUI部分を開発する際に活用するユーザインターフェース構築のための JavaScript ライブラリです！！

VueやAngularなどのWEBフロント用ライブラリに並ぶ人気のライブラリです m(・・)m

Reactの3つの特徴について

1. 宣言的な View

ReactではJSX 記法を使ってコーディングしていきます！ JSXとは"JavaScript XML"の略で，Reactを実装するためのJavaScriptの拡張構文です。

2. コンポーネントベース

React では、Web ページ上の構成要素を、小さい部品（コンポーネント ）の集まりとして画面を構築していくのが特徴になります。

3.「一度学習すれば、どこでも使える」

これは React が掲げるコンセプトでもありますが、React のスキルを一度習得してしまえば、他の分野の開発にも応用できるということです。

下記サイトも参照してみてください　m( )m

公式サイトです！！

Web Apiについて

WebAPIとは、コンピュータプログラムの提供する機能を外部のプログラムから呼び出して利用することができます。 検索機能を実装したい場合、自分でデータを用意して、バックエンドの実装などしなくてすむのでとても重宝します。

無料で使えるWebApiに関して纏めてるサイトがありますので参考までにどうぞ♪( ´θ｀)ノ

それではプロジェクトを作成していきましょう！！

0.まずフォルダを作成しましょう！！ 今回マウンテンぴーは「Desktop」に「webApiReactProject」を作成してます。♪( ´θ｀)ノ

1.Reactプロジェクトを作成しましょう

※「npx create-react-app ⭐️⭐️⭐️⭐️」で雛形を作成しましょう！！ ⭐️‥任意の名前で大丈です！！

今回マウンテンぴーは「npx create-react-app web-api」で実行してます

※ここは「y」でそのまま実行して大丈夫です。

※「Happy hacking!」と表示されれば成功です イェーイ！！☆:.｡. o(≧▽≦)o .｡.:☆

2.「１」で作成したプロジェクトを開きましょう 「１」で「Happy hacking!」できた「web-api」まで移動して「code .」で開きましょう

これで雛形の作成は完了です

localhost:3000でReactがくるくるしてればOKです

3.検索する画面を作成していきます。

App.jsを修正します ※赤わくを修正していきます ※修正前

↓ ※修正後

次、App.cssも修正します。

※修正前

↓

※修正後

.container {
    width: 100%;
    height: 100vh;
    padding: 36px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container h2 {
    margin-bottom: 12px;
}

.container input {
    min-width: 360px;
    padding: 5px 12px;
    margin-bottom: 36px;
    outline: none;
}

画面はこんな感じなっているかと思います

4.イメージギャラリー（ImageGallery）のコンポーネントを作成していきます

「App.js」のformタグの下あたり「ImageGallery」コンポートを作成していきます。

次に

「src」に「ImageGallery.js」というファイルを作成していきます。

「ImageGallery」を編集していきます

「rafc」で自動保管できます！！

※自動保管は下記拡張機能を入れとく便利ですぅ〜

「App.js」に「ImageGallery」をimport します！

「ImageGallery」の文字が表示されていればOKです！！

5.イメージギャラリー（ImageGallery）のコンポーネントのHTMLを作成していきましょう！！

「ImageGallery.js」に 「div」で 「images-wrapper」を作成します。

次に 「src」に「ImageGallery.css」というファイルを作成していきます。

作成した「ImageGallery.css」を下記のようにかきかきしてください！！

.images-wrapper {
  display: grid;
  grid-template-columns: 130px 130px 130px;
  grid-gap: 160px;
  padding-right: 100px;
}

.image {
  /* border: 1px solid black; */
  width: 250px;
  height: 250px;
}

.image img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  background-position: center;
  box-shadow: 0 12px 10px -6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all;
}

.image img:hover {
  box-shadow: none;
  transition-duration: 0.3s;
  transform: translateY(5px);
}

「ImageGallery.css」のimportもお忘れなくぅ〜！！

6.次はWEBAPIを使って画像取得していきましょう！！

今回は「pixabay」をお借りします！！ こちらはアカウント登録が必要になります。（無料で利用できます！！） https://pixabay.com/ja

写真検索の「API」を開きます

画像検索に関してのドキュメントがあります！！

下の方に例がありますので開いてみてください！！

データを取得することができます！！

今回は画像のパスを取得したいです

「largeImageURL」のパスをコピーして「ImageGallery.css」に貼り付けす

そうするとこんな感じで画像が表示されます！！（これは仮で置いてます）

7.取得した画像の検索をできるように書いていきます。

入力フォームを実装する際にしようするのが「useState」になります。

useStateは、関数コンポーネントのstateを保持したり、更新したりするためのフックです。数あるReact Hooksの機能の中でも、特に頻繁に利用されます。

※参考サイト

ではデータフェッチングをしていきましょう！！

import { useRef, useState } from "react";
import "./App.css";
import ImageGallery from "./ImageGallery";

function App() {
  const [inputText, setInputText] = useState([]);
  const ref = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(ref.current.value);

    // APIのURL
    const url = `https://pixabay.com/api/?key=41307311-bb908514263beb84ec77a655a&q= ${ref.current.value}&image_type=photo`;

    // APIを叩く（データフェッチング）
    fetch(url)
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        console.log(data.hits);
        setInputText(data.hits);
      });
  };
  return (
    <div className="container">
      <h2>画像検索！！！！！</h2>
      <form onSubmit={(e) => handleSubmit(e)}>
        <input type="text" placeholder="画像を探す" ref={ref} />
      </form>

      <ImageGallery inputText={inputText}></ImageGallery>
    </div>
  );
}

export default App;

import React from "react";
import "./ImageGallery.css";

const ImageGallery = ({ inputText }) => {
  return (
    <div>
      <div className="images-wrapper">
        {inputText.map((data) => (
          <div className="image" key={data.id}>
            <img src={data.largeImageURL}></img>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageGallery;

できたぁー(^^)

これでコーディング以上になります。

感想

ヘムヘム(^^)

今回はReactとWebApiに関して個人的に勉強になりました。

とりあえずReactを使って動くものが出来たので良かったです！！

読んでくださる方々の参考にはならないカモですが、今後はもっと勉強して参考になるように記事が書けるようになったらと思いますm( )m

最後に

この記事を読んで興味を持って下さった方がいらっしゃればカジュアルにお話させていただきたく、是非ご応募をお願いします。

Wantedly / Green

次のアドベントカレンダーの記事は須藤さんです。 どんな記事か楽しみです！