0Pricing
Angular Academy · レッスン

input()によるSignal入力

リアクティブな入力をSignalとして宣言します。

「input()によるSignal入力」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

SignalベースのInput

最新のAngularでは、input()関数を使ってコンポーネントのInputをSignalとして宣言できます。従来の@Inputデコレーターを、リアクティブな方法に置き換える機能です。

Signal Inputの宣言

input()を任意のデフォルト値とともに呼び出します。戻り値は読み取り専用のSignalです。

import { Component, input } from "@angular/core";

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Inputの読み取り

Signal Inputは、コードでもテンプレートでも、関数のように呼び出して読み取ります。

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

親からのバインディング

親コンポーネントからSignal Inputにバインドする方法は、従来のInputとまったく同じで、プロパティバインディングを使用します。

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Inputは読み取り専用

通常のinput()はコンポーネント内で読み取り専用です。setを呼び出すことはできず、値を変更できるのは親コンポーネントだけです。

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Inputの型指定

型安全性を確保するため、ジェネリック型を指定します。特に、推論できるデフォルト値がない場合に有効です。

age = input<number>();
label = input<string>("Untitled");

Computed値でのInputの利用

InputはSignalであるため、computedと組み合わせて、状態の変化に自動的に更新される派生状態を作成できます。

import { input, computed } from "@angular/core";

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

effectを使ったInput

effectを使うとInputの変更に反応できます。読み取っているSignalが変化するたびに再実行されます。

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

ngOnChangesは不要

Signal Inputを使うと、ngOnChangesが不要になることが多くなります。変更への反応はcomputedとeffectが自動的に処理します。

Inputのエイリアス設定

aliasオプションを使うと、異なる公開バインディング名を指定できます。

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Signal Inputを使う理由

Signal Inputはリアクティブで型安全であり、computedやeffectとも自然に組み合わせられます。そのため、デコレーターとライフサイクルを使う方法に比べて定型コードを減らせます。

クイックチェック

Signal Inputについて理解度を確認しましょう。

まとめ

input()関数は、リアクティブで読み取り専用のSignal Inputを宣言します。呼び出して読み取り、ジェネリック型で型を指定し、必要に応じてエイリアスを設定します。ngOnChangesの代わりにcomputedやeffectと組み合わせて使用します。

よくある質問

「input()によるSignal入力」レッスンは無料ですか？

はい。「input()によるSignal入力」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「input()によるSignal入力」で何を学びますか？

リアクティブな入力をSignalとして宣言します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「input()によるSignal入力」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. input()によるSignal入力
  2. 必須入力と変換入力
  3. output()による出力
  4. viewChildによるビュークエリ
← Angular Academyに戻る