iimon TECH BLOG

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

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」を作成してます。♪( ´θ｀)ノ

スクリーンショット 2023-12-17 15.57.30.png

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

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

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

スクリーンショット 2023-12-17 16.11.21.png

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

スクリーンショット 2023-12-17 16.09.00.png

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

スクリーンショット 2023-12-17 16.18.52.png

2.「１」で作成したプロジェクトを開きましょう 「１」で「Happy hacking!」できた「web-api」まで移動して「code .」で開きましょう スクリーンショット 2023-12-17 16.26.06.png

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

スクリーンショット 2023-12-17 16.32.41.png

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

スクリーンショット 2023-12-17 16.42.47.png

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

App.jsを修正します ※赤わくを修正していきます ※修正前 スクリーンショット 2023-12-17 16.49.58.png

↓ ※修正後 スクリーンショット 2023-12-17 16.56.48.png

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

※修正前 スクリーンショット 2023-12-17 17.01.08.png

↓

※修正後

スクリーンショット 2023-12-17 17.02.53.png

.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;
}

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

スクリーンショット 2023-12-17 17.05.30.png

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

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

次に

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

スクリーンショット 2023-12-17 17.16.45.png

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

「rafc」で自動保管できます！！ スクリーンショット 2023-12-17 17.34.09.png

スクリーンショット 2023-12-17 17.30.48.png

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

スクリーンショット 2023-12-17 17.35.43.png

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

スクリーンショット 2023-12-17 17.38.25.png

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

スクリーンショット 2023-12-17 17.41.42.png

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

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

スクリーンショット 2023-12-17 17.58.04.png

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

スクリーンショット 2023-12-17 18.01.57.png

作成した「ImageGallery.css」を下記のようにかきかきしてください！！ スクリーンショット 2023-12-17 18.04.22.png

.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もお忘れなくぅ〜！！

スクリーンショット 2023-12-17 18.24.31.png

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

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

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

スクリーンショット 2023-12-17 18.41.26.png

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

スクリーンショット 2023-12-17 18.56.01.png

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

スクリーンショット 2023-12-17 18.58.30.png

データを取得することができます！！ スクリーンショット 2023-12-17 18.59.24.png

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

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

スクリーンショット 2023-12-17 19.02.55.png

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

スクリーンショット 2023-12-17 19.02.31.png

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;

できたぁー(^^)

スクリーンショット 2023-12-17 22.12.08.png

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

感想

ヘムヘム(^^)

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

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

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

最後に

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

Wantedly / Green

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