chatGPTで勉強をしています。
フロントエンドフレームワーク（Vue、Angular、Reactなど）でコンポーネントを作成する際に意識すべきポイントはいくつかあります
1. 再利用性
- コンポーネントは再利用可能であるべきです。特定のビジネスロジックやスタイルに依存しないように設計すると良いでしょう。
2. 単一責任原則
- 一つのコンポーネントは一つの機能または責任を持つべきです。
3. データフロー
- データの受け渡しや状態管理を明確にすることが重要です。Vueでは
propsとemit、Angularでは@Inputと@Outputが一般的です。
4. パフォーマンス
- レンダリングのパフォーマンスを考慮し、不要な再レンダリングを避けるように設計することが重要です。
5. テスト容易性
- 単体テストや結合テストを容易にするために、コンポーネントは疎結合に保つべきです。
6. 可読性とメンテナンス性
- コードは他の開発者が理解しやすく、修正しやすいようにするべきです。
7. セマンティックな命名
- コンポーネントや変数、関数の名前はその機能や役割を明確に表すように選ぶべきです。
8. コードの再利用
- 共通の機能はユーティリティ関数やミックスイン、ディレクティブなどに切り出して再利用すると良いでしょう。
9. UI/UX
- ユーザーインターフェースとユーザーエクスペリエンスも考慮に入れ、使いやすいコンポーネントを作成することが重要です。
10. ドキュメントとコメント
- コンポーネントの使い方や内部ロジックについてのドキュメントとコメントを適切に記述することで、メンテナンスが容易になります。
これらのポイントは一般的なガイドラインであり、プロジェクトやチームのニーズに応じて調整が必要かもしれません。
う〜ん、重要な要素が１０個もあると覚えられない。。。。
この中で３つぐらいに絞り込めるかやってみる。。
コンポーネント作成で意識すべき３ポイント
上記のポイントから最も核心的なものを3つ選ぶのであれば、以下のように絞り込むことができます
-
再利用性と単一責任原則:
- これらの2つのポイントは、効果的なコンポーネント設計の基盤となる考え方です。コンポーネントは再利用可能で、1つの明確な機能や責任を持つべきです。これにより、コードの再利用やメンテナンスが容易になります。
-
データフロー:
- アプリケーションの動作や状態管理は、データの流れを通じて実現されます。これが混乱していると、バグの原因となりやすく、また他の開発者が理解しにくくなります。そのため、明確で一貫したデータフローの設計は非常に重要です。
-
可読性とメンテナンス性:
- コードは常に変更や拡張がされるものです。他の開発者がコードを容易に理解し、変更を加えられるようにするためには、可読性とメンテナンス性を意識する必要があります。これには、セマンティックな命名や適切なドキュメント、コメントが役立ちます。
これらの3つのポイントを重点的に考慮しつつ、プロジェクトの状況やニーズに応じて他のポイントも適宜取り入れることで、高品質なコンポーネント設計が可能となります。
コードでの例
意識すべき「再利用性と単一責任原則」について
Angularでの「再利用性」と「単一責任原則」を実現するシンプルな例を示します。
再利用性の例
再利用可能なボタンコンポーネントを考えます。
button.component.ts:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-button',
template: `
<button (click)="handleClick()">{{label}}</button>
`,
styles: [`
/* ここにスタイルを追加 */
`]
})
export class ButtonComponent {
@Input() label: string;
@Output() onClicked = new EventEmitter<void>();
handleClick() {
this.onClicked.emit();
}
}
このボタンコンポーネントは、ラベルをカスタマイズでき、クリック時のイベントも外部から受け取れるように設計されています。これにより、多くの場面でこのボタンを再利用することができます。
単一責任原則の例
タスクの一覧を表示するコンポーネントと、タスクの詳細を表示するコンポーネントを分けて考えます。
task-list.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-task-list',
template: `
<ul>
<li *ngFor="let task of tasks">{{task.title}}</li>
</ul>
`
})
export class TaskListComponent {
@Input() tasks: Task[];
}
interface Task {
id: number;
title: string;
}
task-detail.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-task-detail',
template: `
<div>
<h3>{{task.title}}</h3>
<p>{{task.description}}</p>
</div>
`
})
export class TaskDetailComponent {
@Input() task: DetailedTask;
}
interface DetailedTask {
id: number;
title: string;
description: string;
}
ここで、TaskListComponentはタスクの一覧を表示する責任を、TaskDetailComponentはタスクの詳細を表示する責任を持っています。それぞれのコンポーネントは独自の責任を持ち、他の機能と混ざっていないので単一責任原則に則っています。
このように、各コンポーネントが1つの明確な機能や責任を持つように設計することで、再利用性やメンテナンス性を向上させることができます。
意識すべき「データフロー」について
データフローはコンポーネント間でのデータの受け渡しや状態管理に関連しており、Angularでは主に@Input()と@Output()デコレータが用いられます。以下に、親コンポーネントと子コンポーネントがどのようにデータを共有するかの例を示します。
親から子へのデータの受け渡し（Input）
parent.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`
})
export class ParentComponent {
parentMessage = "Hello from Parent";
}
子から親へのデータの受け渡し（Output）
child.component.ts:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<div>
{{ childMessage }}
<button (click)="sendMessage()">Send Message</button>
</div>
`
})
export class ChildComponent {
@Input() childMessage: string;
@Output() messageEvent = new EventEmitter<string>();
sendMessage() {
this.messageEvent.emit("Hello from Child");
}
}
親コンポーネントでこの子コンポーネントを使用する場合は、イベントバインディングを用いてmessageEventをキャッチします。
parent.component.ts（更新版）:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child
[childMessage]="parentMessage"
(messageEvent)="receiveMessage($event)"
></app-child>
`
})
export class ParentComponent {
parentMessage = "Hello from Parent";
receiveMessage($event: string) {
this.parentMessage = $event;
}
}
この例では、親コンポーネントParentComponentは@Input()を通して子コンポーネントChildComponentにデータ（childMessage）を渡しています。一方で、子コンポーネントは@Output()を通して親にイベント（messageEvent）を送っています。親コンポーネントはこのイベントを受け取り、そのデータを用いて何らかの処理（ここではreceiveMessage()メソッド内での処理）を行います。
これにより、親子コンポーネント間でのデータフローが確立され、データの受け渡しや状態管理が明確になります。
意識すべき「可読性とメンテナンス性」について
可読性とメンテナンス性はコードの品質に直接影響する重要な要素です。Angularでこれらの要点を考慮したコーディングをする場合、以下のようなポイントが考えられます。
- 明瞭な命名: 変数、関数、コンポーネントなどの名前は明確に命名する。
- コメントとドキュメント: コードには適切なコメントを付け、関数やクラスの挙動、使い方を文書化する。
- モジュールとコンポーネントの整理: モジュールやコンポーネントは一つの責任や機能に集中させ、適切に整理・分割する。
例: Todoリストアプリケーション
以下に、可読性とメンテナンス性を考慮したAngularコードの一例を示します。
todo.service.ts (Serviceクラスでロジックを管理)
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class TodoService {
private todos = new BehaviorSubject<string[]>([]);
// TODOリストを取得
getTodos() {
return this.todos.asObservable();
}
// TODOアイテムを追加
addTodo(todo: string) {
const currentTodos = this.todos.getValue();
this.todos.next([...currentTodos, todo]);
}
// コードの意図と役割をコメントで説明
}
todo-list.component.ts (表示に集中するコンポーネント)
import { Component, OnInit } from '@angular/core';
import { TodoService } from '../todo.service';
@Component({
selector: 'app-todo-list',
template: `
<ul>
<li *ngFor="let todo of todos">{{ todo }}</li>
</ul>
`
})
export class TodoListComponent implements OnInit {
todos: string[] = [];
constructor(private todoService: TodoService) {}
ngOnInit(): void {
// ServiceからTODOリストを取得して表示
this.todoService.getTodos().subscribe(data => {
this.todos = data;
});
}
}
可読性とメンテナンス性のポイント
-
明瞭な命名:
TodoService,getTodos,addTodoなど、名前からその機能が明確にわかる。 - コメントとドキュメント: コードには適切なコメントが付けられている（例では簡単すぎてコメントは省略されていますが）。
-
モジュールとコンポーネントの整理:
TodoServiceはデータの管理に集中し、TodoListComponentは表示に集中。各クラス・コンポーネントが一つの責任を持っています。
このようにコードを整理することで、他の開発者がコードを理解しやすくなり、バグの発見や新機能の追加も容易になります。