homeコンポーネントを作成する

このチュートリアルはAngularアプリケーションの新しいコンポーネントを作成する方法を紹介します。

何を学ぶか

アプリケーションに新しいコンポーネントHomeが追加されます。

Angularコンポーネントの概念的な概要

Angularアプリケーションはコンポーネントを中心に構築されており、Angularの基本的な構成要素です。 コンポーネントはアプリケーション内の要素の機能や見た目を提供するコード、HTMLレイアウト、CSSスタイルが含まれます。 Angularではコンポーネントの中にさらに別のコンポーネントを含めることができます。アプリケーションの機能や見た目はコンポーネン単位に分割して構成できます。

Angularでは、コンポーネントにはプロパティを定義するためのメタデータがあります。 Homeコンポーネントを作成するときには、これらのプロパティを使用します。

• selector: テンプレートでAngularがコンポーネントを参照する方法を示します。
• standalone: コンポーネントがNgModuleを必要とするかを示します。
• imports: コンポーネントの依存関係を示します。
• template: コンポーネントのHTMLマークアップとレイアウトを示します。
• styleUrls: コンポーネントが使用するCSSファイルのURLを配列で指定します。

1. Create the Home

   このステップでは、アプリケーション用の新しいコンポーネントを作成します。

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

   1. プロジェクトディレクトリの中の、first-appディレクトリを開きます。

   2. 新しいHomeコンポーネントを作成するために、次のコマンドを実行します。

      ng generate component home

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

      NOTE: このステップはローカル環境でのみ実施します！

      ng serve

   4. ブラウザを開き、http://localhost:4200にアクセスしてアプリケーションを確認します。

   5. アプリケーションがエラーなくビルドされていることを確認します。

      HELPFUL: 新しいコンポーネントを追加しましたが、まだアプリケーションのどのテンプレートにも組み込んでいませんので、前のレッスンと同様の表示になります。

   6. 次のステップに進む間も、ng serveはそのまま実行し続けておきます。

2. アプリケーションのレイアウトに新しいコンポーネントを追加する

   このステップでは、新しいコンポーネントHomeをアプリのルートコンポーネントであるAppに追加し、アプリケーションのレイアウトに表示されるようにします。

   IDEの編集ペインで、

   1. エディタでapp.tsを開きます。

   2. app.tsでファイルレベルのインポートに、次の行を追加してHomeをインポートします。

      src/app/app.tsでHomeをインポートする

      import {Component} from '@angular/core';import {Home} from './home/home';@Component({  selector: 'app-root',  imports: [Home],  template: `    <main>      <header class="brand-name">        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />      </header>      <section class="content">        <app-home />      </section>    </main>  `,  styleUrls: ['./app.css'],})export class App {  title = 'homes';}

   3. app.tsの@Component内で、imports配列プロパティにHomeを追加します。

      src/app/app.tsで置き換える

      import {Component} from '@angular/core';import {Home} from './home/home';@Component({  selector: 'app-root',  imports: [Home],  template: `    <main>      <header class="brand-name">        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />      </header>      <section class="content">        <app-home />      </section>    </main>  `,  styleUrls: ['./app.css'],})export class App {  title = 'homes';}

   4. app.tsの@Component内で、次のHTMLコードを含むようにtemplateプロパティを更新します。

      src/app/app.tsで置き換える

      import {Component} from '@angular/core';import {Home} from './home/home';@Component({  selector: 'app-root',  imports: [Home],  template: `    <main>      <header class="brand-name">        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />      </header>      <section class="content">        <app-home />      </section>    </main>  `,  styleUrls: ['./app.css'],})export class App {  title = 'homes';}

   5. 変更をapp.tsに保存します。

   6. ng serveが実行中の場合、アプリケーションは自動的に更新されます。 実行中でない場合、再度ng serveを開始してください。 Homeコンポーネントによって、Hello worldが*home works!*に変わるはずです。

   7. ブラウザで実行中のアプリケーションをチェックし、アプリケーションが更新されていることを確認します。

   

3. Homeコンポーネントに機能を追加する

   このステップでは、Homeコンポーネントに機能を追加します。

   前のステップでは、HomeのデフォルトのHTMLがアプリケーションで表示されるよう、Homeをアプリケーションのテンプレートに追加しました。 このステップでは、後のレッスンで使用する検索フィルターとボタンを追加します。 現時点でHomeが持つのはこれだけです。 なお、このステップでは検索用の要素をレイアウトに追加するだけで、まだ機能はありません。

   (ng newで)スターターを使わずに、新しいAngularプロジェクトを作成した場合、 検索ボタンと入力欄の枠線が表示されるようsrc/styles.cssに次のグローバルスタイルを追加します。

   :root {  --primary-color: #605DC8;  --secondary-color: #8B89E6;  --accent-color: #e8e7fa;  --shadow-color: #E8E8E8;}button.primary {  padding: 10px;  border: solid 1px var(--primary-color);  background: var(--primary-color);  color: white;  border-radius: 8px;}

   IDEの編集ペインで、

   1. first-appディレクトリで、home.tsをエディタで開きます。

   2. home.tsの@Componentで、templateプロパティを次のコードで更新します。

      src/app/home/home.tsを置き換える

      import {Component} from '@angular/core';@Component({  selector: 'app-home',  template: `    <section>      <form>        <input type="text" placeholder="Filter by city" />        <button class="primary" type="button">Search</button>      </form>    </section>  `,  styleUrls: ['./home.css'],})export class Home {}

   3. 次に、エディタでhome.cssを開き、次のスタイルで内容を更新します。`

      NOTE: ブラウザでは、src/app/home/home.tsのstyles配列にこれらのスタイルを記述可能です。

      src/app/home/home.cssを置き換える

      .results {  display: grid;  column-gap: 14px;  row-gap: 14px;  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));  margin-top: 50px;  justify-content: space-around;}input[type="text"] {  border: solid 1px var(--primary-color);  padding: 10px;  border-radius: 8px;  margin-right: 4px;  display: inline-block;  width: 30%;}button {  padding: 10px;  border: solid 1px var(--primary-color);  background: var(--primary-color);  color: white;  border-radius: 8px;}@media (min-width: 500px) and (max-width: 768px) {  .results {      grid-template-columns: repeat(2, 1fr);  }  input[type="text"] {      width: 70%;  }   }@media (max-width: 499px) {  .results {      grid-template-columns: 1fr;  }    }

   4. アプリケーションがエラーなくビルドされていることを確認してください。フィルター用の入力ボックスとボタンが表示され、スタイルが反映されているはずです。次のステップに進む前に、エラーがあれば修正してください。

   

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