いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「Angularでコンポーネントからのデータ取得をもっとシンプルに書きたい」とお考えではありませんか？
HttpClientとsubscribe、RxJSの演算子の組み合わせに複雑さを感じている方へ。
httpResourceを使えば、HTTPリクエストの結果とローディング状態をシグナルとして扱えます。
いずみシグナルベースなのでテンプレートとの相性が抜群です。
ということで、本記事ではAngularのhttpResourceでデータ取得を実装する方法を解説します。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
 レバテックフリーランス  | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
 Midworks  | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
 ITプロパートナーズ  | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【Angular】httpResourceでデータ取得を実装する方法
早速ですが、httpResourceでデータ取得を実装する手順を見ていきます。
httpResourceとは
httpResourceは、@angular/common/httpが提供する関数です。
HttpClientを内部で使いながら、リクエストの状態とレスポンスをシグナルとして公開します。
返り値のオブジェクトには、value・isLoading・error・statusといったシグナルと、reload・set・updateといったメソッドが含まれます。
HttpClientのsubscribeと違い、httpResourceはリクエストを自動的に発行します。
httpResourceは実験的なAPIとして導入された関数なので、将来シグネチャが変わる可能性があります。
いずみデータ取得（GET）に特化した機能という位置づけです。
provideHttpClientを登録する
httpResourceはHttpClientに依存するため、アプリケーションのブートストラップでHTTPクライアントを提供する必要があります。
main.tsでprovideHttpClientを登録します。
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});NgModule構成の場合は、AppModuleのprovidersに同じprovideHttpClientを追加します。
基本的なGETリクエストを実装する
URLを返す関数をhttpResourceに渡すだけで、GETリクエストが実行されます。
import { Component } from '@angular/core';
import { httpResource } from '@angular/common/http';
interface User {
id: number;
name: string;
email: string;
}
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
})
export class UserComponent {
userResource = httpResource<User>(() => 'https://api.example.com/users/1');
}URLを返すコールバックをhttpResourceに渡すだけで、コンポーネント生成時にリクエストが走ります。
@if (userResource.isLoading()) {
<p>読み込み中です</p>
} @else if (userResource.error()) {
<p>取得に失敗しました</p>
} @else {
<p>{{ userResource.value()?.name }}</p>
<p>{{ userResource.value()?.email }}</p>
}value()は初期状態やローディング中にはundefinedを返すため、テンプレートではオプショナルチェーンでアクセスします。
いずみsubscribeもunsubscribeも書かずに済むのが大きな利点です。
シグナルでリクエストをリアクティブにする
httpResourceに渡した関数の中でシグナルを読み取ると、シグナルの値が変わるたびにリクエストが再実行されます。
import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
})
export class UserComponent {
userId = signal(1);
userResource = httpResource<User>(
() => `https://api.example.com/users/${this.userId()}`,
);
showNext() {
this.userId.update((id) => id + 1);
}
}userIdを更新すると、httpResourceが新しいURLで自動的にリクエストを送り直します。
前のリクエストがまだ完了していない場合は自動的にキャンセルされます。
いずみ検索ボックスの入力値をシグナルにしておけば、インクリメンタル検索も簡単に組めます。
パラメータやdefaultValueを指定する
URLの文字列ではなくリクエストオブジェクトを返すと、クエリパラメータやヘッダーを細かく指定できます。
keyword = signal('');
searchResource = httpResource<User[]>(() => ({
url: 'https://api.example.com/users',
method: 'GET',
params: { q: this.keyword(), limit: 20 },
}));第2引数のオプションでdefaultValueを渡すと、ローディング中やエラー時にvalue()が返す値を指定できます。
usersResource = httpResource<User[]>(
() => 'https://api.example.com/users',
{ defaultValue: [] },
);defaultValueを空配列にしておくと、テンプレート側でundefinedチェックを書かずに一覧をループできます。
parseオプションを渡すと、レスポンスを検証・変換してから受け取れます。
import { z } from 'zod';
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string(),
});
userResource = httpResource(
() => 'https://api.example.com/users/1',
{ parse: (raw) => UserSchema.parse(raw) },
);Zodなどのスキーマ検証ライブラリとparseを組み合わせると、バックエンドのレスポンス型を実行時に保証できます。
取得済みのデータを最新化したいときは、reloadメソッドを呼び出します。
this.userResource.reload();JSON以外を受け取りたいときはhttpResource.textやhttpResource.blobといった派生関数も用意されています。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選
フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。
いずみエージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス
」
| 案件数 | マージン率 | 単価 | |
| 約88,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。
レバテックフリーランス
は業界最大手のフリーランスエージェントです。
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！
いずみ僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
です。
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。
手厚い保障を重視したいなら「Midworks
」
| 案件数 | マージン率 | 単価 | |
| 約10,000件 | 非公開 | 中 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 手厚い保障で正社員並みの安心感。
- 還元率60％超え＆単価公開でクリアな契約。
- 給与保障制度（審査あり）。
Midworks
は手厚い保障が特徴のフリーランスエージェントです。
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。
いずみ僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ
」
| 案件数 | マージン率 | 単価 | |
| 約5,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 経験者向け | 無料 |
- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。
ITプロパートナーズ
はIT案件に特化したフリーランスエージェントです。
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。
いずみ週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！
よくある質問
httpResourceとHttpClientはどう使い分ければいいですか？
画面表示用のデータ取得（GET）にはhttpResourceが向いています。
作成・更新・削除のような副作用を伴う操作は、HttpClientのメソッドを直接呼び出すのが推奨されています。
httpResourceでPOSTやPUTは送れますか？
リクエストオブジェクトでmethodをPOSTに指定すれば技術的には送れます。
ただしhttpResourceはシグナルの変化で自動再実行やキャンセルを行うため、保存や削除の用途には推奨されていません。
ミューテーションはHttpClientを使ってください。
取得したデータを手動で再取得するには？
httpResourceの返り値にあるreloadメソッドを呼び出します。
同じURLのまま最新のレスポンスを取り直せます。
defaultValueを指定しないとvalue()は何を返しますか？
初期状態・ローディング中・エラー時はundefinedを返します。
テンプレートでオプショナルチェーンを使うか、defaultValueを指定してください。
まとめ
今回は、AngularのhttpResourceでデータ取得を実装する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
