宣言的なアプローチの<Refresh>コンポーネントと、命令的なアプローチのrefresh()関数です。

一見似ているように見えるこの2つの更新方法ですが、実際どのような違いがありのかまとめてみました。

2つの更新方法

まず、それぞれの基本的な使い方を見てみましょう：

// 方法1: Refreshコンポーネントを使用
import { Refresh } from "@lazarv/react-server/navigation";

function RefreshButtonUsingComponent() {
  return (
    <div>
      <Refresh>更新する</Refresh>
    </div>
  );
}

// 方法2: refresh関数を使用
import { useClient } from "@lazarv/react-server/client";
import { startTransition } from "react";

function RefreshButtonUsingFunction() {
  const { refresh } = useClient();
  
  return (
    <div>
      <button onClick={() => startTransition(async () => refresh())}>
        更新する
      </button>
    </div>
  );
}

一見すると似たような機能に見えますが、実際には重要な違いがあります。

1. コンポーネント vs 関数

最も明確な違いは、一方がReactコンポーネントであり、もう一方が関数であるという点です。

• <Refresh>：ユーザーインターフェースを構成するReactコンポーネント。宣言的なアプローチ
• refresh()：プログラムから呼び出す関数。命令的なアプローチ

2. 使用方法と柔軟性

// Refreshコンポーネント - シンプルに使える
<Refresh>クリックして更新</Refresh>

// refresh関数 - より多くのコントロールが可能
const { refresh } = useClient();

// 条件付き更新
const conditionalRefresh = () => {
  if (hasChanges) {
    startTransition(async () => refresh());
  }
};

// 特定のアウトレットのみ更新
const refreshDashboard = () => {
  startTransition(async () => refresh("dashboardOutlet"));
};

// 他の処理と組み合わせる
const saveAndRefresh = async () => {
  await saveData();
  startTransition(async () => refresh());
  showNotification("保存しました");
};

refresh()関数は柔軟性が高く、より複雑なシナリオに対応できます。

3. トランジションの扱い

<Refresh>コンポーネントは内部でReactのトランジションを自動的に処理しますが、refresh()関数を使用する場合は、通常自分でstartTransitionを使ってトランジションを開始する必要があります。

// Refreshコンポーネント - トランジションは内部で処理される
<Refresh>更新</Refresh>

// refresh関数 - 自分でトランジションを開始する
<button onClick={() => startTransition(async () => refresh())}>
  更新
</button>

これにより、refresh()関数を使用する場合、トランジションのタイミングをより細かく制御できます。

ユースケース：どちらを選ぶべき？

それぞれの方法が適している状況を考えてみます。

<Refresh>コンポーネントが適している場合

• シンプルな「更新ボタン」が欲しい場合
• マークアップが中心で、複雑なロジックが不要な場合
• React Serverのデフォルトの動作で十分な場合
• JSXの中で直感的に使いたい場合

function SimplePage() {
  return (
    <div className="page-container">
      <header>
        <h1>マイダッシュボード</h1>
        <Refresh>更新</Refresh>
      </header>
      <main>
        {/* ページコンテンツ */}
      </main>
    </div>
  );
}

refresh()関数が適している場合

• 他のロジックと組み合わせる必要がある場合
• 条件付きで更新したい場合
• 特定のアウトレットだけを更新したい場合
• カスタムUIと組み合わせたい場合
• プログラムで更新のタイミングを制御したい場合

function ComplexDashboard() {
  const { refresh } = useClient();
  const [isLoading, setIsLoading] = useState(false);
  
  const handleRefresh = async () => {
    setIsLoading(true);
    // 先にバックエンドAPIからデータを取得
    await fetchLatestData();
    // その後ページを更新
    startTransition(async () => {
      await refresh();
      setIsLoading(false);
    });
    // 分析データを送信
    trackEvent("dashboard_refreshed");
  };
  
  return (
    <div className="dashboard">
      <button 
        onClick={handleRefresh}
        disabled={isLoading}
        className={isLoading ? "btn-loading" : "btn-normal"}
      >
        {isLoading ? "更新中..." : "最新データに更新"}
      </button>
      {/* ダッシュボードコンテンツ */}
    </div>
  );
}

