0Pricing
Angular Academy · レッスン

サービスとInjectable

共有ロジック用の注入可能なサービスを作成します。

「サービスとInjectable」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

サービスとInjectable

サービスは、データ取得や共有ストアなど、再利用可能なロジックや状態を保持するクラスです。Angularは依存性注入を通じてサービスを作成し、共有します。

サービスを使う理由

コンポーネントはビューに専念させるべきです。ビジネスロジック、API呼び出し、共有状態をサービスに移すことで、再利用や独立したテストが可能になります。

Injectableデコレーター

サービスクラスに@Injectableを付けると、Angularがそのクラスを作成し、必要な場所に注入できるようになります。

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {}

providedIn root

providedIn: 'root'は、サービスをアプリケーションのルートインジェクターに登録します。Angularはアプリ全体で共有される単一のインスタンス（シングルトン）を作成します。

Tree-Shakableプロバイダー

providerはprovidedInを使ってクラス上で宣言されるため、使用されていないサービスは自動的にバンドルからtree-shakingで除外できます。

状態を持つサービス

サービスは状態を保持することがよくあります。signalsを使って、サービスからリアクティブな状態を公開できます。

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
}

メソッドを持つサービス

コンポーネントから呼び出して処理を実行したりデータを取得したりできるメソッドを追加します。

@Injectable({ providedIn: 'root' })
export class GreetingService {
  greet(name: string): string {
    return 'Hello, ' + name;
  }
}

サービスの生成

CLIは、Injectableデコレーターがすでに追加された状態でサービスのひな形を生成します。

ng g service data

シングルトンによる状態の共有

rootサービスはシングルトンなので、それを注入するすべてのコンポーネントが同じインスタンスと同じ状態を参照します。これがコンポーネント間でデータを共有する方法です。

サービスはサービスを注入できる

サービスは他のサービスに依存できます。たとえば、データサービスはHttpClientサービスを使ってリクエストを送信できます。

サービスの責務を明確にする

各サービスには、明確で単一の責務を持たせます。小さく責務を絞ったサービスは、多くの処理を担う大きなサービスよりもテストや再利用が容易です。

クイックチェック: Injectable

シングルトンサービスを登録する。

まとめ: サービス

サービスは再利用可能なロジックと状態を保持し、@Injectableを付けて、providedIn: rootを使ってアプリ全体で利用するシングルトンとして登録することを学びました。サービスはコンポーネント間で状態を共有でき、他のサービスに依存することもできます。次はinject関数です。

よくある質問

「サービスとInjectable」レッスンは無料ですか？

はい。「サービスとInjectable」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「サービスとInjectable」で何を学びますか？

共有ロジック用の注入可能なサービスを作成します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「サービスとInjectable」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. サービスとInjectable
  2. inject関数
  3. プロバイダーとスコープ
  4. インジェクショントークン
← Angular Academyに戻る