Builderパターンの基礎
複雑なオブジェクトを段階的に構築します。
「Builderパターンの基礎」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
Builderを使う理由
多くのフィールドを持つオブジェクトを、位置だけで決まる引数が大量にある巨大なコンストラクターで構築すると、間違いが起きやすくなります。Builderパターンでは、名前付きの呼び出しを1つずつ行い、複雑なオブジェクトを段階的に構築します。
作成したいオブジェクト
url、method、headers、bodyを持つHTTPリクエストを考えてみましょう。これらすべてを1つのコンストラクターに渡すと、コードが読みにくくなります。Builderを使えば、名前の明確なメソッドで各要素を設定できます。
interface HttpRequest {
url: string;
method: string;
headers: Record<string, string>;
body?: string;
}基本的なBuilderクラス
Builderは内部に未完成の状態を保持し、セッターメソッドを公開します。各セッターは内部状態を変更し、1つのフィールドを担当します。
class RequestBuilder {
private url = "";
private method = "GET";
private headers: Record<string, string> = {};
private body?: string;
}メソッドチェーンでthisを返す
Builderを流れるように記述できるようにする仕組みは、すべてのセッターからthisを返すことです。各メソッドが同じBuilderを返すため、呼び出しを連結できます。
class RequestBuilder {
private url = "";
setUrl(u: string): this {
this.url = u;
return this;
}
}さらに手順を追加する
すべての設定手順は同じパターンに従います。値を保存してからthisを返します。戻り値の型thisによって、チェーン全体で具体的なBuilderの型が保たれることに注目してください。
setMethod(m: string): this {
this.method = m;
return this;
}
addHeader(k: string, v: string): this {
this.headers[k] = v;
return this;
}build()メソッド
最後に、build()メソッドが蓄積した状態を完成したオブジェクトに組み立てます。Builderを返さないのはこのメソッドだけです。
build(): HttpRequest {
return {
url: this.url,
method: this.method,
headers: this.headers,
body: this.body,
};
}Builderを使う
これで、構築処理を文章のように読めるようになります。各手順に名前が付き、順序も柔軟で、位置引数をやりくりする必要もありません。
const req = new RequestBuilder()
.setUrl("https://api.test")
.setMethod("POST")
.addHeader("Accept", "application/json")
.build();
console.log(req.method);完全に実行できる例
そのまま実行できる自己完結型の例を示します。Builderが状態を蓄積し、build()が最終的な不変オブジェクトのように見えるオブジェクトを生成します。
interface Req { url: string; method: string }
class B {
private url = ""; private method = "GET";
setUrl(u: string): this { this.url = u; return this; }
setMethod(m: string): this { this.method = m; return this; }
build(): Req { return { url: this.url, method: this.method }; }
}
const r = new B().setUrl("/users").setMethod("POST").build();
console.log(r.url, r.method);デフォルトが自動的に使える
Builderはフィールドを適切なデフォルト値で初期化するため、呼び出し側は必要なものだけを上書きできます。設定しなかった手順には、デフォルト値がそのまま使われます。
const getReq = new B().setUrl("/health").build();
console.log(getReq.method); // GET (default)読みやすさとコンストラクターの比較
new Req("/x", "POST", {}, undefined)と、Builderを連結した書き方を比べてみてください。Builder版では各手順で意図が明確になり、意味の分からないundefinedのプレースホルダーも避けられます。
Builderを使う場面
オブジェクトにオプショナルな部分が多数ある場合、構築を段階的に行う場合、または読みやすく自己文書化されたAPIが必要な場合はBuilderを使います。フィールドが2つか3つなら、通常のオブジェクトリテラルのほうが簡単です。
簡単な確認
このレッスンの簡単な確認です。
まとめ
ビルダーは、複雑なオブジェクトを段階的に構築します。セッターはそれぞれ1つのフィールドを保存し、メソッドチェーンを可能にするためにthisを返します。一方、build()は最終的なオブジェクトを組み立てます。ビルダーは、オプションの要素が多いオブジェクトで特に効果を発揮します。
よくある質問
「Builderパターンの基礎」レッスンは無料ですか？
はい。「Builderパターンの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Builderパターンの基礎」で何を学びますか？
複雑なオブジェクトを段階的に構築します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Builderパターンの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Builderパターンの基礎
- 型付きFluentインターフェース
- 必須ステップの強制
- 不変なBuilder