LoginSignup
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kenogi

Reactのコンポーネントで意識すべきこと

Posted at

chatGPTで勉強をしています。

Reactのコンポーネントで意識すべきこと

React のコンポーネントを設計・開発する際に意識すべきことは多岐にわたりますが、以下に主要なポイントをいくつか挙げます。

  1. 再利用性:

    • コンポーネントは再利用可能な単位で設計することが望ましい。これにより、コードの重複を避け、メンテナンスを容易にします。

  2. 単一責任原則 (Single Responsibility Principle: SRP):

    • 各コンポーネントは一つのタスクや機能のみを持つべきです。これにより、コンポーネントの再利用性やテスタビリティが向上します。

  3. 不変性 (Immutability):

    • React では、state や props を直接変更せず、新しいオブジェクトや配列を作成して更新することが推奨されています。これにより、パフォーマンスの最適化やバグの発生を防ぐことができます。

  4. 状態管理:

    • 大規模なアプリケーションでは、状態管理ライブラリ (例: Redux, MobX) を導入して、アプリケーション全体の状態を一元的に管理することを検討すると良いでしょう。

  5. ライフサイクルメソッドの理解:

    • コンポーネントのライフサイクルを理解することで、リソースの取得や解放、サードパーティライブラリの統合などを適切に行うことができます。

  6. パフォーマンス:

    • 不要なレンダリングを避けるために、shouldComponentUpdate や React.memo を使用してパフォーマンスを最適化することが考慮されるべきです。

  7. 型安全性:

    • TypeScript や Flow のような静的型チェッカーを使用して、型安全性を確保することで、バグを事前に検出することができます。

  8. テスト:

    • コンポーネントの動作を保証するために、ユニットテストやエンドツーエンドテストを導入することを検討してください。

  9. アクセシビリティ:

    • すべてのユーザーにとって使いやすい UI を提供するために、アクセシビリティを考慮したコンポーネントの設計を心掛けるべきです。

  10. スタイリング:

    • CSS-in-JS ライブラリや CSS Modules のようなツールを使用して、コンポーネントごとのスタイルのスコープを確保すると良いでしょう。

これらのポイントは、React のベストプラクティスの一部です。プロジェクトの要件や状況に応じて、これらのポイントを柔軟に取り入れることが重要です。

Reactのコンポーネントで意識すべきことを３つ

上記のポイントを3つに絞り込むのは難しいですが、一般的なReactの開発において最も基本的かつ重要と思われる3つのポイントを選ぶとすれば、以下のようになります:

  1. 再利用性:

    • コンポーネントは再利用可能な単位で設計することが望ましい。再利用性を意識することで、コードの維持や拡張が容易になります。

  2. 不変性 (Immutability):

    • Reactの主要な特徴として、stateやpropsの直接変更を避けることが推奨されています。この不変性の原則を守ることで、パフォーマンスの最適化やバグの発生を防ぐことができます。

  3. 状態管理:

    • 大規模なアプリケーションや複数のコンポーネント間でのデータの流れを管理する場面では、状態管理の方法を明確にすることが重要です。適切な状態管理をすることで、アプリケーションの振る舞いが予測しやすくなります。

これらの3つのポイントは、Reactのコンポーネント設計・開発の基盤として非常に重要です。しかし、上記の10のポイントすべてが重要であり、具体的なプロジェクトや要件に応じて優先度が変わる可能性があることを理解することも大切です。

ひとつずつ要点を深掘りしていきます。

例

もちろん、それぞれのポイントを具体的な実例を使って説明します。

1. 再利用性

実例:
あるウェブアプリで、複数のページや場所で同じボタンデザインを使用しているとします。このボタンのデザインや振る舞いが変わる場合、それぞれの場所で修正を行うのは非効率的です。

解決策:
ボタンを独立したReactコンポーネントとして作成します。これにより、一箇所での変更が他のすべての場所に反映されるため、メンテナンスが容易になります。

function CustomButton(props) {
  return <button className="custom-button" {...props}>{props.children}</button>;
}

2. 不変性 (Immutability)

実例:
配列の中の特定のアイテムを更新する必要があるとします。

悪い方法:
直接そのアイテムを変更すると、Reactの再レンダリングの最適化が機能せず、不要な再レンダリングが起こる可能性があります。

function updateItem(items, index, newValue) {
  items[index] = newValue;
  return items;
}

良い方法:
新しい配列を作成し、その中で特定のアイテムのみを変更します。これにより、Reactの再レンダリングの最適化が効果的に機能します。

function updateItem(items, index, newValue) {
  return [
    ...items.slice(0, index),
    newValue,
    ...items.slice(index + 1),
  ];
}

3. 状態管理

実例:
ユーザーのアクションに応じて、複数のコンポーネントでデータを共有したり、更新したりする必要がある場合。

悪い方法:
親コンポーネントから子コンポーネントに頻繁にpropsを渡すと、コードの可読性やメンテナンスが難しくなります。

良い方法:
状態管理ライブラリ（例: ReduxやContext API）を使用して、アプリケーションの状態を一元的に管理します。これにより、任意のコンポーネントから状態にアクセスしたり、更新したりすることが容易になります。

const UserContext = React.createContext();

function App() {
  const [user, setUser] = React.useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Navbar />
      <UserProfile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const { user } = React.useContext(UserContext);
  return <div>Welcome, {user.name}!</div>;
}

