## Angular とは？
Angular（旧称：AngularJS）は、Google が開発し、オープンソースで提供している **フロントエンドのフレームワーク** です。
「シングルページアプリケーション（SPA）」を効率的に構築・保守できるよう、以下のような特徴を備えています。
| 項目 | 内容 |
|------|------|
| **言語** | TypeScript（ES6+）ベース。JavaScript でも書けるが、型安全やIDE の補完性が高いため TypeScript が推奨されます。 |
| **アーキテクチャ** | **コンポーネントベース** の構造。コンポーネントはテンプレート（HTML）＋クラス（TypeScript）＋スタイル（CSS）から成り、再利用性が高い。 |
| **モジュールシステム** | `NgModule` で機能単位（例：`RouterModule`、`FormsModule`）をまとめ、依存関係の注入（DI）を管理。 |
| **リアクティブプログラミング** | `RxJS` と `Observable` を用いた非同期処理・状態管理。`async` パイプや `ngIf`/`ngFor` などのテンプレート文法で自動的に更新。 |
| **CLI** | `ng` コマンドでプロジェクト生成・ビルド・テスト・デプロイが一元管理。`ng generate component foo` などで即座にコードを作成できます。 |
| **ルーティング** | `Router` モジュールでクライアントサイドのルーティングを実装。遅延ロード（Lazy Loading）や Guards（認可）なども標準装備。 |
| **テスト** | Karma + Jasmine、Jest、Protractor（E2E）などと組み合わせてユニット・統合・エンドツーエンドテストが容易。 |
| **モバイル対応** | Angular Material、Ionic などの UI ライブラリでモバイルアプリや PWA（Progressive Web Apps）も簡単に作れる。 |
| **バージョン** | メジャーリリースごとにメジャーバージョンがインクリメントされ、breaking change が明示化。LTS（Long Term Support）版も提供。 |
---
## 主な概念・用語
| コンセプト | 説明 |
|------------|------|
| **Component（コンポーネント）** | UI の最小単位。テンプレートとクラス、スタイルを持ち、親子階層でツリー構造を形成。 |
| **Template（テンプレート）** | HTML + Angular の拡張構文（`{{}}`、`*ngIf`、`*ngFor` など）で記述。コンポーネントのビューを定義。 |
| **Directive（ディレクティブ）** | DOM の振る舞いを変更する指示子。`[ngSwitch]`, `[ngClass]`, カスタムディレクティブなど。 |
| **Service（サービス）** | ビジネスロジックやデータ取得、DI（依存注入）を担うクラス。`@Injectable()` デコレータで登録。 |
| **Dependency Injection（DI）** | コンテナがサービスやコンポーネントのインスタンスを管理し、必要な場所に自動で供給。 |
| **Pipe（パイプ）** | データの変換・表示に使用。組み込みパイプ（`date`, `currency`）やカスタムパイプを作成可能。 |
| **Router** | SPA のルーティングを管理。`path`, `component`, `canActivate`（Guard）などで細かく制御。 |
| **Forms（フォーム）** | Reactive Forms（`FormGroup`, `FormControl`）と Template-driven Forms（`ngModel`）の 2 種類。 |
| **Angular CLI** | プロジェクト scaffolding、ビルド（`ng build`）、テスト（`ng test`）、デプロイ（`ng deploy`）などを一括管理。 |
---
## Angular の主な特徴
1. **型安全と保守性**
- TypeScript による静的型チェックが可能。IDE（VS Code, WebStorm など）の補完・リファクタリングが強力。
2. **モジュラー構成**
- `NgModule` で機能ごとにモジュール化し、依存関係を明確に分離。大規模アプリでもコードが整理しやすい。
3. **リアクティブなデータフロー**
- `Observable`/`Subject` と `async` パイプで非同期データの流れを宣言的に扱える。状態管理が一元化しやすい。
4. **豊富なエコシステム**
- Angular Material（UI コンポーネント）、Angular FlexLayout、NgRx（Redux 類似の状態管理）、NgRx Data（データアクセス層）など、公式・サードパーティのライブラリが豊富。
5. **PWA とモバイル対応**
- Service Worker と Workbox を組み込み、オフライン機能やプッシュ通知を簡単に実装できる。
- Ionic と組み合わせれば、iOS/Android のネイティブアプリも構築可能。
6. **テストフレームワークの統合**
- `ng test`（Jasmine/Karma）や `ng e2e`（Protractor/Cypress）でフロントエンドのテストが標準装備。
7. **パフォーマンス最適化**
- Ahead-of-Time（AOT）コンパイル、Tree-shaking、Lazy Loading、 differential loading（ES5/ES2015 ターゲット）など、現代のビルド最適化が標準で提供。
---
## Angular と AngularJS の違い（簡単に）
| 項目 | Angular (v2+) | AngularJS (v1) |
|------|---------------|----------------|
| **言語** | TypeScript（ES6+） | JavaScript (ECMAScript 5) |
| **アーキテクチャ** | コンポーネントベース、MVVM → MVC → “Component + Service” | MVC（Controller + Scope + View） |
| **変更検出** | ゼロかかる（zone.js + async） | 手動で `$digest` が走る |
| **CLI** | `ng` コマンドで全機能をカバー | 主に手動設定か `grunt/gulp` が多い |
| **モジュール** | ES6 モジュール（`import`/`export`） | CommonJS / AMD など |
| **パイプ・ディレクティブ** | `*` 前置記法でテンプレートに組み込み | `ng-if`, `ng-repeat` などがディレクティブ |
| **サポート** | アクティブに開発、LTS 版あり | 2020 年以降の公式サポートは終了（LTS のみ） |
---
## 典型的な開発フロー（例）
1. **プロジェクト生成**
```bash
ng new my-app # スキャフト（SCSS, routing, E2E テスト含む）
```
2. **コンポーネント追加**
```bash
ng generate component pages/home
```
3. **サービス作成**（DI で注入）
```bash
ng generate service services/api
```
4. **ルーティング設定**（`app-routing.module.ts`）
```ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
```
5. **データ取得**（HTTP 経由）
```ts
// api.service.ts
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class ApiService {
constructor(private http: HttpClient) {}
getPosts() {
return this.http.get('https://api.example.com/posts');
}
}
```
6. **テンプレートでデータバインディング**
```html
<app-home>
<h1>{{ title }}</h1>
<ul>
<li *ngFor="let post of posts$ | async">
{{ post.title }}
</li>
</ul>
</app-home>
```
7. **ビルド & デプロイ**
```bash
ng build --prod # AOT, tree-shaking, differential loading
ng deploy # (Angular CLI Deploy plugin) or other CI/CD
```
---
## 学習リソース（日本語）
| 種類 | 推奨サイト・書籍 |
|------|-------------------|
| **公式ドキュメント** | https://angular.io/ja/docs（日本語版） |
| **チュートリアル** | Udemy「Angular 基本と実践」や Progate の Angular コース |
| **書籍** | 「Angularアプリケーションプログラミング」 ( O'Reilly )、 「型Scriptで作る Angular」 |
| **動画** | YouTube の「Academind」や「Japanese Angular」系チャンネル |
| **コミュニティ** | Qiita、Stack Overflow、Twitter の #angularjp、 Discord の Angular 系サーバ |
---
## まとめ
- **Angular** は「TypeScript ベースのフルスタックフレームワーク」で、コンポーネントとモジュールを中心に大規模アプリでも扱いやすい設計です。
- **DI、リアクティブプログラミング、CLI、豊富なエコシステム** が特徴で、Google が長期サポートを提供しているため、企業レベルのアプリ開発に最適です。
- **AngularJS（v1）** とはアーキテクチャ・言語・保守性が大きく異なり、2020 年以降は公式サポートが終了しています。新規開発は必ず最新の **Angular (v17 以降)** を利用してください。
何か具体的に知りたい点（例：ルーティングの使い方、NgRx の導入、PWA の作り方など）があれば、遠慮なく質問してください！