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

   

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