function UserProfile() {
  const { user, setUser } = React.useContext(UserContext);
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={() => setUser(null)}>Logout</button>
    </div>
  );
}

上記の例は簡単化されていますが、各ポイントの基本的な考え方や利点を示しています。

気になったこと、stateやpropsの直接変更を避けることが推奨

Reactの主要な特徴として、stateやpropsの直接変更を避けることが推奨されています。
参照渡をしてはいけないということ?

はい、正確には、Reactのstateやpropsは不変性を保持するべきです。これは、オブジェクトや配列などの参照型のデータを直接変更せず、新しいオブジェクトや配列を作成して更新することを意味します。

Reactが再レンダリングを判断する際、オブジェクトや配列の参照を浅く比較するため、参照が変わらない限り、更新が発生しないと判断されます。この性質を活用し、不要な再レンダリングを避けるために不変性を維持することが推奨されています。

具体的な例を以下に示します:

直接変更する場合（推奨されない）:

this.state = {
  items: [1, 2, 3]
};

// 直接変更
this.state.items.push(4);
this.setState({ items: this.state.items });

この方法では、items配列の参照が変わらないため、Reactの再レンダリングの最適化が機能しません。

新しい配列を作成して更新する場合（推奨される）:

this.state = {
  items: [1, 2, 3]
};

// 新しい配列を作成して更新
this.setState({ items: [...this.state.items, 4] });

この方法では、新しい配列が作成され、items配列の参照が変わるため、Reactの再レンダリングの最適化が効果的に機能します。

同様の理由で、propsも直接変更すべきではありません。propsは親コンポーネントから受け取るデータであり、子コンポーネントはそれを直接変更するべきではありません。必要に応じて、親コンポーネントに変更を通知し、親コンポーネントが状態を更新するようなフローを取るべきです。

Angularの場合でも参照渡をしてはいけない?

Angular は React とは異なるフレームワークであり、データの取り扱いや変更検知のメカニズムも異なります。Angular におけるデータ変更の概念を理解するために、以下の点を強調します：

  1. 変更検知 (Change Detection):
    Angular の変更検知は、デフォルトではコンポーネントのプロパティが前回と異なる値になったときにトリガーされます。これは、プリミティブ型のデータ（数値、文字列、ブール値）だけでなく、オブジェクトや配列の参照が変わったときも適用されます。

  2. 不変性 (Immutability):
    Angular では、不変性を持たせることは推奨されますが、強制されるわけではありません。しかし、不変性を尊重することで、変更検知の最適化やアプリケーションの予測可能性が向上します。特に、OnPush 変更検知戦略を使用する場合、不変データは非常に有効です。

  3. OnPush 変更検知戦略:
    この戦略を使用すると、コンポーネントは入力プロパティの参照が変更されたとき、またはコンポーネント内での明示的なイベント（例：ボタンクリック）が発生したときのみ変更検知が実行されます。このため、不変性を維持することで、この戦略の効果を最大限に引き出すことができます。

結論:
Angular でも、不変性を維持することは良い実践とされています。特に、アプリケーションのパフォーマンス最適化や変更検知の予測可能性を高めるためには、不変性の原則を尊重することが推奨されます。しかし、React のように強制されるわけではないので、具体的なアプリケーションの要件や状況に応じて適切なアプローチを選択することが大切です。

Angularでの参照渡しの例と対処方法

了解しました。Angularでの参照渡しの問題点と、それを不変性を維持することでどのように対処するかの例を以下に示します。

1. 参照渡しの問題点

Angular コンポーネント内で、親コンポーネントから子コンポーネントにデータを渡す際、オブジェクトや配列を直接変更すると、変更が親コンポーネントに影響を与える可能性があります。

// 親コンポーネント
@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="myData"></app-child>
    <button (click)="logData()">Log Data</button>
  `
})
export class ParentComponent {
  myData = { value: 'original' };

  logData() {
    console.log(this.myData);
  }
}

// 子コンポーネント
@Component({
  selector: 'app-child',
  template: `
    <button (click)="modifyData()">Modify Data</button>
  `
})
export class ChildComponent {
  @Input() data: any;

  modifyData() {
    this.data.value = 'modified';  // これは参照渡しのため、親コンポーネントのデータも変更される
  }
}

上記の例で、子コンポーネントのmodifyDataメソッドを実行すると、親コンポーネントのmyDataも変更されてしまいます。

2. 不変性を維持する対処方法

上記の問題を解決するためには、新しいオブジェクトや配列を作成して更新することで、不変性を維持します。

// 子コンポーネントの修正版
@Component({
  selector: 'app-child',
  template: `
    <button (click)="modifyData()">Modify Data</button>
  `
})
export class ChildComponent {
  @Input() data: any;

  modifyData() {
    this.data = { ...this.data, value: 'modified' };  // 新しいオブジェクトを作成して更新
  }
}

ただし、この方法では子コンポーネント内でdataの参照が新しくなりますが、親コンポーネントのmyDataの参照は変わらないままです。したがって、この変更を親コンポーネントに通知するためには、追加の方法（例: Outputデコレータを使用したイベントエミッター）が必要です。

このように、不変性を維持することで、データの変更が他の部分に影響を与えることを防ぎ、アプリケーションの動作を予測しやすくします。

4
5
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
Sign upLogin
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?