サンプルコードで身につける: プロジェクト構成 — ng newが作るファイルの読み方

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1package.json — 依存とコマンドの一覧

dependencies が実行に必要なライブラリ、devDependencies が開発時だけ使う道具です。scripts に書かれた名前は npm start のように実行でき、実体は ng コマンドです。プロジェクトの中身を知る入口になるファイルです。

{
  "name": "my-app",
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/core": "^20.1.0",
    "@angular/router": "^20.1.0",
    "rxjs": "~7.8.0"
  },
  "devDependencies": {
    "@angular/cli": "^20.1.0",
    "typescript": "~5.8.0"
  }
}

2angular.json — CLIの設定ファイル

ng build や ng serve がどう動くかを決める設定ファイルです。全体を理解する必要はなく、「CLIの挙動を変えたいときに開く場所」と知っていれば十分です。共通CSSの追加などで時々編集します。

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

3src/index.html — 唯一のHTML

ブラウザに届くHTMLはこの1枚だけで、bodyには <app-root> があるだけです。ビルド時にJSの読み込みタグはCLIが自動で挿入します。編集するのはタイトルやファビコンくらいで、画面の中身をここに書くことはありません。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <!-- タブに表示されるタイトル。ここは編集してよい -->
    <title>MyApp</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <!-- アプリの差し込み口。画面の中身をここに書くことはない -->
    <app-root></app-root>
    <!-- JSを読み込む script タグはビルド時にCLIが自動挿入する -->
  </body>
</html>

4src/app/ の3ファイルの役割分担

app.ts がロジック、app.html が見た目、app.css がスタイルという役割分担です。1つの画面部品が3ファイルで構成されるこの形は、後で自分が作るコンポーネントでもまったく同じです。

// src/app/app.ts — ルートコンポーネントのクラス(ロジック担当)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',        // index.html の <app-root> に対応
  templateUrl: './app.html',   // 見た目は app.html に
  styleUrl: './app.css',       // スタイルは app.css に
})
export class App {
  title = 'my-app';
}

// app.html … このコンポーネントの見た目(HTML)
// app.css  … このコンポーネントだけに効くスタイル

5触るファイル・触らないファイルの見分け方

生成直後のプロジェクトでどれを編集してよいか迷ったら、この分類を思い出してください。日々の開発は src/app/ の中がほぼすべてで、設定ファイル群は必要になったときだけ開けば十分です。

# ── 毎日触る場所 ──
# src/app/          … コンポーネントなどアプリ本体のコード
# src/styles.css    … アプリ全体に効く共通スタイル

# ── たまに触る場所 ──
# src/index.html    … タイトルやファビコンの変更くらい
# angular.json      … CLIの挙動を変えたいとき
# package.json      … ライブラリを追加したとき(npm が更新する)

# ── 触らない場所 ──
# node_modules/     … ライブラリの実体。編集禁止・git管理外
# src/main.ts       … 起動の入口。最初のうちは変更不要