まとめ

React Serverにおける2つの更新方法は、同じ機能をベースとしながらも、異なるユースケースに合わせて最適化されています。

• <Refresh>コンポーネント：シンプルさと宣言的なアプローチを重視
• refresh()関数：柔軟性と制御性を重視

より高度なパフォーマンス最適化やユーザーエクスペリエンス向上のためには、refresh()関数とstartTransitionを組み合わせた方法が多くの場合に適していそうです。

しかし、シンプルなUI要素としては<Refresh>コンポーネントの直感的に使いやすいです。

Webやモバイルアプリケーションの開発者向けに、JSON、XML、HTML形式で天気情報を配信しています。

今回、ReactとOpenWeatherMap APIを使って、都市を入力したらその都市の天気が表示されるような簡単な天気アプリを作ってみました。

1. 環境構築

Node環境があることを前提にして行います。

templateはtypescriptを指定して、Google Cloud Vision APIをコールするためにaxiosをインストールしておきます。

npm startしてReactの初期画面が表示されれば成功です。

$ npx create-react-app city-weather-app --template typescript
$ cd city-weather-app
$ npm i axios
$ npm start

2. OpenWeatherMap APIの設定

OpenWeatherMap APIにアクセスして、ユーザー登録をします。

ユーザー名、メールアドレス、パスワードを入力して、「Create Account」を押します。

アカウント登録が完了したら、「My API keys」からAPI Keyをコピーしておきます。

3. 環境変数の設定

作成したAPIキーを.envファイルを作成し、環境変数を設定します。

creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。

先ほどコピーしたAPI Keyを設定します。

.env

REACT_APP_OPENWEATHERMAP_API_KEY=xxxxxxxxxxxxx

4. OpenWeatherMap APIを呼び出す

API Keyを設定できたら、実際にOpenWeatherMap APIを呼び出してみます。

こちらの公式ドキュメントを参考にAPIの呼び出しを行います。

今回は入力した都市の天気情報を表示したいので、こちらのAPIの呼び方を参考にします。

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

では実際にAPIを呼び出してみます。まず天気アプリ画面用のコンポーネントを作成します。

先ほどのAPIの呼び出しを参考にコードを書いていきます。

・Weather.tsx

import axios from "axios";

const Weather = () => {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const city = 'Tokyo'

  const apiCall = async () => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
      );
  
      console.log('===================== response data =====================');
      console.log(response.data);
      
    } catch (error) {
      console.error('Error has occured:', error);
    }
  }

  return (
    <div>
      <button onClick={apiCall}>API Call</button>
    </div>
  )
}

export default Weather;

API呼び出しの全体的なコードは上記のようになります。

const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
const city = 'Tokyo'

...

