Angular チュートリアル — Lily Design System

作るもの

小さなお問い合わせフォーム — ラベル付き入力、送信ボタン、双方向バインディング、本物のキーボードとスクリーンリーダーの動作 — まずは装飾なしで、次にスタイルを付けて、約 10 分で作ります。

始める前に

git、Node 22 以降、pnpm 10 以降が必要です。Angular 20 のプロジェクトならどれでも使えます — Angular CLI でも Analog でも構いません。

ステップ 1 — コードを入手する

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-headless
pnpm install
pnpm test        # vitest + TestBed, all 571 components
pnpm run build-storybook

コンポーネントは次の場所にフラットなファイルとして置かれています: components/ — Button.ts, TextInput.ts — それぞれインラインテンプレートを持つスタンドアロンコンポーネントで、spec とストーリーが付いています。バレル index.ts はすべてのコンポーネントを再エクスポートします。 pnpm build は ng-packagr で Angular Package Format のバンドルを生成します。

ステップ 2 — 最初のコンポーネント

import { Component } from "@angular/core";
import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-save-bar",
  standalone: true,
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})
export class SaveBar {
  save() { console.log("saved"); }
}

すべてのコンポーネントは lily-* セレクターを宣言し、クラスフックを付けた意味のある要素を描画します — <button class="button" type="button"> ここでは。入力はシグナルベースです: label() は aria-label の上書き用、 className() はクラスを追加します。

ステップ 3 — 小さなフォームを組み立てる

import { Component, signal } from "@angular/core";
import { Form, Field, TextInput, Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-contact-form",
  standalone: true,
  imports: [Form, Field, TextInput, Button],
  template: `
    <lily-form label="Contact form" (submit)="handleSubmit($event)">
      <lily-field label="Full name" [required]="true">
        <lily-text-input id="name" label="Full name" [(value)]="name" />
      </lily-field>
      <lily-button type="submit">Save</lily-button>
    </lily-form>
  `,
})
export class ContactForm {
  name = signal("");
}

lily-field は、ネストしたラベルコンポーネントではなく、表示用のラベルを専用の label 入力として受け取ります — フィールドに一度だけ渡せば、 lily-text-inputの対応する label がアクセシブルな名前を与えます。入力に似たコンポーネントは model() 値を公開するので、banana-box [(value)] 双方向バインディングがそのまま動きます — 全体がゾーンレス対応です。

2026-08-29 に確認済み: 以前の下書きでは、別の Label コンポーネントを lily-fieldの中にネストしていたため、 2 つの ラベル(1 つは空)が描画されていました。 lily-field は label 入力から自前のラベルをすでに描画するためです — コンポーネントのソースを確認して見つけました。お問い合わせフォームの組み合わせルートも同じパターンで、本物の e2e テストと axe テストで検証されています。

動作の確認: アプリを実行すると、フォームは飾りのない見た目になります — 意図どおりで、スタイルはこれからです。 Tabキーを押してみましょう。フォーカスがすべてのコントロールを移動し、ラベルが読み上げられ、送信も動きます。動作は完成しています。見た目はあなた次第で、次のステップです。

ステップ 4 — スタイルを付ける

クラスフックにスタイルを付けます — .button, .text-input, .label, .field — 次の場所で: styles.css、または既成のテーマを styles 配列に追加するか、 angular.json / 次の場所でリンクします: index.html:

<link rel="stylesheet" href="/themes/adobe-spectrum.css" />

ステップ 5 — 動いているところを見る

Angular + Analog のサンプルアプリは、ファイルベースのルーティングと Vite を使った完全なカタログを表示します:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-examples
pnpm install && pnpm run dev

次のステップ

テーマ設定 — Angular の theme-picker ヘルパーによる実行時切り替え。
設定ヘルパー — 言語とテキストサイズ。
コンポーネントカタログ — コンポーネントごとのプロパティ、ARIA、キーボード操作。

途中で疑問があれば、ヘルプページに答えがたくさんあります。もし手順がもっと分かりやすくできるなら、お知らせください。喜んでチュートリアルを改善します。