【Angular】HTTP通信をしよう！【HttpClient】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はHTTP通信でデータを取得する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

HTTP通信でデータを取得できる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
HTTP通信でデータを取得しよう
まとめ

作りたいもの

今回はクリックイベントを受け取ると、
HTTP通信でデータを取得するアプリケーションを作成します。

これが今回の完成形だよ！
データを取得とユーザ選択どちらもHTTP通信を行っているよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

HTTP通信でデータを取得しよう

HTTPClientModuleのインポート

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// HTTP通信を行うためのモジュール
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HttpGetComponent } from './http-get/http-get.component';

@NgModule({
  declarations: [
    AppComponent,
    HttpGetComponent,
  ],
  imports: [BrowserModule,
  // HTTP通信を行うためのモジュール
  HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angularのバージョン5.0.0以前　→　HttpModule
Angularのバージョン5.0.0以降　→　HttpClientModule
に変更されているよ！

HTTP通信を行うための構文

this.http.get('URL') //あれば ("URL",{オプション})とする
  // 結果を受け取る
  .subscribe(
    (response) => {
      // 成功時の処理
    },
    (error) => {
      // エラー時の処理
    }
);

他にもいろいろな記述方法があるので今回は基本的なものだよ！

HTTP通信を行おう！

コンポーネントの作成

ng generate component http-get

http-get.component.ts

ここでは、フリーのユーザ情報取得APIを叩いてデータを取得します。
https://jsonplaceholder.typicode.com

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-http-get',
  templateUrl: './http-get.component.html',
  styleUrls: ['./http-get.component.css'],
})
export class HttpGetComponent implements OnInit {
  // HttpClientをインスタンス化(DI)
  constructor(private http: HttpClient) {}

  userList: any;
  selectedUser: any;

  GET_USERS_API = 'https://jsonplaceholder.typicode.com/users';

  ngOnInit(): void {}

  /**
   * ユーザリスト取得関数
   */
  getUserList(): void {
    // HTTP通信
    this.http.get(this.GET_USERS_API).subscribe(
      // 通信成功　200~299の処理
      (response) => {
        console.log(response);
        // ユーザリストにレスポンスを代入
        this.userList = response;
        return response;
      },
      // 通信失敗時の処理
      (error) => {
        console.error(error);
      }
    );
  }

  /**
   * ユーザ取得関数
   * パラメータにユーザIDを指定してユーザ指定
   * @param userId ユーザID
   */
  getUser(userId): void {
    // HTTP通信
    this.http
      .get(
        this.GET_USERS_API,
        // パラメータを指定。idが777の場合、以下と同様
        // GET_USERS_API = 'https://jsonplaceholder.typicode.com/users?userId=1';
        { params: { id: userId } }
      )
      .subscribe(
        // 通信成功　200~299の処理
        (response) => {
          console.log(response);
          // selectedUserにレスポンスを代入
          // ※配列形式のため、0番目を指定
          this.selectedUser = response[0];
        },
        // 通信失敗時の処理
        (error) => {
          console.error(error);
        }
      );
  }
}

パラメータなし・パラメータあり
の2パターンのデータ取得処理を作成したよ！

http-get.component.html

ボタンの押下でユーザ取得APIを実行したいので
クリックイベントとユーザ取得関数を紐付けます。

<div class="">
  <!-- ボタン押下でデータ取得APIを叩く※userList取得後は非表示にする -->
  <button *ngIf="!userList" (click)="getUserList()">データを取得する</button>
  <!-- userList取得後に表示 -->
  <div class="" *ngIf="userList; else noData">
    <div class="" *ngFor="let user of userList">
      <!-- ユーザIDをパラメータ指定してAPIを叩き、該当ユーザの情報を取得 -->
      <button (click)="getUser(user.id)">{{ user.name }}</button>
    </div>
    <!-- ユーザ情報取得後似表示 -->
    <div *ngIf="selectedUser; else unSelected">
      <p>ユーザ情報</p>
      Name：{{ selectedUser.name }}
      <br />
      ID：{{ selectedUser.id }}
      <br />
      E-mail：{{ selectedUser.email }}
      <br />
      TEL：{{ selectedUser.phone }}
    </div>
    <ng-template #unSelected> ユーザを選んでください </ng-template>
  </div>
  <ng-template #noData><p>データなし</p> </ng-template>
</div>

Angular固有の書き方が多いので、わからない点があれば
以下の記事をご参照ください。

【Angular】条件分岐をしよう！【*ngIf】

【Angular】ループ処理を作ろう！【*ngFor】

【Angular】イベントリスナーを作ろう！【サンプルあり】

app.component.html

<app-http-get></app-http-get>

これで画面に表示することができました！

実際に「データを取得する」ボタンを押下することで、
ユーザ一覧が取得され、データ取得ボタンが非表示になることがわかります。

ユーザ名が表示されたボタンをクリックすると、
ユーザ詳細情報取得APIが実行され、
選択したユーザの詳細情報が取得できました！

まとめ

app.module.tsにHttpClientModuleをインポートする
HTTP通信を行うファイルで、HttpClientをインポートし、DIする
http.get(“URL”).subscribe(response=>{},error=>{})

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram