[Javascript] url文字列の生成方法でfetch関数がエラーになったりならなかったりする

Question

実現したいこと

JavaScript（Next.js）で自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、url文字列の生成方法でfetch関数がエラーになったりならなかったりします。

後述するソースコードのようにバッククォートを使ったURL文字列の中に変数埋め込みで生成したurl文字列だと、バックエンド側でパラメーターが"undefined"に変換されてエラーになります。

解消方法をご存じの方いたらよろしくお願いしまします。

発生している問題・分からないこと

先述したとおりURL文字列の中に変数埋め込みで生成したurl文字列だと、バックエンド側でパラメーターの値が"undefined"に変換されてエラーになります。

該当のソースコード

export async  function fetch(num) {
  console.log(num)// -> 0
  let param1= num;
  let param2= num+3;
  const url1 =`http://localhost:3000/top?paramA=${param1}&paramB=${param2}`;
  const url2 =`http://localhost:3000/top?paramA=${0}&paramB=${3}`;

  const res = await fetch(url1);          //url1はバックエンド側でparamAの値が"undefined"に置き換わられていてエラーになるが、url2はちゃんと数値が渡されていてエラーにならない
  const result = await res.json();
  return result
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

バックエンド側でデバックしたらリクエストパラメーターの値が"undefined"に置き換わられていてエラーになる

※追記
コンソール上でurl1を確認したら、
http://localhost:3000/top?paramA=0&paramB=3
と出力されました。

Comments

[maisumakun]

const url1の次の行あたりでconsole.log(url1)としたら、どんな結果を得られますか？

[shoco]

コメントありがとうございます。
コンソール上で確認したら、
http://localhost:3000/top?paramA=0&paramB=3
と出力されました。（画像追加しました。）

[maisumakun]

> バックエンド側でパラメーターの値が"undefined"に変換されてエラーになります。

これはどのような方法で確認しましたか？

[int32_t]

症状の理解が間違っている可能性はありませんか? 実際には質問文のコード以外の方法で http://localhost:3000/top にアクセスしているとか。

[otn]

url1とurl2への代入直後に、
console.log(url1===url2);
でおそらく true が表示されると思いますが、そうすると生成されたURLは同一なので、
> url文字列の生成方法でfetch関数がエラーになったりならなかったりします。
という推測が間違っていたことが分かります。
・ここに書いてない部分のコードで動作に違いがあるので、結果が違う（url1とurl2を変えた以外の原因）
・結果が違うと思ったのが勘違い
のどちらかということになります。後者はおそらくなさそうなので（具体的な状況が書かれてないので、ないとは言い切れませんが）、前者だと思います。

[shoco]

>maisumakunさん
VSコード上でデバック実行させて確認しました。
VSコード上でBE側のパラメーター取得のコードの箇所でブレークポイントを付けた状態でデバック実行させておき、フロント側でfetch関数が実行されるとパラメーター取得の箇所で止まるのでその時に変数の中を確認しました。

[shoco]

皆さんコメントありがとうございます。
いろいろ調べてみてバックエンド側のコーディングの仕方にも問題があるような気がしてきたので、
まずはそちらの原因も探してみたいと思います。

[maisumakun]

> フロント側でfetch関数が実行されるとパラメーター取得の箇所で止まるのでその時に変数の中を確認しました。

ブラウザ側開発ツールのネットワークタブも確認してみてください。実際に送られた値が確認できます。

Answer 1

理由はわかりませんが
export async function fetch(num = 0) {...}
とデフォルト引数を設定したら解消しました。

Comments

[int32_t]

それで直るということは、引数なしでfetch()を呼んでいるコードがどこかにあるということですね。

ところで fetch API の fetch() と掲載コードの自作 fetch() が同じ名前なのは大丈夫なんですかね。

Answer 2

getで渡す限りundefinedに書き換わることはなさそうなのでもしかしたら受け取る側がpostを想定しているとかそういうレベルの勘違いのようなきがします

Comments

[shoco]

回答ありがとうございます。
理由はわかりませんが
export async function fetch(num = 0) {...}
とデフォルト引数を設定したら解消しました。