【React】翻訳のためのAPIを叩くと401エラーが表示されます。エラーを取り除く方法を教えてください

Question

以下の【質問の主旨】についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

画像のアプリでピンク色で囲った矢印をクリックすると、テキストボックスにある英文が日本語文に翻訳されるというアプリを作成しています。

しかし現時点では矢印をクリックしても、何も翻訳されません。またコンソール画面を確認すると401エラーが表示されます。

このエラーを表示させず、コンソール画面には200OKを表示させ、かつ英文の翻訳となる日本語文を右のテキストボックスに表示させるためには、【質問の補足】に上げるコードをどのように修正すれば良いでしょうか？

【質問の補足】

1. App.js

import TextBox from "./components/TextBox";
import Arrows from "./components/Arrows";
import Button from "./components/Button";
import Modal from "./components/Modal";
import { useState } from "react";
import axios from "axios";


const App = () => {
  const [showModal, setShowModal] = useState(null);
  const [inputLanguage, setInputLanguage] = useState("EN");
  const [outputLanguage, setOutputLanguage] = useState("JA");
  const [textToTranslate, setTextToTranslate] = useState("");
  const [translatedText, setTranslatedText] = useState("");

  const translate = async () => {

    const options = {
      method: 'GET',
      url: 'https://deepl-translate-machine.p.rapidapi.com/v1/translate/text',
      params: {
        target: outputLanguage,
        source: inputLanguage,
        text: textToTranslate
      },
      headers: {
        'X-RapidAPI-Key': process.env.RAPID_API_KEY,
        'X-RapidAPI-Host': process.env.RAPID_API_HOST
      }
    };

    try {
      const response = await axios.request(options);
      console.log(response.data);
      setTranslatedText(response.data);
    } catch (error) {
      console.error(error);
    }
  }

  const handleClick = () => {
    setInputLanguage(outputLanguage);
    setOutputLanguage(inputLanguage);
  }

  return (
    <div className="app">
      {!showModal && <>
        <TextBox
          selectedLanguage={inputLanguage}
          style='input'
          setShowModal={setShowModal}
          textToTranslate={textToTranslate}
          setTextToTranslate={setTextToTranslate}
          setTranslatedText={setTranslatedText}
        />
        <div className="arrow-container" onClick={handleClick}>
          <Arrows />
        </div>
        <TextBox 
          selectedLanguage={outputLanguage}
          style='output'
          setShowModal={setShowModal}
          translatedText={translatedText}
        />
        <div className="button-container" onClick={translate}>
          <Button />
        </div>
      </>}

      {showModal && 
        <Modal 
          setShowModal={setShowModal}
          chosenLanguage={showModal === "input" ? inputLanguage : outputLanguage}
          setChosenLanguage={showModal === "input" ? setInputLanguage : setOutputLanguage}
      />}
    </div>
  );
}

export default App;

2. TextBox.js

import SelectDropDown from "./SelectDropDown";

const TextBox = ({ 
  selectedLanguage, 
  style, 
  setShowModal, 
  textToTranslate, 
  setTextToTranslate,
  translatedText,
  setTranslatedText
}) => {
  return (
    <div>
      <SelectDropDown
        style={style}
        setShowModal={setShowModal}
        selectedLanguage={selectedLanguage}
      />
      <textarea
        placeholder={style === "input" ? "Enter text" : "Translation"}
        disabled={style === "output"}
        onChange={(e) => setTextToTranslate(e.target.value)}
        value={style === "input" ? textToTranslate: translatedText }
      />
    </div>
  )
}

export default TextBox;

3. そのほかのコード

App.jsとTextBox.js以外のコードはこちらのGitHubのリポジトリにまとめています。

4. 英文翻訳のためのAPI

英文翻訳のためのAPIはRapid.api の中に登録されている”DeepL Translate Machine”を使用しています。

”DeepL Translate Machine”を利用するためには、Rapid.apiにアカウントを作成し、DeepL Translate Machineのクレジットカード番号を登録する必要がありますが、すでにどちらの作業も終えています。

なお、こちらのGitHubのリポジトリにある翻訳アプリは同じく”DeepL Translate Machine”を利用しており、異なる言語の翻訳が可能です。このことから今回の質問は”DeepL Translate Machine”ではなく、私のコード側に問題があると思います。

