Component（コンポーネント）とは？はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】
▶︎完全版はこちら
▶︎ダイジェスト動画はこちら
Angularの基本構造を理解するためには、コンポーネントの概念を把握することが重要です。以下に詳細を説明します。
1. コンポーネントとは？
Angularアプリケーションを構成する独立した小さな部品のことを指します。
各コンポーネントは画面上の特定の領域（UIブロック）を管理します。
2. コンポーネントの構造
各コンポーネントは、以下の3つのファイルで構成されています。
HTMLファイル
UIの構造を定義。
例: ボタンやリスト、見出しなどのHTML要素。
CSSファイル
UIのスタイル（デザインやレイアウト）を設定。
例: 背景色、フォントサイズ、余白などの指定。
TS（TypeScript）ファイル
ロジックやデータの処理を記述。
例: ボタンがクリックされた時の動作やデータの取得処理。
3. 実例：マイストアアプリ
以下の例を通じて、コンポーネントの役割を解説します。
全体構造
AppRoot（オレンジ枠）：アプリ全体の外枠。
AppTopBar（青枠）：画面上部のヘッダー部分。
AppProductList（紫枠）：商品一覧の表示部分。
各コンポーネントの構造
AppRoot（アプリ全体）
HTML: アプリ全体のレイアウトを定義。
CSS: アプリ全体の基本スタイルを指定。
TS: コンポーネントの初期設定や全体ロジックを記述。
AppTopBar（ヘッダー）
HTML: 「My Store」の文字を表示。
CSS: ヘッダー部分の背景色やレイアウトを設定。
TS: 特になし（シンプルな構造の場合）。
AppProductList（商品一覧）
HTML: 商品リストを繰り返し表示する構造を定義。
CSS: 各商品のカードスタイルを設定。
TS: 商品データの取得やリスト表示のロジックを記述。
4. コンポーネントの役割と追加
各コンポーネントは、1つのUIブロックに対応。
コンポーネントを追加する際は、HTML、CSS、TSの3つのファイルをセットで作成する。
5. ポイント
コンポーネントはAngularのアプリケーション構築の基本単位。
複数のコンポーネントを組み合わせることで、アプリ全体を構築する。
再利用性が高く、メンテナンスしやすい設計を可能にする。
これを理解した上で、具体的なコードを書きながらコンポーネントを作成していきましょう！
▶︎続きはこちら
いいなと思ったら応援しよう！