const response = await axios.get(
  `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
);

まずAPIを呼び出しているところから見ていきます。

APIの呼び出しでcityとapiKeyの2つが変数になっています。そのため、apiKeyは先ほど定義した環境変数から取得し、cityは一旦固定で「Tokyo」としておきます。

これで、APIを呼び出すことができます。

console.log('===================== response data =====================');
console.log(response.data);

次に呼び出したAPIのレスポンスをコンソール上に表示させます。
console.logで結果を出力することで、ブラウザのコンソール上で実際にどんなレスポンスデータが返ってきているか確認することができます。

return (
  <div>
    <button onClick={apiCall}>API Call</button>
  </div>
)

トリガーはこのbuttonにしています。ボタンを押すとAPIが呼び出されるようにしています。

・App.tsx

import Weather from './Weather';

function App() {
  return (
    <div className="App">
      <Weather />
    </div>
  );
};

export default App;

最後にApp.tsxにWeatherコンポーネントを呼び出して、完了です。

npm startして実際にローカルの画面を表示すると、「API Call」のボタンが表示され、ボタンを押すと、右側のコンソールのようにAPIのレスポンスデータが表示されます。

5. OpenWeatherMap APIのレスポンスデータを画面に表示する

次にAPIのレスポンスデータを画面に表示させていきます。

・Weather.tsx

import axios from "axios";
import { useState } from "react";

const Weather = () => {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const city = 'Tokyo'

  const [weather, setWeather] = useState<any>(null);

  const apiCall = async () => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
      );
  
      setWeather(response.data);
    } catch (error) {
      console.error('Error has occured:', error);
    }
  }

  return (
    <div>
      <button onClick={apiCall}>API Call</button>
      {weather && (
        <div>
          <h2>{weather.name}</h2>
          <p>Temperature: {weather.main.temp}°C</p>
          <p>Weather: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  )
}

export default Weather;

全体像としては上記のとおりです。

const [weather, setWeather] = useState<any>(null);

const apiCall = async () => {
  try {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
    );
  
    setWeather(response.data);
  } catch (error) {
    console.error('Error has occured:', error);
  }
}

useState フックを使って、2つの要素を持つ状態変数を宣言しています。

weatherは天気情報を入れるための変数で、初期値はnullです。setWeatherはweatherの値を更新するための関数です。

return (
  <div>
    <button onClick={apiCall}>API Call</button>
    {weather && (
      <div>
        <h2>{weather.name}</h2>
        <p>Temperature: {weather.main.temp}°C</p>
        <p>Weather: {weather.weather[0].description}</p>
      </div>
    )}
  </div>
)

{weather && ( … ) } 部分は、weather変数に値が存在する場合のみ、divタグ内の内容を表示します。

weatherがnullまたはundefinedの場合は、div タグ内の内容は表示されません。

weatherに値がある場合、都市名・気温・天気を表示するようにします。

実際に実行してみると上記のように表示されることが確認できます。

6. 都市を入力して表示できるようにする

現状、東京に固定して天気情報を取得しているため、入力値に合わせて天気情報を取得するようにします。

・Weather.tsx

import axios from "axios";
import { useState } from "react";

const Weather = () => {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const [weather, setWeather] = useState<any>(null);
  // 追加
  const [city, setCity] = useState('');

  // 追加
  const inputCity = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCity(event.target.value);
  };

  const apiCall = async () => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
      );
  
      setWeather(response.data);
      
    } catch (error) {
      console.error('Error has occured:', error);
    }
  }

  return (
    <div>
      // 追加
      <input
        type="text"
        value={city}
        onChange={inputCity}
        placeholder="都市を入力してください"
      />
      <button onClick={apiCall}>API Call</button>
      {weather && (
        <div>
          <h2>{weather.name}</h2>
          <p>Temperature: {weather.main.temp}°C</p>
          <p>Weather: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  )
}

export default Weather;

追加したコードが入力した都市の天気情報を取得して、表示するようにして箇所です。

const [city, setCity] = useState('');

const inputCity = (event: React.ChangeEvent<HTMLInputElement>) => {
  setCity(event.target.value);
};

...

<input
  type="text"
  value={city}
  onChange={inputCity}
  placeholder="都市を入力してください"
/>

onChangeはフォーム要素の値が変更されたときに発生するイベントハンドラで、inputタグを追加し、onChangeイベントでcity変数に入力した値を入れています。

実際に動かしてみると、入力した都市で天気情報を取得していることがわかります。

7. 入力した都市が存在しなかった場合のハンドリング

次に、入力した都市が存在しなかった場合の対応を行います。

現状、入力した都市が存在していない場合はエラーが発生しますが、画面に表示されないため、ユーザーが認識できない状態となっています。

・Weather.tsx

import axios from "axios";
import { useState } from "react";

const Weather = () => {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const [weather, setWeather] = useState<any>(null);
  const [city, setCity] = useState('');
  // 追加
  const [error, setError] = useState<string | null>(null);

  const inputCity = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCity(event.target.value);
  };


  const apiCall = async () => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
      );
  
      setWeather(response.data);
      // 追加
      setError(null);
    } catch (error) {
      console.error('Error has occured:', error);
      // 追加
      setWeather(null);
      if (axios.isAxiosError(error) && error.response?.status === 404) {
        setError('入力した都市が見つかりませんでした。');
      } else {
        setError('予期せぬエラーが発生しました。');
      }
    }
  }

  return (
    <div>
      <input
        type="text"
        value={city}
        onChange={inputCity}
        placeholder="都市を入力してください"
      />
      <button onClick={apiCall}>天気を取得</button>
      // 追加
      {error && <p className="error">{error}</p>}
      {weather && !error && (
        <div>
          <h2>{weather.name}</h2>
          <p>Temperature: {weather.main.temp}°C</p>
          <p>Weather: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  )
}

export default Weather;

エラー用のuseStateを用意し、エラーを表示するためのHTMLを追加しています。

if (axios.isAxiosError(error) && error.response?.status === 404) {
  setError('入力した都市が見つかりませんでした。');
} else {
  setError('予期せぬエラーが発生しました。');
}

エラーに関しては、都市が存在しない場合とそれ以外のエラーの2種類で条件分岐しています。エラー文をsetErrorで値を更新し、画面に表示します。

8. スタイルを整える

最後にスタイルを整えます。特にこだわりがないようであれば、そのままコピペして使用して大丈夫です。

・Weather.tsx

import axios from "axios";
import { useState } from "react";

const Weather = () => {
  const apiKey = process.env.REACT_APP_OPENWEATHERMAP_API_KEY;
  const [weather, setWeather] = useState<any>(null);
  const [city, setCity] = useState('');
  const [error, setError] = useState<string | null>(null);

  const inputCity = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCity(event.target.value);
  };


  const apiCall = async () => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
      );
  
      setWeather(response.data);
      setError(null);
    } catch (error) {
      console.error('Error has occured:', error);
      setWeather(null);
      if (axios.isAxiosError(error) && error.response?.status === 404) {
        setError('入力した都市が見つかりませんでした。');
      } else {
        setError('予期せぬエラーが発生しました。');
      }
    }
  }

  return (
    <div>
      <h1>都市の天気検索</h1>
      <input
        type="text"
        value={city}
        onChange={inputCity}
        placeholder="都市を入力してください"
      />
      <button onClick={apiCall}>天気を取得</button>
      {error && <p>{error}</p>}

      {weather && !error && (
        <div className="weather-info">
          <h2>{weather.name}</h2>
          <p>Temperature: {weather.main.temp}°C</p>
          <p>Weather: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  )
}

export default Weather;

・App.css

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: #4CAF50;
}

input[type="text"] {
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 200px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.weather-info {
  background: #e7f5e8;
  margin: 20px 0;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
  text-align: center;
}

.weather-info h2 {
  margin: 0 0 10px 0;
}

.error {
  color: red;
  margin: 20px 0;
}

ローカルの画面を見ると、良い感じのデザインになりました。

おわりに

今回はOpenWeatherMap APIを利用して簡単な天気アプリを実装しました。

天気アプリなどは既存のサービスで充実していますが、実際に自分で作ることでよりサービス作りの解像度を上げることができれば幸いです。

Google Cloud Vision APIは、Googleが提供する機械学習を活用した画像解析サービスです。

このAPIを使用することで、開発者は画像に含まれる情報を自動的に抽出し、様々な解析を行うことができます。

今回Reactを使ってGoogle Cloud Vision APIを使って簡単な画像認識アプリを作ってみました。

1. 環境構築

Node環境があることを前提にして行います。

templateはtypescriptを指定して、Google Cloud Vision APIをコールするためにaxiosをインストールしておきます。

npm startしてReactの初期画面が表示されれば成功です。

$ npx create-react-app google-vision-app --template typescript
$ cd google-vision-app
$ npm i axios
$ npm start

2. Cloud Vision APIの設定

Cloud Vision APIはGCPの管理画面の検索窓から「Cloud Vision API」を実行し、有効化されていない場合は「有効化」するを押します。

「このAPIを使用するには、認証情報が必要になる可能性があります」と表示された場合は、「認証情報」から「認証情報を作成」します。作成後、APIキーが表示されるのでコピーしておきます。

3. 環境変数の設定

作成したAPIキーを.envファイルを作成し、環境変数を設定します。

creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。

・.env

REACT_APP_GOOGLE_CLOUD_VISION_API_KEY=xxxxxxxxxxxx

4. Cloud Vision APIを呼び出す

Cloud Vision APIのキーを設定できたら、実際にCloud Vision APIを呼び出して結果を表示するようにします。

流れとしては、画像をアップロードしたら、Cloud Vision APIを呼び出して、レスポンスを整形して画面に表示するといった感じです。

・App.tsx

import React, { useState } from 'react';
import axios from 'axios';

interface LabelAnnotation {
  description: string;
  score: number;
}

const App: React.FC = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [labels, setLabels] = useState<LabelAnnotation[]>([]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      setSelectedFile(event.target.files[0]);
    }
  };

  const handleFileUpload = async () => {
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.readAsDataURL(selectedFile);
    reader.onloadend = async () => {
      const base64String = reader.result?.toString().replace(/^data:image\/[a-z]+;base64,/, "");

      try {
        const apiKey = process.env.REACT_APP_GOOGLE_CLOUD_VISION_API_KEY;
        const response = await axios.post(
          `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`,
          {
            requests: [
              {
                image: {
                  content: base64String,
                },
                features: [
                  {
                    type: 'LABEL_DETECTION',
                    maxResults: 10,
                  },
                ],
              },
            ],
          }
        );

        const labelAnnotations = response.data.responses[0].labelAnnotations;
        const labels: LabelAnnotation[] = labelAnnotations.map((annotation: {description: string, score: string}) => ({
          description: annotation.description,
          score: annotation.score,
        }));

        setLabels(labels);
      } catch (error) {
        console.error('Error uploading file:', error);
      }
    };
  };

  return (
    <div className="App">
      <h1>Google Cloud Vision API Demo</h1>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleFileUpload}>アップロードして解析</button>
      {labels.length > 0 && (
        <div>
          <h2>解析結果:</h2>
          <table>
            <thead>
              <tr>
                <th>ラベル</th>
                <th>スコア</th>
              </tr>
            </thead>
            <tbody>
              {labels.map((label, index) => (
                <tr key={index}>
                  <td>{label.description}</td>
                  <td>{label.score.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default App;

5. 画像認識アプリを動かす

では実際に動かしてみます。適当に画像を用意して、実行してみます。

今回はたけのこの画像を用意して、アップロードして解析してみました。結果は以下の通りです。

食べ物や植物に対して高いスコアが出ています。他も材料や自然な食べ物、主食などわりと的確にラベリングできていると思います。

6. スタイルを整える

最後にスタイルを整えます。特にこだわりがないようであれば、そのままコピペして使用して大丈夫です。

.App {
  text-align: center;
  font-family: 'Arial', sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
  font-size: 2em;
  margin-bottom: 20px;
}

input[type="file"] {
  display: block;
  margin: 20px auto;
  padding: 10px;
  font-size: 1em;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

table {
  margin: 20px auto;
  border-collapse: collapse;
  width: 80%;
  max-width: 600px;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table th {
  background-color: #f2f2f2;
  color: #333;
  text-align: left;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #ddd;
}

table th, table td {
  text-align: left;
}

import './App.css';

 

ローカルの画面を見ると、良い感じのデザインになりました。あとは画像のプレビューやラベルの日本語化などしても良いかもしれません。

おわりに

今回はCloud Vision APIを利用して簡単な画像認識アプリを実装しました。

画像認識してラベリングした結果をDBに保存するなどするとより実用的なアプリになるかと思います。

Reactアプリの環境構築をする

create-react-appでReactのアプリの環境を構築します。typescriptを利用できるように–templateでtypescriptを指定します。

$ npx create-react-app gemini-chat-bot --template typescript

Gemini APIを利用する際に必要なaxiosのライブラリをインストールしておきます。

$ npm install axios

Gemini APIからAPI Keyを発行する

Google AI Studio

The fastest path from prompt to producti…

aistudio.google.com

Google AI Studioにログインし、「Create API Key」からAPI Keyを取得します。Keyは一度のみ表示されるので、コピーして保存しておきましょう。

Keyを保存したら、.envファイルを作成し以下のように環境変数を設定します。

creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。

REACT_APP_GEMINI_API_KEY=key名

Gemini APIの疎通確認

実際にGemini APIとの疎通ができるか確認してみます。POSTする内容はGoogle AI StudioにあるAPI keyの下のcurlコマンドを参考します。

URLのkeyのところは先ほど設定した環境変数であるprocess.env.REACT_APP_GEMINI_API_KEYを指定します。まずは疎通確認のため、送信するテキストを「こんにちは」に固定します。

const response = await axios.post(
  `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.REACT_APP_GEMINI_API_KEY}`,
  {
    contents:[
      {
        parts:[
          {
            text: "こんにちは"
          }
        ]
      }
    ]
  },
  {
    headers: {
      "Content-Type": "application/json"
    }
  }
);

これで実行して、コンソールにレスポンスのデータを表示するようにすると以下のように「こんにちは」に対しての回答が格納されていることがわかります。

テキストを入力したらGemini APIを通して返ってくるようにする

現状だと、「こんにちは」の固定文字になっているため、ユーザーが入力したテキストを送れるようにします。

HTMLにinputタグを追加し、onChangeで入力したらinputTextに値を格納するようにします。その流れで処理を実行している間はisLoading変数をtrueにして「現在、問い合わせ中です…」という文言を表示するようにしました。

また、react-markdownライブラリをインストールして、レスポンスデータをHTMLに変換して、表示するようにしました。

import axios from "axios";
import { useState } from "react";
import ReactMarkdown from "react-markdown";
import styles from "./styles.module.css"

const Chat = () => {
  const [responseMessage, setResponseMessage] = useState<string>("");
  const [inputText, setInputText] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const sendMessage = async () => {
    setIsLoading(true);
    try {
      const response = await axios.post(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.REACT_APP_GEMINI_API_KEY}`,
        {
          contents:[
            {
              parts:[
                {
                  text: inputText
                }
              ]
            }
          ]
        },
        {
          headers: {
            "Content-Type": "application/json"
          }
        }
      );
      
      const responseContent = response.data.candidates[0].content;
      const responseParts = responseContent.parts.map((part: { text: string }) => part.text).join("\n");
      setResponseMessage(responseParts);
      setIsLoading(false);
    } catch (error) {
      console.error(`Gemini API has error occured: ${error}`);
    }
  };

  return (
    <div>
      <h1>Gemini Chat Bot</h1>
      <div>
        { isLoading ? <p>現在、問い合わせ中です...</p> : null}
        <ReactMarkdown>{responseMessage}</ReactMarkdown>
      </div>
      <div>
        <input
          type="input"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
        <button onClick={sendMessage}>送信</button>
      </div>
    </div>
  )
}

