はじめに

Angularは、Googleが開発した強力なフロントエンドフレームワークで、TypeScriptと組み合わせることで、堅牢で保守性の高いアプリケーションを開発するのに適しています。この記事では、初心者向けにAngularとTypeScriptの基本を解説し、簡単なアプリケーション作成までの流れを紹介します。

目次

Angularとは？
TypeScriptの基礎
Angularのプロジェクト構造
コンポーネントの作成
データバインディングの使い方
サービスと依存性注入（DI）
実践：簡単なToDoアプリを作ろう
おすすめの学習リソース

1. Angularとは？

特徴
- コンポーネントベースのアーキテクチャ
- 双方向データバインディング
- 強力なルーティング機能
- モジュール化された開発
使われる場面
- 企業向けWebアプリケーション
- SPA（シングルページアプリケーション）

2. TypeScriptの基礎

TypeScriptの概要
- JavaScriptのスーパーセットで、型チェックや最新のECMAScript機能が利用可能。

基本構文

let message: string = "Hello, Angular!";
function greet(name: string): string {
    return `Hello, ${name}`;
}
console.log(greet("TypeScript"));

AngularでTypeScriptを使うメリット:
- 型安全性
- IDEサポート（補完機能・エラー検出）

3. Angularのプロジェクト構造

Angular CLIで生成されるプロジェクトには、以下のディレクトリがあります。

src/app：アプリケーションのメインコード
src/assets：画像やスタイルシート
src/environments：環境ごとの設定

Angular CLIを使ったプロジェクト作成

npm install -g @angular/cli
ng new my-angular-app
cd my-angular-app
ng serve

4. コンポーネントの作成

Angularでは、アプリケーションを小さなコンポーネントに分割して管理します。

コンポーネントの作成方法

ng generate component my-component

コンポーネントコード例

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class MyComponent {
  title: string = 'Hello Angular!';
}

5. データバインディングの使い方

双方向データバインディング

<input [(ngModel)]="name">
<p>Hello, {{ name }}!</p>

イベントバインディング

<button (click)="onClick()">Click me</button>

6. サービスと依存性注入（DI）

サービスの作成

ng generate service my-service

サービスの使用例

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  getMessage(): string {
    return 'Hello from MyService!';
  }
}

7. 実践：簡単なToDoアプリを作ろう

機能

新しいタスクを追加
タスクをリストに表示

コード例

コンポーネント

tasks: string[] = [];
newTask: string = '';

addTask() {
  if (this.newTask.trim()) {
    this.tasks.push(this.newTask);
    this.newTask = '';
  }
}

テンプレート

<input [(ngModel)]="newTask" placeholder="新しいタスク">
<button (click)="addTask()">追加</button>
<ul>
  <li *ngFor="let task of tasks">{{ task }}</li>
</ul>

8. おすすめの学習リソース

Angular公式ドキュメント
TypeScript公式ドキュメント
UdemyやYouTubeでのチュートリアル

おわりに

AngularとTypeScriptを組み合わせることで、堅牢なアプリケーションを効率よく構築できます。この記事を参考に、ぜひ実際にコードを書きながら学んでみてください！