React 初めてのアプリ WeatherAPI から取得した情報を表示

2024-04-272024
32.1% (117.6/366)
April
88.7% (26.6/30)
Week 17
80.3% (5.6/7)
Day 27 Sat
62.1% (14.9/24)

訪問者

total: 522
today: 4
yesterday: 3
now: 24

↑

更新

MenuBar

この記事に含まれるもの
React のコンポーネントの入れ子構造と CSS grid
Header 子コンポーネントの出力内容を親コンポーネントで設定する
Footer 子コンポーネントに props を渡す/イベント処理(基礎編)
Menu 親コンポーネントにCallback
Body API呼び出し、リスト処理モロモロ
Screen Shots

この記事に含まれるもの †

こんなサンプルアプリを作った
機能
- 左メニュー枠で地域を選ぶと、右メイン枠に現在の天気が表示される
- 表示する天気は、Open Weather Map から現在の天気を取得する https://openweathermap.org/api → このサンプルプログラムを動かすためには無料のユーザ登録とAPIキーの発行が必要。APIキーは Secrets.js に
```
export const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
```
  と設定する。(Secrets.js は、github には載せていないので各自作る必要がある)
こんな技術要素が含まれる
- CSS の grid を使って、Header, Menu, Body, Footer の画面構成を作る
- Header, Menu, Body, Footer は、それぞれ React のコンポーネントになっていて、App コンポーネントから読み込まれる
- Header の表示内容は App で指定される (Reactのコンポーネントを拡張タグのように使える)
- Footer をクリックすると、Copyright の年号がインクリメントされる。React のイベント処理と State について練習する
- Menu で地域をクリックしたことが、App に伝わる。子コンポーネントから親コンポーネントへの Callback を行う
- Menu で地域をクリックすると、App 側で Body を変更する。親コンポーネントから子コンポーネントの再描画を行う
- Body では、Weadher API を使って、現在の天気を取得する。
  - 引数 (props) で与えられたリストを処理する。リストを作るときに、一意な key を React に与えて再描画のヒントにする
  - Javascript の Fetch API を非同期で実行して、結果が返ってきたら React コンポーネントを描画する
  - それまでの間、loading image が表示されるようにする

↑

React のコンポーネントの入れ子構造と CSS grid †

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/App.css

#layoutContainer {
  display: grid;
  margin: 0;
  min-height: 100vh;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 100px 1fr;
}

#layoutContainer .header {
  grid-row: 1;
  grid-column: 1 / span 2;
  background: pink;
}

#layoutContainer .main {
  grid-row: 2;
  grid-column: 2;
  background: lightgreen;
}

#layoutContainer .nav {
  grid-row: 2;
  grid-column: 1;
  background: lightgrey;
}

#layoutContainer .footer {
  grid-row: 3;
  grid-column: 1 / span 2;
  background: lightblue;
}

.weather {
  width: 200px;
  float: left;
  padding-left: 20px;
}

button.link-style-btn{
  cursor: pointer;
  border: none;
  background: none;
  color: #0033cc;
}
button.link-style-btn:hover{
  text-decoration: underline;
  color: #002080;
}

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/App.js

import './App.css';
import { useState } from "react";

// 拡張子 js mjs jsx ts tsx は省略できる。将来 TypeScript 化しても import を変えなくていい
import Header from './Header'
import Menu from './Menu'
import Body from './Body'
import Footer from './Footer'

function App() {
  const [CITIES, updateCities] = useState([]);

  const callbackFromMenu = (cities) => {
    updateCities(cities);
  };

  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
}

export default App;

HTML側

<div id="layoutContainer">
  <div className="header"> ヘッダー </div>
  <div className="nav"> メニュー </div>
  <div className="body"> ボディー </div>
  <div className="footer"> フッター </div>
</div>

何の変哲もない div タグ
laoutContainer 配下に、header、nav、body、footer がいる。id や class は、次の CSS で決めたものでこれにしなきゃいけないということはない

CSS
```
#layoutContainer {
  display: grid;
  margin: 0;
  min-height: 100vh;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 100px 1fr;
}

#layoutContainer #header {
  grid-row: 1;
  grid-column: 1 / span 2;
  background: pink;
}
...
```
- Gridコンテナ指定
  - display:grid
  - grid-template-rows: 100px 1fr 100px; → 上から 100px 残り全部 100px
  - grid-template-columns: 100px 1fr; → 左から 100px 残り全部
  - fr は、残りの pixel 数を fr の比率で分けることを示す