export default Chat;

上記を実装すると、こんな感じになりました。

デザインをあてて完成

最後にデザインを当てます。せっかくなのでGeminiを使ってみました。

GeminiにHTMLのコードを渡して、チャット形式の良い感じのCSSを当ててと聞いて反映させると以下のようになりました。

React

ReactはMeta(旧Facebook)が作成したライブラリで、UIを作るためのコンポーネントという概念が特徴的です。

Reactには様々な機能が備わっていますが、そのほとんどがUI部分の構築をサポートする機能であるため、フレームワークではなくライブラリに分類されます。

2013年にオープンソース化された後は、Metaを中心として各種開発コミュニティによって維持管理されています。

JSX

Reactでは、React要素を作成するためにReact APIのReact.createElementを利用していますが、JSXを使うとReact要素をより簡単に生成することができます。

JSXはJavaScriptの拡張言語で、JavaScriptとHTMLを掛け合わせて使えるようにしたものです。JSXは最終的にReact要素を生成します。

1. JSX→React.createElementの式に変換
2. React要素を生成

JSXは階層構造で、最上位コンポーネントは並列にできません。不要なdivタグを使いたくない場合などは、HTMLタグとして出力されないReact.Fragmentを使います。

<React.Fragment>
  <div></div>
  <div></div>
