🍨

Vite + ReactとUnsplash APIで簡単な画像表示アプリを作成

2023/07/16に公開

JavaScript

はじめに

ReactとUnsplash APIで簡単な画像表示アプリを作成を作ってみました。

＊Unsplashは高画質の写真素材サイトです。
公式サイト：https://unsplash.com/ja

こちらの動画をアプリ作成の参考にさせていただきました！
とてもわかりやすくておすすめです！

開発環境

react：18.2.0
axios：1.4.0
vite：4.4.0
unsplash api

完成イメージ

アプリ名：Nature Photos App
作った背景としては、
仕事で疲れてきて、少し気分転換したいなと思ったときに、自然の写真を見てリラックスできたらいいなと思って作成しました。

準備

フロントエンドビルドツールのViteを使ってAppを作成しました。

npm create vite@latest

で簡単にすぐに作成できます。

公式サイト：
https://ja.vitejs.dev/guide/

実装

■Unsplashに登録

Unsplash APIを使用する前にUnsplashに登録します。
（登録によって取得できるアクセスキーを画像取得時に使います。）

公式サイト（開発者向け）：
https://unsplash.com/developers

■コンポーネントの作成

コンポーネントは
・Title.jsx
・SelectButton.jsx
・Result.jsx
の３つに分けて作成しました。

Title.jsx

export const Title = () => {
  return (
    <header>
      <h1>In the Nature</h1>
      <p>
        by <a href="https://unsplash.com/">Unsplash</a>
      </p>
    </header>
  );
};

SelectButton.jsx

export const SelectButton = ({ getPhotoData }) => {
  return (
    <div>
      <button value="colorful" onClick={getPhotoData}>
        another photo
      </button>
    </div>
  );
};

Result.jsx

export const Result = ({ photo }) => {
  const { links, urls, alt_description } = photo;
  console.log(photo);
  return (
    <div className="photo">
      <a href={links.html}>
        <img src={urls.regular} alt={alt_description} />
      </a>
    </div>
  );
};

■APIの設定

axiosでapiを叩いて画像データを取得します。

（axios：HTTP通信を簡単に行うことができる、JavaScriptのライブラリ。これによってAPIを提供するクラウドサービスに対して、データを送受信することができます。）

App.jsx

import { useCallback, useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import { SelectButton } from "./components/SelectButton";
import { Title } from "./components/Title";
import { Result } from "./components/Result";

function App() {
  const [photo, setPhoto] = useState();

  useEffect(() => {
    const fetchPhoto = () => {
      axios
        .get(
          `https://api.unsplash.com/photos/random?query=nature&client_id=${
            import.meta.env.VITE_UNSPLUSH_API_KEY
          }`
        )
        .then((res) => setPhoto(res.data));
    };
    fetchPhoto();
  }, []);

  const getPhotoData = useCallback(() => {
    axios
      .get(
        `https://api.unsplash.com/photos/random?query=nature&client_id=${
          import.meta.env.VITE_UNSPLUSH_API_KEY
        }`
      )
      .then((res) => setPhoto(res.data));
  }, []);

  return (
    <div className="App">
      <Title />
      <SelectButton getPhotoData={getPhotoData} />
      {photo && <Result photo={photo} />}
    </div>
  );
}

export default App;

今回自然の風景の写真を表示させたかったので、”nature”で検索した画像をランダムで表示させています。

他にもいろいろリクエストの種類があり、以下のページで確認できます。
https://unsplash.com/documentation

最初に画面描画をする際は、useEffectを使って１回だけ処理を実行させるようにしました。
これを書き忘れて無限ループになってしまったので、次回から気をつけたいと思います。

useEffect(() => {
    const fetchPhoto = () => {
      axios
        .get(
          `https://api.unsplash.com/photos/random?query=nature&client_id=${
            import.meta.env.VITE_UNSPLUSH_API_KEY
          }`
        )
        .then((res) => setPhoto(res.data));
    };
    fetchPhoto();
  }, []);

■補足

実装中に”Rate limit is exceeded”というエラーが出たので調べてみたところ、無料のUnsplash APIは１時間に５０回までリクエスト可能、という制限があるようです。時間が経てば再度データ取得できます。

公式サイトの説明：

以上で実装完了です！