必須入力と変換入力
入力を必須にし、値を変換します。
「必須入力と変換入力」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
基本的なInputの先へ
Signal Inputには、Inputを必須にする機能と、受け取った値を保存前に変換する機能という、2つの強力な機能があります。
必須Input
親コンポーネントから必ず値を渡す必要がある場合は、input.required()を使用します。デフォルト値はありません。
import { input } from "@angular/core";
export class UserComponent {
userId = input.required<string>();
}必須にする理由
必須Inputにバインドされていない場合、Angularはエラーを報告します。これにより、undefinedの値をそのまま通してしまう前に、ミスを早期に発見できます。
<!-- error: userId is required -->
<app-user></app-user>
<!-- correct -->
<app-user [userId]="id"></app-user>必須InputはNon-Null
必須Inputには必ず値が指定されるため、その型がundefinedになることはありません。nullチェックなしで安全に読み取れます。
userId = input.required<string>();
load() {
return this.api.get(this.userId()); // always a string
}Inputの変換
transformオプションは、受け取った値を保存する前に関数で処理します。値の型変換などに便利です。
import { input } from "@angular/core";
export class ToggleComponent {
disabled = input(false, { transform: (v: unknown) => !!v });
}booleanへの変換
Angularには、属性形式の値を実際のboolean値に変換するbooleanAttributeが用意されています。存在によって意味が決まる属性に便利です。
import { input, booleanAttribute } from "@angular/core";
disabled = input(false, { transform: booleanAttribute });
<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>numberへの変換
同様に、numberAttributeは文字列の属性値を数値に変換します。
import { input, numberAttribute } from "@angular/core";
count = input(0, { transform: numberAttribute });
<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>カスタム変換関数
文字列のトリミングなど、値を正規化するための任意の変換処理を作成できます。
label = input("", {
transform: (v: string) => v.trim()
});Input型とOutput型の変換
変換関数では、ある型を受け取って別の型として保存できます。親がバインドするのは受け付ける型で、コンポーネント内で読み取るのは保存された型です。
// accepts string | number, stores number
size = input(0, {
transform: (v: string | number) => Number(v)
});必須と変換の組み合わせ
input.required()にオプションオブジェクトを渡すことで、必須指定と変換を組み合わせられます。
value = input.required({
transform: numberAttribute
});使い分け
必須のバインディングを強制するにはrequiredを、受け取ったデータの型変換や正規化にはtransformを使用してください。コンポーネントのロジックをすっきりと一貫したものに保てます。
クイックチェック
必須Inputと変換されるInputについて理解度を確認しましょう。
まとめ
必須Input（null非許容、デフォルト値なし）にはinput.required()を使用し、値の変換にはbooleanAttributeやnumberAttributeを含むtransformオプションを使用します。両方を組み合わせることもできます。
よくある質問
「必須入力と変換入力」レッスンは無料ですか？
はい。「必須入力と変換入力」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「必須入力と変換入力」で何を学びますか？
入力を必須にし、値を変換します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「必須入力と変換入力」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。