5. .envファイル

「3. そのほかのコード」で挙げたGitHubリポジトリ内には、.envファイルは含まれていませんが、ローカル開発環境内には.envファイルが存在します。

その.envファイルの内容は.env.sampleファイルの内容に準じており、”DeepL Translate Machine”が発行したkeyとHost名を使用しています。

6. 401エラーの確認

401エラーとは、ユーザー名・パスワードなどが間違っておりWebサイトの認証に失敗したときに表示されると思います。ですが.envファイルのkeyとHost名はコピペしたもので、間違いはないことを何度も確認しています。

7. 文章を翻訳するときのGETメソッド（2023年7月25日追記）

英語の文章を日本語の文章を翻訳するときに叩くAPIのコードスニペットは以下の通りです。

コードはRapid API内にある"DeepL Translate Machine"が提示しているものから、"X-RapidAPI-Key"とX-RapidAPI-Hostのプロパティ値を伏せたものです。

const axios = require('axios');

const options = {
  method: 'GET',
  url: 'https://deepl-translate-machine.p.rapidapi.com/v1/translate/text',
  params: {
    target: 'JA',
    source: 'EN',
    text: 'NASA was established in 1958, succeeding the National Advisory Committee for Aeronautics (NACA), to give the U.S. space development effort a distinctly civilian orientation, emphasizing peaceful applications in space science.'
  },
  headers: {
    'X-RapidAPI-Key': API_KEY,
    'X-RapidAPI-Host': HOST_NAME
  }
};

try {
	const response = await axios.request(options);
	console.log(response.data);
} catch (error) {
	console.error(error);
}

---

以上、ご確認のほどよろしくお願い申し上げます。

Comments

[退会済みユーザー]

自信があるわけでなく、見ててちょっと疑問に思ったことを書きますね。
url: 'https://deepl-translate-machine.p.rapidapi.com/v1/translate/text',
params: {
target: outputLanguage,
source: inputLanguage,
text: textToTranslate
},
で、URLの中にtextという多分、これは変数ではないかと思う物が入っているんですけど、これをここで指定して、後からtextで宣言するのはマズイような気がします。

[echizeyayota]

mike2mike4さん。
コメントありがとうございます。

mike2mike4さんからコメントをいただいたことで、【質問の補足】に「7. 文章を翻訳するときのGETメソッド」（2023年7月25日追記）という項目を追記しました。

url: 'https://deepl-translate-machine.p.rapidapi.com/v1/translate/text',
params: {
target: outputLanguage,
source: inputLanguage,
text: textToTranslate
},

という記述の仕方は、コードスニペットに沿ったものなので、そのまま使っています。
また下記のYouTube動画でも同様に使われています。

https://youtu.be/aFISwq3wteY?t=4078

[退会済みユーザー]

YoutubeにもRapid.api のチュートリアルにも、urlの末尾にtextはないんですが……

[echizeyayota]

mike2mike4さん。
たびたびコメントありがとうございます。

YouTubeの動画について言及をしましたが、そもそもこの動画を補足説明として出すべきではありませんでした。

なぜなら、例示したYouTubeの動画では”Google Translate API Documentation”というAPIを使っており、私の翻訳アプリでは”DeepL Translate Machine”を使っているからです。

https://youtu.be/aFISwq3wteY?t=142

大変、紛らわしいことをしてしまい恐れ入ります。

なおRapid.apiのドキュメンテーションの一部をスクリーンショットとして「7. 文章を翻訳するときのGETメソッド（2023年7月25日追記）」にUPしました。

変数options 内のurlプロパティの値となるurlの最後の文字列には”text”が必要になると思います

念のためにurlプロパティの値を”https://deepl-translate-machine.p.rapidapi.com/v1/translate”とし、 “text”の文字列を省いたもので翻訳を試みましたが、コンソール画面には401エラーが表示されます。

[uky]

> ですが.envファイルのkeyとHost名はコピペしたもので、間違いはないことを何度も確認しています。

process.envで取得をしようとしていますが、
コンポーネント内でその値をconsole.log(process.env.KEY)などしたときにも適切に値が表示されますか？

