← Angular コース
3. プロジェクト構成 — ng newが作るファイルの読み方
ng new が生成するファイルは多く見えますが、最初に読むべきものは一握りです。package.json は依存ライブラリとコマンドの一覧、angular.json はビルドや開発サーバーなどCLIの設定です。src/index.html がブラウザに届く唯一のHTML、src/main.ts がアプリを起動する入口のスクリプトです。
実際にコードを書く場所は src/app/ フォルダです。app.ts が最初に表示されるルートコンポーネントのクラス、app.html がそのテンプレート、app.config.ts がルーターなどアプリ全体の設定をまとめるファイルです。日々の開発時間のほとんどは、この src/app/ の中で過ごすことになります。
初学者はまず「設定ファイルは読めなくてよい、触るのは src/app/ の中」と割り切るのがコツです。angular.json や tsconfig.json は、必要になったときに該当箇所だけ調べれば十分です。node_modules はライブラリの置き場で、開くことも編集することもありません。
サンプルコード(フレームワーク環境が必要なため表示のみ)
# ng new my-app が作る主なファイル
#
# my-app/
# ├── package.json # 依存ライブラリと npm scripts の一覧
# ├── angular.json # Angular CLI の設定(ビルド・serve など)
# ├── tsconfig.json # TypeScript コンパイラの設定
# ├── node_modules/ # ライブラリの実体(触らない)
# └── src/
# ├── index.html # ブラウザに届く唯一のHTML
# ├── main.ts # アプリを起動する入口
# ├── styles.css # アプリ全体に効く共通スタイル
# └── app/ # ★ 普段コードを書くのはここ
# ├── app.ts # ルートコンポーネントのクラス
# ├── app.html # ルートコンポーネントのテンプレート
# ├── app.css # ルートコンポーネントのスタイル
# └── app.config.ts # アプリ全体の設定(ルーターなど)
サンプルコードで身につける(5本) →
学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。
公式ドキュメントで詳しく ↗