</React.Fragment>

//省略した場合
<>
  <div></div>
  <div></div>
</>

コンポーネント

Reactのコンポーネントは、見た目と機能を持つUI部品のようなものです。

コンポーネントを使うことで、コードの再利用性が高まります。また、コンポーネントごとにファイルを分けることでコードの見通しがよくなり、コードの修正に対しても変更しやすくなります。

Reactで扱えるコンポーネントは、クラスコンポーネントと関数コンポーネントの2種類です。

クラスコンポーネント

クラスコンポーネントは、React.Componentを継承したクラスによって定義されます。stateやライフサイクルなどを最初から持っている点が特徴です。

import React from 'react';

class Button extends React.Component {
  render() {
　   return (
　     <button>テストボタン</button>
　　　  ); 　
  　　} 　
　}

export default Button;

関数コンポーネント

2020年にバージョン16.7でReact Hooksが登場したことで、クラスコンポーネントと同様の機能を関数コンポーネントが使えるようになりました。クラスコンポーネントと異なり、記述量を少なく書くことができ、現在こちらが主流となっています。

function Button() {
  return (
    <button>テストボタン</button>
  );
}

export default Button;

default export

推奨されるexport方法で、1ファイル1exportです。アロー関数と名前付き関数のdefault exportがあります。