[echizeyayota]

ukyさん。
コメントありがとうございます。

App.jsで"console.log(process.env.REACT_APP_RAPID_API_KEY);" として接頭辞をつけた上で記述すると、コンソール画面で"DeepL Translate Machine"が提示するAPIキーを取得することができました。

Answer 1

質問にコメントさせていただいたばかりでコメントへの返信を受けていない状態ですが、環境変数が読み込めていないという状況と推測して回答させていただきます。

環境変数が適切に読み込めていないため発生しています。（推測の通りでした）

React（create-react-appで構築しているとき）で.envファイルの環境変数を読み込む際には、
以下のドキュメントで書かれているように、独自の環境変数の読み込みにはREACT_APP_というprefixをつけ、process.env.REACT_APP_のような形で呼んであげる必要があります。

https://create-react-app.dev/docs/adding-custom-environment-variables/

Comments

[echizeyayota]

ukyさん。
コメントありがとうございます

> 独自の環境変数の読み込みにはREACT_APP_というprefixをつけ、process.env.REACT_APP_のような形で呼んであげる必要があります。

ご指摘のとおり、各ファイルでREACT_APP_という接頭辞をつけると、翻訳ができるようになりました！

(App.js)

headers: {
'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
'X-RapidAPI-Host': process.env.REACT_APP_RAPID_API_HOST
}

(.env)

REACT_APP_RAPID_API_KEY=KEY_NUMBER
REACT_APP_RAPID_API_HOST=HOST_NAME

[uky]

解決したようでよかったです！

[echizeyayota]

ありがとうございます！

Answer 2

すみません、詳しくないので本解答するのは本意ではないのですが、スクリーンショット貼り付けたいもので。

React.js使われているんですよね。であれば、Node.jsではなく、JavaScriptの方だと思うんですが……

Comments

[echizeyayota]

mike2mike4 さん。
詳しい説明ありがとうございます。

mike2mike4 さんがスクリーンショットで示されたのは”DeepL Translator”で、そのtranslateというPOSTメソッドではないでしょうか？

(DeepL Translator)
https://rapidapi.com/splintPRO/api/deepl-translator

私が使用しているのは”DeepL Translator Machine”で、そのTranslate Text というGETメソッドです。

(DeepL Translator Machine)
https://rapidapi.com/tipsters/api/deepl-translate-machine

> React.js使われているんですよね。であれば、Node.jsではなく、JavaScriptの方だと思うんですが……

すいません。
React.jsを使っていますが、この文章でおっしゃていることの意味が分かりません。
よろしければもう少し噛み砕いて説明をしていただければ助かります。

[退会済みユーザー]

すみません、DeepL Translator MachineがRapid.api 検索に引っかからないので確認できませんでした。

Node.jsとはJavaScriptを使った「サーバーサイド言語」です。今回フロントエンドで使われるはずなので、JavaScriptとしました。
特に、以下（ChatGPTにて解答）
Node.js: サーバーサイドで実行されるため、ブラウザのDOMやブラウザAPIには直接アクセスできません。代わりに、Node.jsはサーバーサイドの操作に適したAPIを提供します。
なので、動かないのは当然かと。

[退会済みユーザー]

DeepL Translator Machineのリンク先もないんですよね……

[echizeyayota]

mike2mike4さん。
コメントありがとうございます。

> すみません、DeepL Translator MachineがRapid.api 検索に引っかからないので確認できませんでした。

https://rapidapi.com/search/DeepL%20Translate%20Machine

自分のインターネット環境からRapid.apiにログインした状態で、上記のURLにアクセスすると、"DeepL Translator Machine"がヒットします。ご参考になれば幸いです。

> Node.js: サーバーサイドで実行されるため、ブラウザのDOMやブラウザAPIには直接アクセスできません。代わりに、Node.jsはサーバーサイドの操作に適したAPIを提供します。

自分はNode.jsについて学習なので、これについてはっきりしたことは申し上げられません。今後学習する際の参考といたします。

[退会済みユーザー]

私の環境ではリンク踏んでもDeepL Translator Machineは出てこなかったのですが、はて？
まあ、解決したようで良かったです。