知ってるけど、知らないReactに触れてみた

公開日：2024.04.29　更新日：2024.04.29

tag: Windows クラウド

こんにちは。ゴルフ始めました、motoKNです。

ドライバーでバッチーーンと気持ちよく遠くまで飛ばしたいです。もっか120を切るのが目標です。

さて、今回はReactに初めて触れる機会を頂きました。筆者自身はWEBアプリ開発に携わることが少なく過去PHP(Smarty)やRuby(Ruby on Rails)に多少触れた事がある程度。。。

そんな筆者がReactに触れましたのでその時の内容をご紹介したいと思います。

Reactとは

Reactは、Facebook(Meta社)が2011年に開発したJavaScriptライブラリです。

その後2013年にオープンソース化し、それ以降開発者コミュニティによって多くの改善がなされました。

JavaScriptの標準的な機能を使用してUIを構築しており、DOMというものを使用してページの変更前後で比較し変更差分のみ更新するため、非常に高速で効率的なページ表示を実現しています。こういった機能がありますので、更新箇所の多いWEBサイトなどでReactを使用するメリットがあります。反対に更新箇所の少ないWEBサイト(例：ブログ、ニュースサイトなど)ではReactのメリットを活かすことができません。

筆者は勝手にReactがWEBアプリ開発フレームワークだと思っていましたが、JavaScriptライブラリなのです。WEBアプリ開発フレームワークがなくてもReact単体で使用できますが、Next.jsのようなフレームワークも一緒にインストールして使用することが公式では推奨しているようです。

詳しくは公式より

今回作成するモノ

天候情報を無料で取得できる OpenWeatherMap を使用して外部APIからJson形式でデータを取得し、その情報を表示するプログラムを作成します。

APIKeyの取得

OpenWeatherMap から天気情報を取得するには、事前にアカウントを作成しAPI Keyを取得する必要があります。

アカウントが作成されると、API Keyが取得できます。

環境構築

私はWindows環境でWSL2+dockerで環境を作成しました。環境構築色々なサイトで紹介されていますので検索してみてください。

プログラム

以下のようなプログラム作成しました。

'use client' // hook(例:useStateやuseEffect)を使用しユーザー操作イベントで画面更新する場合、ファイルの先頭に記載。
import { useState, useEffect } from 'react'; // 状態管理と変更処理にて使用します。
import axios from 'axios';  // APIで取得したJSONデータを自動的にJavaScriptオブジェクトに変換してくれる。

// -- OpenWeatherMapアクセス情報 --
const API_ENDPOINT = 'https://api.openweathermap.org/data/2.5/weather?';
const API_CITY = 'Tokyo';
const API_KEY = '{取得したAPI Key}';
// -------------------------------

// 気温を摂氏に変換
const kelvinToCelsius = (temp: number) => {
    return (temp - 273.15).toFixed(1);
  };

// ページ表示時に最初に実行される関数
export default function Page() {
  const [weatherdata, setWeather] = useState(null); // 天気データ取得すると'weatherdata'に代入される

  // 初回のみ実行される
  useEffect(() => {
    async function fetchWeather() {
	    const response = await axios.get(
	    	API_ENDPOINT, {
            	params:{
                	q: API_CITY,
                	appid: API_KEY
       } });
       setWeather(response.data);
    }
    fetchWeather();
  }, []);

  return (
    <div>
      <h1>東京の天気</h1>
      {weatherdata && (
        <div>
          <p>天気: {weatherdata.weather[0].main}</p>
          <p>気温: {kelvinToCelsius(weatherdata.main.temp)}℃</p>          
        </div>
      )}
    </div>
  );
}

ブラウザ表示はこんな感じ。

プログラム解説

  useEffect(() => {
    ・・・
  }, []); ←第二引数

第二引数に空の配列を渡しています。そうすることで初回のページ表示時のみ実行されます。

  useEffect(() => {
    async function fetchWeather() {
	    const response = await axios.get(
	    	API_ENDPOINT, {
            	params:{
                	q: API_CITY,
                	appid: API_KEY
       } });
       setWeather(response.data);
    }
    fetchWeather();
  }, []);

async function fetchWeather() は非同期関数を定義し、その後await でデータ取得するまで待機します。待機が終わると以降の処理が再開されます。APIからのレスポンスが返ってくるのを待ち、返ってきたらsetWeather()関数を実行しています。

      {weatherdata && (
        <div>
          <p>天気: {weatherdata.weather[0].main}</p>
          <p>気温: {kelvinToCelsius(weatherdata.main.temp)}℃</p>          
        </div>
      )}

weatherdataがNULLでない場合は、天気と気温を表示しています。

天気情報はこちらのJSONフォーマットを確認してデータを取得しています。