【Node.js】 DeePL APIで取得した「翻訳できる言語一覧」をブラウザ上に表示したい

Question

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

【質問の主旨】

現在、DeePL APIで取得した「翻訳できる言語一覧」をブラウザ上に表示するアプリを作成中です。

下記のserver.jsを実行するとブラウザ画面上に「翻訳できる言語一覧」が表示できると思っていましたが実際には表示されまん。

serever.js のどこを修正すれば、ブラウザに表示できるようになるでしょうか？

import { createRequire } from "module";
const require = createRequire(import.meta.url);

import * as deepl from "deepl-node";

const PORT = 8000;
const axios = require("axios").default;
const express = require("express");
const cors = require("cors");
require("dotenv").config();

const app = express();

app.use(cors());

app.listen(PORT, () => console.log("Server running on PORT " + PORT));

app.get("/languages", async(req, res) => {

  const authKey = process.env.DEEPL_API_KEY; // Replace with your key
  const translator = new deepl.Translator(authKey);

  try {
    for (let i = 0; i < sourceLanguages.length; i++) {
        const lang = sourceLanguages[i];
        console.log(`${lang.name} (${lang.code})`); // Example: 'English (en)'
        res.status(200).json(`${lang.name} (${lang.code})`);
    }
  } catch(err) {
    console.log(err);
    res.status(500).json({message: err});
  }
});

【質問の補足】

1. 全体のコードと手順

server.jsを含む全体のコードとその手順については、それぞれGitHubで公開しています。

2. ターミナル画面では言語一覧を表示できる

このエラーが出る前の1つ前の手順でターミナル画面で言語一覧を表示できるかどうか試してみました。すると下記のように表示することができました。

3. 翻訳する言語一覧を取得するコード

翻訳する言語一覧を取得するコードはdeepl-nodeのListing available languages の記述を参考にしています

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

Comments

[int32_t]

ブラウザに { message: {} } と表示されるということは、catch(err) の方に行ってますよね。サーバ側にエラーが表示されてないでしょうか。

[echizeyayota]

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

自分でも本来必要な記述が漏れていたことに気づき、コードの修正をしました。

https://github.com/echizenyayota/deepl-node_basic_20231015/commit/853df5d127a801b5da3c3e89e025af255db26516

ただそれでもなお、サーバー側（コンソール画面）には翻訳できる言語一覧が表示されたのちに”ReferenceError: lang is not defined”というエラーが表示されます。

Answer 1

こんにちは。

Node.js/Express は使ったことないので勘ですが、
res.status(200).json() っておそらくレスポンスを作るところだと思うので、ループ内でこれを複数回呼び出してるのが変に見えるのと、
err の方では .json({message: err}) ってオブジェクトを渡してますけど、status(200) の方では .json() に文字列を渡してるのが変に見えます。

ループでは欲しいデータの入ったオブジェクトを一つ作って、それを一度だけ res.status(200).json() に渡すようにしたらどうでしょうか。

Comments

[echizeyayota]

Tomatoさん。

コメントありがとうございます。
```res.status(200).json(`${lang.name} (${lang.code})`);``` をfor文の外に出し、
```const sourceLanguages = await translator.getSourceLanguages();``` という記述を加えました（[ドキュメント](https://www.npmjs.com/package/deepl-node#listing-available-languages)によるとこの記述が必須であるにもかかわらず抜けていたので）

[GitHub](https://github.com/echizenyayota/deepl-node_basic_20231015/commit/853df5d127a801b5da3c3e89e025af255db26516)で修正したコードをUPしました。

ただそれでもなおエラーが発生します。

現在、ブラウザ画面では【質問の主旨】で投稿したスクリーンショットと同じエラーが表示され、コンソール画面では、翻訳できる言語一覧が表示されたのちに”ReferenceError: lang is not defined”というエラーが表示されます。

変数```lang```はfor文の中ですでに定義しているはずなのに、なぜ”not defined(未定義)”にされるのかよく分かりません。

[tamoto]

for 文の中で lang を作ってるということは、for 文の中にしか無いということです。
また、ループの中で lang に代入を繰り返しているのは前の値をどんどん上書きしていく動作なので、期待する結果にはならないでしょう。

[echizeyayota]

tamotoさん。
コメントありがとうございます。
map関数を使うと意図通りの動作ができるようになりました。
今後ともどうぞよろしくお願いします。

Answer 2

[ "Bulgarian (bl)", "Czech (cs)", ...] という形式の JSON が欲しいのなら、

res.status(200).json(sourceLanguages.map(lang => `${lang.name} (${lang.code})`));

の1行(forは不要)で動くと思います。

Comments

[echizeyayota]

int32_t さん。
コメントありがとうございます。
map関数を使うと、翻訳言語の一覧をブラウザ上で表示できるようになりました。
今後ともどうぞよろしくお願いします。