Hello world

最初のレッスンは、このチュートリアル全体で完全なAngularアプリケーションを作り上げていくための出発点となります。このレッスンでは、アプリケーションを更新して有名な「Hello World」というテキストを表示します。

何を学ぶか

このレッスン後の更新済みアプリケーションが、あなたとIDEがAngularアプリケーションを作り始める準備ができていることを示します。

NOTE: 組み込みエディタで作業をする場合、ステップ4に進んでください。 ブラウザのプレイグラウンドで作業する時は、アプリケーションを実行するためにng serveを使う必要はありません。ng generateのような他のコマンドは右側にあるコンソールウィンドウで実行できます。

  1. デフォルトアプリケーションをダウンロードする

    まずはコードエディタの右上のペインにある「ダウンロード」アイコンをクリックしてください。すると、このチュートリアル用のソースコードを含む.zipファイルがダウンロードされます。ダウンロードしたファイルをローカルのターミナルやIDEで開き、デフォルトアプリケーションのテストに進んでください。

    チュートリアルのどのステップでも、このアイコンをクリックすることでそのステップのソースコードをダウンロードし、そこから作業を始めることができます。

  2. デフォルトアプリケーションをテストする

    このステップでは、デフォルトの開始アプリケーションをダウンロードした後に、Angularのデフォルトアプリケーションをビルドします。 これが問題なく行えれば、チュートリアルを続けるために必要なを開発環境が整っていることを確認できます。

    IDEのターミナルペインで:

    1. プロジェクトディレクトリで、first-appディレクトリに移動します。

    2. アプリケーションを実行するのに必要な依存関係をインストールするため、次のコマンドを実行します。

      npm install

    3. デフォルトアプリケーションをビルドし、開発サーバーを起動するため、次のコマンドを実行します。

      ng serve

      アプリケーションはエラーなくビルドされるはずです。

    4. 開発マシンのWebブラウザで、http://localhost:4200を開きます。

    5. ブラウザでデフォルトのWebサイトが表示できることを確認します。

    6. 次のステップに進む間も、ng serveは起動したままで構いません。

  3. プロジェクトのファイルをレビューする

    このステップでは、Angularのデフォルトアプリケーションを構成するファイルについて述べます。

    IDEのエクスプローラーペイン:

    1. プロジェクトディレクトリでfirst-appディレクトリに移動します。
    2. srcディレクトリを開いて内容を確認します。

      1. ファイルエクスプローラーで、(/src)ディレクトリにあるAngularアプリケーションのファイルを確認します。

        1. index.htmlはアプリケーションのトップレベルのHTMLテンプレートです。
        2. styles.cssはアプリケーションのトップレベルのスタイルシートです。
        3. main.tsはアプリケーションの実行が開始されるエントリポイントです。
        4. favicon.icoは一般的なWebサイトと同様のアプリケーションのアイコンです。

      2. (/app)ディレクトリにあるコンポーネント関連のファイルを確認します。

        1. app.tsはapp-rootコンポーネントを定義するソースファイルです。 これはアプリケーションのトップレベルのAngularコンポーネントで、コンポーネントはAngularアプリケーションの基本的な構成要素です。 コンポーネントの定義にはコンポーネントのコード、HTMLテンプレート、スタイルが含まれ、これらは１つのファイルにまとめることも、別ファイルに分けることもできます。

          このアプリケーションでは、スタイルが別ファイルですが、コンポーネントのコードとHTMLテンプレートがこのファイルに含まれています。

        2. app.cssはこのコンポーネントのスタイルシートです。

        3. 新しいコンポーネントはこのディレクトリに追加されます。

      3. ディレクトリ(/assets)にはアプリケーションで使用される画像が含まれています。

      4. Angularアプリケーションのビルドと実行に必要ですが、通常は直接操作しないファイルやディレクトリもあります。

        1. .angularはAngularアプリケーションをビルドするのに必要なファイルを含みます。
        2. .e2eはアプリケーションをテストするのに使用されるファイルを含みます。
        3. .node_modulesはアプリケーションが使用するnode.jsのパッケージを含みます。
        4. angular.jsonはAngularアプリケーションの情報をアプリケーションのビルドツールに渡します。
        5. package.jsonはnpm(Node.jsのパッケージマネージャー)によって完成したアプリケーションを実行するのに使用されます。
        6. tsconfig.*はTypeScriptコンパイラに対するアプリケーションの設定を記述するファイルです。

    Angularアプリケーションプロジェクトを構成するファイルを確認したら、次のステップに進んでください。

  4. Hello Worldを作成する

    このステップでは、表示内容を変更するためにAngularプロジェクトのファイルを更新します。

    あなたのIDEで:

    1. first-app/src/index.htmlを開いてください。 NOTE: このステップと次のステップはローカル環境だけが対象です。

    2. index.htmlで、<title>要素を次のコードで置き換えてアプリケーションのタイトルを更新してください。

      src/index.htmlを置き換えてください

      <!doctype html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Homes</title>    <base href="/" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <link rel="icon" type="image/x-icon" href="favicon.ico" />    <link      href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"      rel="stylesheet"    />  </head>  <body>    <app-root></app-root>  </body></html>

      その次に、変更したindex.htmlを保存してください。

    3. 次にfirst-app/src/app/app.tsを開いてください。

    4. app.tsの@Componentの定義内にある、templateの行を次のコードに置き換えてアプリケーションコンポーネントの表示テキストを変更します。

      src/app/app.tsを置き換えてください

      import {Component} from '@angular/core';@Component({  selector: 'app-root',  imports: [],  template: ` <h1>Hello world!</h1> `,  styleUrls: ['./app.css'],})export class App {  title = 'homes';}

    5. app.tsのAppクラスの定義で、titleの行を次のコードに置き換えてコンポーネントのタイトルを変更します。

      src/app/app.tsを置き換えてください

      import {Component} from '@angular/core';@Component({  selector: 'app-root',  imports: [],  template: ` <h1>Hello world!</h1> `,  styleUrls: ['./app.css'],})export class App {  title = 'homes';}

      その次に、変更したapp.tsを保存してください.

    6. ステップ1でのng serveコマンドを停止していた場合は、IDEのTerminalウィンドウで、ng serveを再度実行してください。

    7. ブラウザを開き、localhost:4200にアクセスし、アプリケーションがエラーがなくビルドされ、タイトルにHomes、本文にHello worldが表示されることを確認してください。

      テキスト'Hello World'を表示するページのブラウザのフレーム

SUMMARY: このレッスンでは、Angularのデフォルトアプリケーションを更新し、Hello worldを表示するように更新しました。 その過程で、ローカル環境でアプリケーションをテストするためのコマンドであるng serveについて学びました。

このレッスンで扱った内容の詳細については、次のページをご覧ください: