Angularにはprops概念は無いのでpropsを学ぶ。

chatGPTで勉強をしています。
まず、筆者は Angularでよく開発しています。

## Angularには、propsはありますか？

Angularには、Reactのpropsと直接的に対応する概念として「入力（Inputs）」と「出力（Outputs）」があります。

Reactでは、propsを使用して親コンポーネントから子コンポーネントへデータを渡します。同様に、Angularでは@Input()デコレータを使用して親コンポーネントから子コンポーネントへデータを渡すことができます。

## InputとOutputの実装例を元に使い方

もちろん、Angularの`@Input()`と`@Output()`デコレータを使って、親子コンポーネント間のデータの受け渡しとイベントの伝播の方法を詳しく説明します。

### 1. `@Input()`を使用してデータを子コンポーネントに渡す

親コンポーネントである`ParentComponent`が`ChildComponent`にデータを渡す例を見てみましょう。

**ParentComponent**:
```typescript
@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = 'Hello from Parent Component!';
}
```

**ChildComponent**:
```typescript
@Component({
  selector: 'app-child',
  template: `
    <div>{{ childMessage }}</div>
  `
})
export class ChildComponent {
  @Input() childMessage: string;
}
```

この例では、`ParentComponent`が`ChildComponent`に`childMessage`という名前の`@Input()`を通じてデータを渡しています。

### 2. `@Output()`を使用して子コンポーネントから親コンポーネントへイベントを伝播する

子コンポーネントでのボタンクリックイベントを親コンポーネントに伝える例を見てみましょう。

**ChildComponent**:
```typescript
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendEvent()">Click me!</button>
  `
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  sendEvent() {
    this.childEvent.emit('Event from Child Component');
  }
}
```

**ParentComponent**:
```typescript
@Component({
  selector: 'app-parent',
  template: `
    <app-child (childEvent)="handleChildEvent($event)"></app-child>
  `
})
export class ParentComponent {
  handleChildEvent(event: string) {
    console.log(event);  // Will log: "Event from Child Component"
  }
}
```

この例では、`ChildComponent`が`childEvent`という名前の`@Output()`イベントを発火させ、それを`ParentComponent`が受け取っています。

このように、Angularの`@Input()`と`@Output()`デコレータを使用することで、親子コンポーネント間のデータの受け渡しとイベントの伝播を簡単に実現することができます。

## Reactのpropsとは

Reactの`props`は、Reactコンポーネントの入力として受け取るデータのことを指します。`props`は、コンポーネントの再利用性を高めるために、親コンポーネントから子コンポーネントへデータを渡す際に使用されます。`props`は読取専用であり、子コンポーネント内でその値を変更することはできません。

以下は、Reactの`props`の基本的な使用方法を示す例です。

**親コンポーネント**:
```javascript
function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}
```

**子コンポーネント**:
```javascript
function ChildComponent(props) {
  return <div>{props.message}</div>;
}
```

この例では、`ParentComponent`から`ChildComponent`へ`message`という名前の`props`が渡されています。子コンポーネント内では、この`props`を使用してメッセージを表示しています。

`props`の特徴:
1. **読取専用**: `props`は不変であり、コンポーネント内でその値を変更することはできません。
2. **親から子へ**: `props`は常に親コンポーネントから子コンポーネントへデータを渡すために使用されます。
3. **任意のデータを渡せる**: 文字列、数値、配列、オブジェクト、関数、React要素など、ほとんどのタイプのデータを`props`として渡すことができます。
4. **型チェック**: `propTypes`を使用することで、`props`の型を指定し、開発中に型の不一致に関する警告を受け取ることができます。

総じて、`props`はReactコンポーネント間のデータの受け渡しを容易にし、コンポーネントの再利用性と予測可能性を高めるための重要な概念です。

## propsの実装例

もちろん、Reactの`props`に関する詳しい使い方と実装のポイントを、上記の実装例をベースに説明いたします。

### 1. `props`の基本的な使用方法

親コンポーネントから子コンポーネントにデータを渡す場合、親コンポーネントのJSX内で属性としてデータを設定します。

**親コンポーネント**:
```javascript
function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}
```

子コンポーネントでは、このデータを`props`オブジェクトを通じて受け取ります。

**子コンポーネント**:
```javascript
function ChildComponent(props) {
  return <div>{props.message}</div>;
}
```

### 2. 複数の`props`を渡す

1つ以上の`props`を子コンポーネントに渡すことができます。

```javascript
function ParentComponent() {
  return <ChildComponent message="Hello" author="Parent" />;
}

function ChildComponent(props) {
  return <div>{props.message} from {props.author}!</div>;
}
```

### 3. 子コンポーネント内で`props`を変更しない

`props`は読取専用です。子コンポーネント内で直接変更することはできません。変更を試みると、Reactはエラーを投げます。

### 4. デフォルトの`props`を設定する

`defaultProps`を使用して、`props`にデフォルトの値を設定することができます。

```javascript
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

ChildComponent.defaultProps = {
  message: "Default Message"
};
```

### 5. `props`の型チェック

`propTypes`を使用して、`props`の型を指定し、型の不一致に関する警告を受け取ることができます。`prop-types`ライブラリを使用する必要があります。

```javascript
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

ChildComponent.propTypes = {
  message: PropTypes.string.isRequired
};
```

この例では、`message`が文字列であることを期待しており、必須の`props`であることを示しています。

### 6. 子から親へのデータの伝達

子コンポーネントは、関数を`props`として受け取り、その関数を実行することで親コンポーネントにデータやイベントを伝えることができます。

```javascript
function ParentComponent() {
  function handleChildClick(data) {
    console.log(data);
  }
  
  return <ChildComponent onClick={handleChildClick} />;
}

function ChildComponent(props) {
  return <button onClick={() => props.onClick("Data from Child")}>Click me</button>;
}
```

この方法で、子コンポーネントから親コンポーネントへの通信を実現できます。

これらの基本的なポイントを理解することで、Reactの`props`を効果的に使用して、コンポーネント間のデータの受け渡しを行うことができます。