🐣

Angularの公式チュートリアルをやっていく　その３ - Create home component

2023/06/11に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

HomeComponent の作成

まずは、HomeComponentを作成するためのコマンドを実行しましょう。
実行場所はfirst-appフォルダです。

ng generate component Home --standalone --inline-template --skip-tests

実行結果

CREATE src/app/home/home.component.ts (303 bytes)
CREATE src/app/home/home.component.css (0 bytes)

正常に実行されてhomeフォルダーとその直下にコンポーネントファイルが生成されました。

アプリケーションを一度ビルドして、生成されたコンポーネントが正常に機能するか確かめます。

ng serve

問題なくブラウザが表示されたので、生成されたコンポーネントは正常に機能しているようです。
ここで上手くビルドできずエラーとなってしまったら、HomeComponentの生成が上手くいっていない可能性がありますので、一度生成されたファイルを消して再度生成するか、エラー文を読んで対処しましょう。

HomeComponentをルートに追加

生成したHomeComponentをルートに追加します。

下記のようにapp.component.tsを更新します。

app.component.ts

  import { Component } from '@angular/core';
+ import { HomeComponent } from './home/home.component';

  @Component({
    selector: 'app-root',
    standalone: true,
-   imports: [],
+   imports: [HomeComponent],
-   template: `<h1>Hello world!</h1>`,
+   template: `
+   <main>
+     <header class="brand-name">
+       <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
+     </header>
+     <section class="content">
+       <app-home></app-home>
+     </section>
+   </main>
+ `,
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    title = 'homes';
  }

変更を保存すると、アプリケーション自動で再ビルドされ http://localhost:4200/ の表示が変化します。

変化しなかったり、エラーが起きて上手くいかない場合は、次のことが考えられます。

変更したファイルを保存していない
変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

何か間違いがないか、今一度確認してみましょう。

HomeComponent に機能を追加

HomeComponentに検索ボックスを追加します。
ここではまだデザインだけで、検索機能はまだ実装しないようです。

下記のようにhome.component.tsとhome.component.cssのコードを更新します。

home.component.ts

  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-home',
    standalone: true,
    imports: [CommonModule],
    template: `
-     <p>
-       home works!
-     </p>
+     <section>
+       <form>
+         <input type="text" placeholder="Filter by city">
+         <button class="primary" type="button">Search</button>
+       </form>
+     </section>
    `,
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent {
  
  }

home.component.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;
+   }    
+ }

変更を保存すると、アプリケーション自動で再ビルドされhttp://localhost:4200/ の表示が変化します。

変化しなかったり、エラーが起きて上手くいかない場合は、次のことが考えられます。

変更したファイルを保存していない
変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

何か間違いがないか、今一度確認してみましょう。

これにてCreate home componentは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その２ - Hello world
→　次へ　Angularの公式チュートリアルをやっていく　その４ - Create housing location component

HomeComponent の作成

HomeComponentをルートに追加

HomeComponent に機能を追加

Discussion