1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

テンプレートリテラルと${}の使い方

1
Posted at

こんにちは!
最近、こんな感じで編み物カウントアプリを作りました...!

スクリーンショット 2026-03-22 10.35.42.png

残り段数(ゲージの上部分)は

`あと${remainNumber}段`

と表現しています。

...いつもの文字列囲う'(シングルクォート)や"(ダブルクォート)ではありませんね。
このようにバッククォート(`)で囲んだ文字列のことをテンプレートリテラルと言います。

テンプレートリテラルでできること(一部)

①変数を埋め込める
先ほど触れたことと一緒ですね。

`あと${remainNumber}段`

②改行する
テンプレートリテラルでは、改行もそのまま文字列として扱われます。

(window.confirm(
`本当に
削除
しますか?`)) 

↑のようにすると、以下画像のようになります。
スクリーンショット 2026-03-22 11.19.00.png

③計算や処理を書ける

const a = 2
const b = 3
`${a + b}` // → 5

${ }を使うことで、文字列の中に変数や計算結果を埋め込めます。

あとがき

以上、初心者の気づきでした。
AIに書かせていると気づかないかもしれない部分なので、自分で手を動かすって大事ですね!

また次回の記事でお会いしましょう!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?