跳到主要内容

Angular入門 - 環境構築とプロジェクト作成

React/Next.jsの経験がある開発者向けに、Angularの開発環境構築とプロジェクトの基本構成を解説します。

1. Angular CLIのインストール​

Angular CLIは、プロジェクトの作成・ビルド・テスト・デプロイなどをコマンドラインから実行するための公式ツールです。

インストール​

# グローバルインストール
npm install -g @angular/cli

# バージョン確認
ng version

React/Next.js との比較​

操作AngularReact / Next.js
CLIインストールnpm install -g @angular/cli不要（npx で直接実行）
プロジェクト作成ng new my-appnpx create-next-app my-app
コンポーネント生成ng generate component my-comp手動作成
開発サーバーng servenext dev

Angular CLIはグローバルインストールが推奨されますが、npx @angular/cli new my-app のようにnpxからも利用可能です。

2. プロジェクトの作成​

ng new コマンド​

ng new my-angular-app

対話形式で以下のオプションが聞かれます:

オプション説明推奨
スタイルシート形式CSS / SCSS / Sass / LessSCSS（実務で最も一般的）
SSR（サーバーサイドレンダリング）SSRとSSG（静的サイト生成）を有効化プロジェクトに応じて選択

よく使うオプション​

# SCSSを使用し、SSRなしで作成
ng new my-app --style=scss --ssr=false

# ドライラン（実際にファイルを生成しない確認用）
ng new my-app --dry-run
Next.js との比較

Next.jsでは npx create-next-app 時にApp Router / Pages Router、Tailwind CSS、ESLint、src/ ディレクトリの使用有無などを選択します。Angularでは同様のカスタマイズを ng new のオプションで行います。

3. プロジェクト構成の理解​

ng new で生成される主なディレクトリとファイルの構成です。

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # ルートコンポーネント
│   │   ├── app.component.html    # テンプレート
│   │   ├── app.component.scss    # スタイル
│   │   ├── app.component.spec.ts # テスト
│   │   ├── app.config.ts         # アプリケーション設定
│   │   └── app.routes.ts         # ルーティング設定
│   ├── index.html                # エントリーポイントHTML
│   ├── main.ts                   # ブートストラップ
│   └── styles.scss               # グローバルスタイル
├── angular.json                  # Angular CLI設定
├── tsconfig.json                 # TypeScript設定
├── tsconfig.app.json             # アプリ用TypeScript設定
├── tsconfig.spec.json            # テスト用TypeScript設定
└── package.json                  # 依存関係

各ファイルの役割​

ファイル役割Next.js での対応
angular.jsonビルド、サーブ、テストなどの設定を集約next.config.js
main.tsアプリケーションの起動エントリーポイント自動処理（不要）
app.config.tsプロバイダやルーティングなどの設定layout.tsx の一部
app.routes.tsルーティング定義ファイルシステムルーティング
app.component.tsルートコンポーネントlayout.tsx / page.tsx

Next.js との構造の違い​

  • Next.js: app/ ディレクトリのファイル構造がそのままURLルーティングにマッピングされる（ファイルシステムベース）。
  • Angular: ルーティングは app.routes.ts で明示的に定義する（設定ベース）。コンポーネントはどこに配置しても動作する。

4. 開発サーバーの起動とビルド​

開発サーバー​

# デフォルト（http://localhost:4200）で起動
ng serve

# ポート指定
ng serve --port 3000

# ブラウザを自動で開く
ng serve --open

ビルド​

# 本番ビルド
ng build

# 出力先: dist/my-angular-app/
コマンドAngularNext.js
開発サーバーng servenext dev
ビルドng buildnext build
出力先dist/.next/
プレビュービルド後に静的サーバーで確認next start

環境変数​

Angularでは environment.ts ファイルを使って環境ごとの設定を管理します。

src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};
src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};
src/app/some.service.ts
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private apiUrl = environment.apiUrl;
}

angular.json の fileReplacements で、ビルド時に本番用ファイルに自動差し替えされます。

Next.js との比較

Next.jsでは .env.local / .env.production と NEXT_PUBLIC_ プレフィックスで環境変数を管理します。Angularでは TypeScript ファイルとして環境設定を持つため、型安全にアクセスできる利点があります。

5. angular.json の基本設定​

angular.json はAngularプロジェクト全体の設定ファイルです。ビルド・サーブ・テストなどの構成を集約しています。

主要セクション​

angular.json（主要部分抜粋）
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                }
              ],
              "outputHashing": "all"
            }
          }
        },
        "serve": {
          "options": {
            "port": 4200
          }
        }
      }
    }
  }
}

重要な設定項目​

項目説明
outputPathビルド出力先ディレクトリ
assetsビルド時にそのままコピーされる静的ファイル
stylesグローバルスタイルシート
scriptsグローバルに読み込むJSファイル
budgetsバンドルサイズの上限設定（超過時に警告/エラー）
fileReplacements環境ごとのファイル差し替え
Next.js との対比

Next.jsでは next.config.js でWebpack設定、リダイレクト、画像最適化などを構成します。Angularの angular.json はそれに加えて、テスト設定やLint設定なども含む包括的な設定ファイルです。

6. React/Next.jsとの主要な違い（概要）​

Opinionated vs Flexible​

観点AngularNext.js
設計方針Opinionated（規約重視）Flexible（柔軟）
ルーティング組み込み（@angular/router）組み込み（ファイルシステムベース）
フォーム管理組み込み（ReactiveFormsModule）外部ライブラリ（React Hook Form等）
HTTP通信組み込み（HttpClient）外部ライブラリ（fetch, axios等）
依存性注入組み込みDIシステムなし（手動 or Context API）
状態管理RxJS + SignalsRedux, Zustand, Jotai 等から選択

TypeScript前提の設計​

Angularは最初からTypeScriptで設計されており、デコレータ、インターフェース、ジェネリクスなどTypeScriptの機能をフル活用しています。Next.jsもTypeScriptを強力にサポートしていますが、JavaScriptでも開発可能です。

開発体験の違い​

  • Angular: CLIが強力で、ng generate でコンポーネント・サービス・モジュールなどのボイラープレートを自動生成できます。統一された構造により、大規模チームでの開発に適しています。
  • Next.js: ファイルを作成するだけでルーティングが設定されるなど、開発の開始が素早いです。自由度が高い分、チーム内でのコーディング規約の統一が重要になります。