- Gridセル指定
  - grid-row: 1; → 1行目
  - grid-column: 1 / span 2; → 1列目から 2列使う
- vh は view port に対する割合
  - min-height: 100vh; → viewport の 1/100
    vw viewport width
    vh viewport height
    vmax max(vw, vh)
    vmin min(vw, vh)
参考文献
- Basic concepts of grid layout, MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
- CSS Grid Layout を極める！（基礎編）, @kura07, Qiita, 2020, https://qiita.com/kura07/items/e633b35e33e43240d363

↑

Header 子コンポーネントの出力内容を親コンポーネントで設定する †

App.js (親コンポーネント)

function App() {
  ...
  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
}

<Header> 配下に JSX が記載されている。
感覚的には、<Header> は、配下の JSX に対して何らかの修飾を加えて表示するカスタムTagのように使うことができる

Header.js(子コンポーネント)
https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/Header.js
```
export default function Header({children}) {
    return (
        <>
        {children}
        </>
    );
}
```
- 引数 props の中の children プロパティで、親で指定した <Header> 配下の JSX を参照することができる

↑

Footer 子コンポーネントに props を渡す/イベント処理(基礎編) †

App.js (親コンポーネント)

function App() {
  ...
  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
}

App から Footer にパラメータ name=MyCompany?, year=2024 を渡している

Footer.js

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/Footer.js

import { useState } from 'react';

// function Footer (props) {...} と記述することもできる
// その場合は {props.year} {props.name} で参照する 
export default function Footer({name, year}) {

    // useState() の返り値は、配列 [値, 値を設定する関数]
    const [yy, setYY] = useState( Number(year) );
    const handleClick = () => {
        setYY(yy+1);
    };

    return (
        <>
        <p align="center" onClick={handleClick}>
            Copyright © {yy} {name} All Rights Reserved.
        </p>
        </>
    );
}

App から渡されたパラメータは、Footer の引数で受け取ることができる。引数は props オブジェクトで受け取ることもできるし、Javascript の標準機能で props オブジェクトの属性 {name, year} にばらして受け取ることができる
Header の時に使った children 属性については、ユーザアプリからは指定できない(Reactが勝手に設定する)

イベント処理
- JSXの <p onClick={handleClick}>...</p> でクリック時のイベントハンドラを指定する。
  - ここで、イベントハンドラには関数オブジェクトを指定する必要があることに注意。つまり引数を指定できない。
  - 引数を指定する方法は Menu で述べる
- handleStateイベントハンドラで、useState の返り値で渡された関数 setYY を呼び出している
```
const [yy, setYY] = useState( Number(year) );
const handleClick = () => {
  setYY(yy+1);
};
```
  - useState(初期値) は、[値yy, 値を変更するfunction setYY] を返す
  - yy をコンポーネントの描画に使うと
  - setYY で値を変更したときに、そのコンポーネントが再描画される
- つまり <p> をクリックすると、
```
Copyright &#169; {yy} {name} All Rights Reserved.
```
  が新たな yy を使って再描画されることになる

↑

Menu 親コンポーネントにCallback †

App.js (親コンポーネント)

function App() {
  const [CITIES, updateCities] = useState([]);
 
  const callbackFromMenu = (cities) => {
    updateCities(cities);
  };
 
  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
 }

App.js から Menu に callback 関数 callbackFromMenu? を渡している。
- 子コンポーネントに渡すのは Footer の時のように値だけではなく、Javascript のオブジェクトも渡せる。
- Array や Function を渡すことができる
子コンポーネントのMenuで起きたイベントを親コンポーネントに伝えたい場合は、この callback 関数を呼べばいい

Menu.js

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/Menu.js

import './App.css';

const JP_CITIES = ["Sapporo","Sendai","Tokyo","Nagoya","Kyoto","Osaka","Kobe","Hiroshima","Fukuoka","Okinawa"];
const CN_CITIES = ["Beijing","Chengdu","Chongqing","Dongguan","Guangzhou","Nanchong","Nanjing","Shanghai"
,"Shenzhen","Tianjin","Wuhan","Xi'an"];
const US_CITIES = ["Anchorage","Chicago","Dallas","Denver","Honolulu","Houston","Los Angeles","Miami","New York"
,"Palo Alto","Philadelphia","Phoenix","San Francisco","Seattle","Washington"    
];
const EU_CITIES = ["Vienna","Brussels","Sofia","Copenhagen","Helsinki","Paris","Berlin","Athens","Nuuk","Reykjavik"
,"Dublin","Rome","Oslo","London"];

