LitElement > プロパティ メモ


# LitElement プロパティ

[Properties – LitElement](https://lit-element.polymer-project.org/guide/properties)

# プロパティの定義

例．


```js
class MyElement extends LitElement {
  // Declare properties
  static get properties() { return {
    prop1: { type: String, reflect: true },
    prop2: { type: Number, reflect: true },
    prop3: { type: Boolean, reflect: true },
    prop4: { type: Array, reflect: true },
    prop5: { type: Object, reflect: true }
  };}

  // Initialize properties
  constructor() {
    super();
    this.prop1 = '';
    this.prop2 = 0;
    this.prop3 = false;
    this.prop4 = [];
    this.prop5 = { };
  }
}
```

## プロパティ定義のオプション

* 1. converter
* 2. type
* 3. attribute
* 4. reflect
* 5. noAccessor
* 6. hasChanged

### 1. converter

以下のようにプロパティ名にタイプとかを紐づける機能をさす
`prop1: { type: String, reflect: true },`

### 2. type 

以下の５タイプ

* String
* Number
* Boolean
* Array
* Object

[Properties – LitElement - properties - conversion-type](https://lit-element.polymer-project.org/guide/properties#conversion-type)

### 3. attribute 

attributeにはいくつかの意味がある。

#### 3.1. attributeを別の名前にする

デフォルトでは、attribute＝プロパティ名を小文字（もしくはプロパティ名そのまま）
attributeを設定した場合には名前を変更する事ができる。

##### **before**

```js
myProp: { type: String }`
```
の場合には、
```html
<my-element myprop='this prop string'></my-element>
 or
<my-element myProp='this prop string'></my-element>
```

##### **after**

```js
myProp: { type: String, attribute: 'my-prop' }`
```
の場合には、以下となる。

```html
<my-element my-prop='this prop string'></my-element>
```


#### 3.2. attributeをOFFにする

```js
myProp: { attribute: false }
```

以下のようにHTMLタグ側で、attributeに値を設定しても、
LitElement側のプロパティには値が渡らない。

```html
<my-element myprop='this prop string'></my-element>
```

より詳しくはドキュメントを参照
[Properties – LitElement - properties - observed-attributes](https://lit-element.polymer-project.org/guide/properties#observed-attributes)


### 4. reflect

監視

For example:

```js
// Value of property "myProp" will reflect to attribute "myprop"
myProp: { reflect: true }
```



### 5. noAccessor

```js
myProp: { type: Number, noAccessors: true } 
```

以下のような内部のアクセサが無効になる

```js
// Create custom accessors for myProp
set myProp(value) { this._myProp = Math.floor(value); } 
get myProp() { return this._myProp; }
```

詳しくはドキュメントを参照
[Properties – LitElement - properties#accessors](https://lit-element.polymer-project.org/guide/properties#accessors)


### 6. hasChanged

変更前、変更後の値監視
以下、使用例

```js
  static get properties(){ return {
    myProp: {
      type: Number,
      hasChanged(newVal, oldVal) {
        if (newVal > oldVal) {
          console.log(`${newVal} > ${oldVal}. hasChanged: true.`);
          return true;
        }
        else {
          console.log(`${newVal} <= ${oldVal}. hasChanged: false.`);
          return false;
        }
      }
    }};
  }
  
```


詳しくはドキュメントを参照
[Properties – LitElement - properties#haschanged](https://lit-element.polymer-project.org/guide/properties#haschanged)




# プロパティを使うとき

[Templates – LitElement - bind-properties-to-child-elements](https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements)

>HTMLテキストコンテンツ、属性、ブール属性、プロパティ、およびイベントハンドラのプレースホルダとしてJavaScriptの式を挿入できます。

* 1. Text content: `<p>${this.xxx}</p>`
* 2. Attribute: `<p id="${this.xxx}"></p>`
* 3. Boolean attribute: `?checked="${this.xxx}"`
* 4. Property: `.value="${this.xxx}"`
* 5. Event handler: `@event="${this.xxx}"`


## 1. text content

```
html`<div>${this.prop1}</div>`
```

※タグで囲むのがポイント


## 2. Bind to an attribute

```
html`<div id="${this.prop2}"></div>`
```


## 3. booleanのBind

booleanプロパティは以下のよう、？をバインドしたい変数の先頭に付与する。

```
html`<input type="checkbox" ?checked="${this.prop3}">i like pie</input>`
```

>Boolean attributes are added if the expression evaluates to a truthy value, and removed if it evaluates to a falsy value.
>式が真の値に評価された場合はブール属性が追加され、偽の値に評価された場合は削除されます。

this.prop3==true の場合は以下と同等

```html
<input type="checkbox" checked >i like pie</input>
```

this.prop3==false の場合は以下と同等
```html
<input type="checkbox" >i like pie</input>
```


## 4. event handler

イベントは＠を付ける。

```
html`<button @click="${this.clickHandler}">pie?</button>`
```

イベント実装の例

```
class MyElement extends LitElement {
  ...
    render() {
    return html`
        html`<button @click="${this.clickHandler}">pie?</button>`
    `;
  }
  
  clickHandler(e) {
    console.log(e.target);
  }
}
```