// アロー関数のdefault export
const Button = (props) => {
  return <button>テストボタン</button>
}
export default Button;

// 名前付き関数のdefault export
export default function Button = (props) => {
  return <button>テストボタン</button>
}

名前付きexport

1ファイルから複数モジュールをexportしたいときは、Reactではエントリポイントでよく使います。

export {default as Button} from './Button'
export {default as Link} from './Link'

基本的にReactのコンポーネントはdefault exportしており、Button.jsxだとしても中身のコンポーネントはdefault exportされているので、defaultという名前でexportされています。

読み込み時もdefaultという名前でインポートされ、エントリポイントは様々なdefault exportされたコンポーネントをひとまとめにしているため、同じdefaultだと被ってしまうので、asを使って別名をつける必要があります。

React Hooks

クラスコンポーネントでしか使えなかった、コンポーネント内で状態管理する「state」、コンポーネントの時間の流れに基づく「ライフサイクル」がReact Hooksを使うことで関数コンポーネントでも使えるようになりました。

つまり、React Hooksの登場によりクラスコンポーネントでしかできないことがなくなりました。

state

Reactのコンポーネントは、stateというアプリケーションの状態を表すためのデータを持っています。stateによって、コンポーネントをどのようにレンダリングするかを指定することが可能です。

コンポーネント内の要素をDOMで直接書き換えるのは仮想DOMの良さが失われ、パフォーマンスが落ちるため、stateを使って新しい値を使って再レンダリングさせる必要があるためです。

