Reactプロジェクトの作成
今回はCreate React Appではなく、 Vite を利用して新規プロジェクトを作成したいと思います。
基本的にはこちらのVite公式ページを参考にしています。
１. 初めにnpm create vite@latestをターミナルで実行します。
２. プロジェクトネームを聞かれるので適当に入力します。今回は react_ghibli という名前にしました。
３. どのJSフレームワークを利用するか聞かれるので、 React を選択します。
４. 次にJSかTSのどちらを利用するか聞かれますが、今回は JS を選択します。
５. ターミナルに
cd 作成したプロジェクトの名前
npm install
npm run dev
を実行しろと表示されるのでコピペして実行します。
６. 少し待つとUrlが表示されるので、そのUrlを開き、このように表示されると新規プロジェクト作成は成功です。
APIの利用
初めに、API利用に必要な axios をインストールします。ターミナルで npm install axios を実行します。
続いてVSCodeなどのエディターを使い作成されたファイルを開き、 react_ghibli/src/App.jsx を開きます。
そこで、App.jsxに import axios from "axios"; を 追加し、中身をこのように書き変えます。
import React, { useState, useEffect } from "react";
import axios from "axios";
const API = () => {
const [Ghibli, setGhibli] = useState([]);
useEffect(() => {
async function getGhibli() {
let API_Ghibli = await axios.get(`https://ghibliapi.herokuapp.com/films`);
console.log(API_Ghibli);
setGhibli(API_Ghibli.data);
}
getGhibli();
}, []);
return (
<div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<ul>
{Ghibli.map((post) => (
<>
<li className="font-bold"> {post.original_title} </li>
<li className="font-bold"> {post.director} </li>
<li>
<img src={post.image} alt="" className="pb-10" />
</li>
</>
))}
</ul>
</div>
);
};
export default API;
※className="font-bold などの表記はtailwindというCSSフレームワークを利用したものです。
ここでは axios.get()を使い、ジブリ作品のJSONデータが集められている
https://ghibliapi.herokuapp.com/films
にアクセスをし、そのデータを API_Ghibli という変数に入れています。
後はこのデータを利用することで、作品名や作者名、画像などを利用することが可能となります。
このように、外部JSONデータを簡単に取得することが出来ました。
追記(tailwindの使用方法について)
index.html 内の <head> に
<linkhref="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
を追加する。