0Pricing
Angular Academy · レッスン

再利用可能な振る舞いの構築

組み合わせ可能なディレクティブとして振る舞いをパッケージ化します

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

ビルディングブロックとしてのビヘイビア

構成APIは、それぞれが1つのビヘイビアをカプセル化する、小さく焦点の絞られたディレクティブを設計し、必要に応じてコンポーネントに組み合わせるときに力を発揮します。

単一目的のディレクティブ

各ビヘイビアは小さく、単独で使えるように保ちます。

@Directive({
  selector: '[appElevate]'
})
export class ElevateDirective {
  @HostBinding('style.boxShadow')
  shadow = '0 2px 8px rgba(0,0,0,.15)';
}

ホバーのビヘイビア

別のビヘイビアでは、ホバーを検知してクラスを切り替えます。

@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
  @HostBinding('class.is-hover') hovering = false;
  @HostListener('mouseenter') on() { this.hovering = true; }
  @HostListener('mouseleave') off() { this.hovering = false; }
}

ビヘイビアの組み合わせ

カードコンポーネントは、テンプレートで配線することなく両方のビヘイビアを組み合わせられます。

@Component({
  selector: 'app-card',
  hostDirectives: [ElevateDirective, HoverClassDirective],
  template: '<ng-content></ng-content>'
})
export class CardComponent {}

コンポーネント間での再利用

同じビヘイビアをボタン、タイル、パネルにも組み合わせられます。一度定義すればどこでも再利用でき、重複もありません。

設定可能なビヘイビア

入力を追加してビヘイビアを調整可能にし、組み合わせた場所でその入力を公開します。

@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
  level = input(1);
}

調整用の入力を公開する

設定可能な入力を公開すると、各ホストから値を設定できるようになります。

hostDirectives: [{
  directive: ElevateDirective,
  inputs: ['level']
}]

ビヘイビアの連携

ビヘイビア同士は要素インジェクターを通じて互いに注入し、連携できます。たとえば、リップルが押下状態に反応するようにできます。

テスト容易性

小さなビヘイビアは単独で簡単にユニットテストでき、組み合わせた後も信頼して使えるため、全体の信頼性が向上します。

命名規則

ビヘイビアは動作に基づいて命名します（appElevate、appHoverClass、appAutofocus）。分かりやすい名前にすると、組み合わせ方がコードから自然に読み取れます。

ビヘイビアライブラリ

時間が経つにつれて、どのコンポーネントでも必要に応じて利用できる、組み合わせ可能なビヘイビアのライブラリができ、ホストロジックの重複を大幅に減らせます。

確認問題

再利用可能なビヘイビアについての理解を確認します。

まとめ

それぞれが1つのビヘイビアをカプセル化する、小さく独立したディレクティブを設計し、hostDirectivesで組み合わせ、調整可能な入力を公開して、再利用しやすくテスト可能なビヘイビアライブラリを構築する方法を学びました。

よくある質問

「再利用可能な振る舞いの構築」レッスンは無料ですか？

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

「再利用可能な振る舞いの構築」で何を学びますか？

組み合わせ可能なディレクティブとして振る舞いをパッケージ化します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「再利用可能な振る舞いの構築」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. hostDirectivesプロパティ
  2. InputsとOutputsの公開
  3. 再利用可能な振る舞いの構築
  4. コンポジションと継承
← Angular Academyに戻る