コンポーネントは、stateが変更された時とpropsが変更された時に再レンダリングされます。

useState関数を呼び出すと、各コンポーネントのstateを作ることが可能です。コンポーネントに格納されたstateをsetState関数で変更すると、コンポーネントを自動で更新することが可能です。

ライフサイクル

ライフサイクルとは、コンポーネントが生まれてから削除されるまでの時間の流れです。ライフサイクルメソッドを使うと、その時点に応じた処理を実行できます。

クラスコンポーネント時代ではcomponentDidMount()、componentDidUpdate()、componentWillUnmount()を使っていたが、Hooks時代ではuseEffectを使ってライフサイクルを表現しています。

3種類のライフサイクル

1. Mouting コンポーネントが生成される期間
2. Updating コンポーネントが変更される期間
3. Unmounting コンポーネントが削除される期間

useEffectではレンダリングによって引き起こされる処理をフックにして使います。useEffectに第二引数には配列を渡すことが可能で、配列に指定した値が変更された時に呼び出されます。

useEffect(() => {
  console.log(‘test’)
}, [trigger])

クリーンアップ

クリーンアップとはイベントリスナの削除、タイマーのキャンセルなどのことです。クリーンアップ関数をreturnすると、2度目以降のレンダリング時に前回のuseEffectを消すことができます。

クリーンアップは、コンポーネントがUnmountされる時に実行されますが、次のrender前にも実行されます。