getter と setter を使用したデータの修正

公開プロパティが設定されるたびにロジックを実行するには、カスタム setter を作成します。

公開プロパティ用の setter を作成する場合は、getter も作成する必要があります。getter または setter のどちらかに @api でアノテーションを付けます (両方には付けません)。getter にアノテーションを付けることをお勧めします。

プロパティ値を getter と setter に保持するには、フィールドを使用します。この例では、_uppercaseItemName プロパティを使用しています。このプロパティの先頭にアンダースコアが付いているのは、そのプロパティが非公開であることを示しています。

このサンプル <c-todo-item> コンポーネントは、文字列を大文字に変換します。

1<!-- todoItem.html -->
2<template> {itemName} </template>

プロパティ値は、getter を介してテンプレートに渡されます。

1// todoItem.js
2import { LightningElement, api } from "lwc";
3export default class TodoItem extends LightningElement {
4  _uppercaseItemName;
5
6  @api
7  get itemName() {
8    return this._uppercaseItemName;
9  }
10
11  set itemName(value) {
12    this._uppercaseItemName = value.toUpperCase();
13  }
14}

getter および setter を使用する別の例については、lwc-recipes サンプルリポジトリの apiSetterGetter コンポーネントおよび todoList コンポーネントを参照してください。

Tip

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。