Angular × TypeScript 初心者ガイド：基本から実践まで

はじめに

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

---

目次

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

---

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

---