export default function Menu({callback}) {
    const handleMenuClick = (area) => {
        switch(area) {
        case 'ja':
            callback(JP_CITIES);
            break;
        case 'cn':
            callback(CN_CITIES);
            break;
        case 'us':
            callback(US_CITIES);
            break;
        case 'eu':
            callback(EU_CITIES);
            break;
        default:
            callback([]);
            break;
        }
    };
    
    return (
        <ul>
        {/* onClick に設定できるのは関数オブジェクトなので、引数渡したいときには無名関数を設定して、そこから引数付きでハンドラを呼び出す */}
        <li><button className="link-style-btn" onClick={() => handleMenuClick('ja')}>Japan</button></li>
        <li><button className="link-style-btn" onClick={() => handleMenuClick('cn')}>China</button></li>
        <li><button className="link-style-btn" onClick={() => handleMenuClick('us')}>US</button></li>
        <li><button className="link-style-btn" onClick={() => handleMenuClick('eu')}>Europe</button></li>
        </ul>
    );
}

Menu 側で、ボタンをクリックすると handleMenuClick?(area) が呼び出される
押した地域を引数に与えたいので、本当のイベントハンドラには handleMenuClick?('ja') を呼び出す無名関数を指定する必要がある
```
onClick={() => handleMenuClick('ja')
```
handleMenuClick?(area) では、App から渡された Callback 関数を呼び出す。この時引数に、都市名の Array を渡す
```
callback(JP_CITIES); 
```

↑

Body API呼び出し、リスト処理モロモロ †

App.js (親コンポーネント)

function App() {
  const [CITIES, updateCities] = useState([]);

  const callbackFromMenu = (cities) => {
    updateCities(cities);
  };

  return (
    <div id="layoutContainer">
      {/* 子コンポーネントに、JSXを渡せる。子コンポーネント側からは、引数 children で取得できる */}
      <div className="header">
        <Header>
          <h1>Weather Information</h1>
        </Header>
      </div>
      <div className="nav"><Menu callback={callbackFromMenu}/></div>
      <div className="body"><Body cities={CITIES}/></div>
      {/* 子コンポーネントに、タグ属性でパラメータを渡せる(props)。 props には Javascript (配列や関数) も渡せる */}
      <div className="footer"><Footer name="MYCompay" year="2024"/></div>
    </div>
  );
}

App.js から Body に cities で Array を渡している。
cities は useState で管理しているので、Meny から callback 関数 callbackFromMenu? が呼び出されて変更されたときには Body が再描画されることになる

Body.js

https://github.com/kagyuu/ReactExam/blob/main/03_my-react/my-react2/src/Body.js

import './App.css';
import React, { useState, useEffect } from "react";
import { API_KEY } from './Secrets';
import loading from './loading.gif';

// OpenWeatherMap API のキーは、Secrets.js に次のように定義する
// export const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// Secrets.js は .gitignore にしています
// API Key は各自 https://openweathermap.org/api の Current Weather Data (無料) を取得してください

// 天気予報を表示するコンポーネント
function Weather({city, idx}) {
    // 天気データを保持するステート
    const [weather, setWeather] = useState(null);
  
    // API から天気データを取得する関数
    const fetchWeather = async () => {
      try {
        const response = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
        );
        const data = await response.json();
        if (data.weather) {
          setWeather(data);
        } else {
          console.error("Can't fetch weather:");
          console.error(data);
        }
      } catch (error) {
        console.error(error);
      }
    };
  
    // コンポーネントがマウントされたときに API から天気データを取得する
    useEffect(() => {
      fetchWeather();
    });
  
    // 天気データがない場合はローディングを表示する
    if (!weather) {
      return (
        <div className="weather">
          <h2>{idx}. {city}</h2>
          <p>Loading...</p>
          <img src={loading} alt="loading"/>
        </div>
      );
    }
  
    // 天気データがある場合は、都市名、気温、天気アイコン、天気説明を表示する
    return (
      <div className="weather">
        <h2>{idx}. {city}</h2>
        <p>{weather.main.temp} ℃</p>
        <img
          src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
          alt={weather.weather[0].description}
        />
        <p>{weather.weather[0].description}</p>
      </div>
    );
  };

export default function Body({cities}) {
    return (
      <>
        {cities.map((elem,idx) => (
            // List を展開するときには key (一意な値) を設定して、React.js に再レタリングが必要かのヒントを与える
            <Weather key={elem} city={elem} idx={idx}/>
        ))}
      </>
    );
}