{{ }}（ダブルカーリーブレイシス）にテキストを入力する方法。はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】

▶︎完全版はこちら

【2024年最新版】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】

▶︎ダイジェスト動画はこちら

今回は「{{ }}」を使ってTypeScriptで定義したテキストをHTMLに埋め込む方法を解説します。前回、在庫情報を「stock」という名前で紐付けましたが、今回は「name」という名前で商品の名前を表示してみます。

---

手順

TypeScriptファイルでの変数定義
テキスト（文字列）を表示するには、TypeScriptファイルでそのテキストを変数に代入します。変数に文字列を代入する場合、文字列をシングルクォーテーション（'）またはダブルクォーテーション（"）で囲む必要があります。

typescript
export class ProductListComponent {
  name: string = "iPhone";
}

• ポイント:

  • ダブルクォーテーション：シフトキーを押しながら数字の2を押します。

  • シングルクォーテーション：シフトキーを押しながら数字の7を押します。

どちらでも構いませんが、日本語を扱う場合はダブルクォーテーションが一般的です。

HTMLファイルでの表示
HTML側で、{{ }}を使って先ほど定義したname変数を埋め込みます。

html
<h1>{{ name }}</h1>

動作確認
このコードでページをリロードすると、<h1>タグの中にnameの値である「iPhone」が表示されます。

---

演習課題

以下のステップを試してみてください：

1. 商品名を変更する
   TypeScriptファイルでnameを"iPad"や"Apple Watch"に変更してみましょう。

2. HTMLの更新を確認
   変更後、HTMLで自動的に新しい商品名が表示されることを確認してください。

---

注意点

• 文字列は必ずクォーテーションで囲む
  文字列を直接代入する場合、クォーテーションで囲まないとエラーになります。

• 保存の習慣
  ソースコードを変更した際は、忘れずに保存しましょう。

  • MacではCommand + S、WindowsではCtrl + Sを使うと便利です。

---

このように「{{ }}」を使うことで、TypeScriptで定義した動的なデータをHTMLに簡単に表示できます。次回は、さらに複雑なデータの操作方法について解説していきます！