create angular app

Create Angular App: ヒーローの旅で学ぶAngular

このチュートリアルでは、Angularアプリケーションの基本を学びながら、ヒーローの旅を通じて実践的なスキルを身につけることができます。ステップバイステップで進めることで、Angularの特徴や構造を理解し、実用的なアプリの開発に役立てることができます。

ヒーローの旅を通じてAngularをマスターしよう

このプロジェクトでは、架空のヒーローたちを管理するアプリケーションを作成します。Angularの基本的なコンセプトを学びながら、コンポーネント、データバインディング、サービスの利用方法を実践し、完成度の高いアプリを構築しましょう。

Angular プロジェクトの作成方法

この記事では、ng new コマンドを使用して "Tour of Heroes" という名前の Angular アプリケーションを作成し、以下の操作を行います：

開発環境の設定
新しいワークスペースと初期アプリケーションプロジェクトの作成
アプリケーションの実行
アプリケーションの変更

開発環境の設定

ローカル環境の設定については、公式ドキュメントを参照し、開発環境を設定してください。

新しいワークスペースと初期アプリケーションの作成

Angular ワークスペース内でアプリケーションを開発します。ワークスペースには、1つまたは複数のプロジェクトコードファイルが含まれます。プロジェクトはアプリケーションやライブラリの一連のファイルで構成されます。

新しいワークスペースと初期プロジェクトを作成する手順：

現在のディレクトリが既存の Angular ワークスペースでないことを確認してください。例えば、「Getting Started」ワークスペースにいる場合、その親ディレクトリに移動します。
次のように ng new コマンドを実行して、アプリケーション名を指定します。

ng new angular-tour-of-heroes

ng new コマンドは、初期プロジェクトに含める機能に関する質問をします。デフォルト設定を受け入れるには Enter を押してください。
コマンドが依存関係をインストールし、ワークスペースを作成するのを待ちます。完了すると、以下のファイルとフォルダが生成されます：

新しいワークスペースのルートフォルダ angular-tour-of-heroes
初期アプリケーションプロジェクトが含まれる src/app フォルダ
関連する設定ファイル

アプリケーションの実行

ワークスペースのディレクトリに移動し、アプリケーションを起動します。

cd angular-tour-of-heroes
ng serve --open

このコマンドはアプリケーションをビルドし、ローカル開発サーバーを起動します。ブラウザが自動的に http://localhost:4200 を開きます。

Angular コンポーネント

表示されたページはアプリケーションの外殻です。この外殻は、AppComponent という Angular コンポーネントによって制御されています。

アプリケーションの変更

次に、作成したアプリケーションのコンポーネントをカスタマイズします。

アプリケーションのタイトルを変更する

src/app ディレクトリの app.component.ts ファイルを開きます。
次のように title プロパティを変更します。

title = 'Tour of Heroes';

app.component.html ファイル内の既存のテンプレートを削除し、次の行に置き換えます。

<h1>{{title}}</h1>

ブラウザをリフレッシュして、新しいタイトルが表示されていることを確認します。

アプリケーションのスタイルを追加する

アプリ全体で統一感のあるスタイルを維持するために、src/styles.css ファイルに以下のスタイルを追加します。

/* アプリ全体のスタイル */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

body {
  margin: 2em;
  font-family: Cambria, Georgia, serif;
}

最終コードの確認

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Tour of Heroes';
}

src/app/app.component.html

<h1>{{title}}</h1>

src/styles.css

/* アプリ全体のスタイル */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

body {
  margin: 2em;
  font-family: Cambria, Georgia, serif;
}

まとめ

この記事では、Angular アプリケーションの基本的な作成方法と、アプリケーションの初期設定について説明しました。これで、Angular コンポーネントをカスタマイズし、スタイルを適用する方法がわかります。

参考文献

Q&A

Q1: Angularに必要な環境は何ですか？: A1: Node.jsとAngular CLIが必要です。
Q2: データバインディングとは何ですか？: A2: データバインディングは、モデルとUIを同期させる機能です。
Q3: Angularと他のフレームワークの違いは何ですか？: A3: Angularは包括的なフレームワークであり、強力な型付けや依存性注入を提供します。