Reactで変数や式を文字列の中に埋め込む
はじめに
上記のサイトでReactを勉強していて、async関数を学習している際に、
const timeoutId = setTimeout(async () => {
try {
const response = await fetch(`https://fruit-search.freecodecamp.rocks/api/fruits?q=${query}`);
const data = await response.json();
setResults(data.map(fruit => fruit.name));
} catch (error) {
console.error("Error fetching data:", error);
}
}, 700);
}, [query]);
という記述をしていたので、これを整理していこうと思います。
asyncとは
asyncは JavaScriptのキーワードで、「非同期処理」を行う関数を定義するために使われます。
非同期処理とは、時間がかかる可能性のある処理（データの読み込みなど）を、プログラム全体の実行を止めずにバックグラウンドで行う手法です。
（レストランの裏方で時間のかかる作業を効率的かつ邪魔にならないように処理しているようなもの？）
asyncキーワードをつけると、「この関数は非同期で動きますよ」という宣言になるみたいです。
async function someFunction() { ... }
または
const someFunction = async () => { ... }
のように使われることが多いらしいです。
このとき、async内で記述する非同期処理の前に
await 非同期処理
のような形でawaitを付け加えることが必要みたいです。（詳しくはまた次回学習）
テンプレートリテラル
`https://fruit-search.freecodecamp.rocks/api/fruits?q=${query}`
のように
テンプレートリテラルは逆引用符 () で囲われていて、複数行の文字列や埋め込み式などを埋め込むことができるようです。普通の文字列はシングルクォート ' やダブルクォート " で囲みますが、 テンプレートリテラルは バッククォート（） を使って囲みます。
バッククォート内で${}を使うと、変数や式を文字列の中に埋め込めるようになります。
Reactでテンプレートリテラルを使う理由
ReactではAPI通信（fetchなど）でURLを動的に組み立てる場面が多いからです。
上の例では、queryの中身に応じてURLを動的に変えることができます。
例：
-
query = "apple"
→https://fruit-search.freecodecamp.rocks/api/fruits?q=apple -
query = "banana"
→https://fruit-search.freecodecamp.rocks/api/fruits?q=banana
Pythonのf文字列（フォーマット済み文字列リテラル）の使い方
学生時代にPythonで似たような処理を書いている時に
url = "https://fruit-search.freecodecamp.rocks/api/fruits?q=" + query
みたいな書き方をしていた記憶があり、ふと調べてみたところ、
Python3.6からf文字列（f-strings、フォーマット文字列、フォーマット済み文字列リテラル）という仕組みが導入され、簡単に書けるようになったみたいです。
下記のように記述することができるようです。
query = "apple"
url = f"https://fruit-search.freecodecamp.rocks/api/fruits?q={query}"
print(url)
# 出力: https://fruit-search.freecodecamp.rocks/api/fruits?q=apple
おわりに
基礎的な内容を改めてチュートリアルサイトなどで復習してみると、見た時に言っていることは理解できても、実際にすぐ手が動かないことが多く、まだ理解が甘いなと感じます。
また、ReactのAPI周りも理解を進めていきたいので、引き続きハマった点は記事にしていこうと思います。
Discussion