0Pricing
Angular Academy · レッスン

プロジェクト構造の解説

CLIが生成するファイルを見て回ります。

「プロジェクト構造の解説」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

プロジェクト構造の説明

Angular ワークスペースには、予測しやすいレイアウトがあります。主要なファイルとフォルダーを把握しておくと、どのプロジェクトでもスムーズに移動できます。

src フォルダー

src/ フォルダーには、アプリケーションのソースコードが格納されます。エントリポイント、アプリのコード、index.html や styles などのグローバルアセットが含まれます。

main.ts

src/main.ts はアプリケーションのエントリポイントです。bootstrapApplication を使用してルートコンポーネントをブートストラップします。

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

index.html

src/index.html は単一の HTML ページです。body にはルートコンポーネントのセレクターが含まれており、そこに Angular がアプリをレンダリングします。

<!-- inside body -->
<!-- <app-root></app-root> -->

app フォルダー

src/app/ には、コンポーネント、サービス、ルート、設定が格納されます。新しいプロジェクトには、app.component、app.config.ts、app.routes.ts が含まれます。

app.component ファイル

ルートコンポーネントには通常、.ts クラス、.html テンプレート、.css（または .scss）スタイルシートに加えて、.spec.ts テストファイルがあります。

app.config.ts

app.config.ts は、ブートストラップ時に使用する providers 配列を含む ApplicationConfig をエクスポートします。ルーターや HTTP クライアントなどをここで設定します。

app.routes.ts

app.routes.ts は、provideRouter が使用するルート定義の配列をエクスポートします。

import { Routes } from '@angular/router';

export const routes: Routes = [];

angular.json

ワークスペースのルートにある angular.json では、CLI を設定します。各プロジェクトのビルドターゲット、出力パス、アセット、スタイル、serve オプションなどを定義します。

package.json と tsconfig

package.json には、依存関係と npm スクリプトが一覧表示されます。tsconfig.json ファイルでは、アプリとテスト用の TypeScript コンパイラーを設定します。

public または assets

静的ファイル（画像、フォント、favicon）は public または assets フォルダーに配置します。angular.json の設定に従って、ビルド出力にコピーされます。

クイックチェック: 構造

エントリポイントを特定します。

振り返り: 構造

ワークスペースを確認しました。src/ はソース、main.ts はエントリポイント、index.html はホストページ、app/ はコンポーネントと設定、angular.json は CLI の設定を担います。次は、CLI でコードを生成します。

よくある質問

「プロジェクト構造の解説」レッスンは無料ですか？

はい。「プロジェクト構造の解説」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「プロジェクト構造の解説」で何を学びますか？

CLIが生成するファイルを見て回ります。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「プロジェクト構造の解説」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 新しいプロジェクトの生成
  2. プロジェクト構造の解説
  3. ng generateによるコード生成
  4. ビルドとサーブ
← Angular Academyに戻る