From fddad4d83397d3d62f30f4420535d1c766e93995 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 21 Nov 2025 21:58:50 +0900 Subject: [PATCH] feat(docs): translate guide/di/creating-and-using-services to Japanese --- .../di/creating-and-using-services.en.md | 105 ++++++++++++++++++ .../guide/di/creating-and-using-services.md | 48 ++++---- 2 files changed, 129 insertions(+), 24 deletions(-) create mode 100644 adev-ja/src/content/guide/di/creating-and-using-services.en.md diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.en.md b/adev-ja/src/content/guide/di/creating-and-using-services.en.md new file mode 100644 index 0000000000..f8df5139a9 --- /dev/null +++ b/adev-ja/src/content/guide/di/creating-and-using-services.en.md @@ -0,0 +1,105 @@ +# Creating and using services + +Services are reusable pieces of code that can be shared across your Angular application. They typically handle data fetching, business logic, or other functionality that multiple components need to access. + +## Creating a service + +You can create a service with the [Angular CLI](tools/cli) with the following command: + +```bash +ng generate service CUSTOM_NAME +``` + +This creates a dedicated `CUSTOM_NAME.ts` file in your `src` directory. + +You can also manually create a service by adding the `@Injectable()` decorator to a TypeScript class. This tells Angular that the service can be injected as a dependency. + +Here is an example of a service that allows users to add and request data: + +```ts +// 📄 src/app/basic-data-store.ts +import { Injectable } from '@angular/core'; + +@Injectable({ providedIn: 'root' }) +export class BasicDataStore { + private data: string[] = [] + + addData(item: string): void { + this.data.push(item) + } + + getData(): string[] { + return [...this.data] + } +} +``` + +## How services become available + +When you use `@Injectable({ providedIn: 'root' })` in your service, Angular: + +- **Creates a single instance** (singleton) for your entire application +- **Makes it available everywhere** without any additional configuration +- **Enables tree-shaking** so the service is only included in your JavaScript bundle if it's actually used + +This is the recommended approach for most services. + +## Injecting a service + +Once you've created a service with `providedIn: 'root'`, you can inject it anywhere in your application using the `inject()` function from `@angular/core`. + +### Injecting into a component + +```angular-ts +import { Component, inject } from '@angular/core'; +import { BasicDataStore } from './basic-data-store'; + +@Component({ + selector: 'app-example', + template: ` +
+

{{ dataStore.getData() }}

+ +
+ ` +}) +export class ExampleComponent { + dataStore = inject(BasicDataStore); +} +``` + +### Injecting into another service + +```ts +import { inject, Injectable } from '@angular/core'; +import { AdvancedDataStore } from './advanced-data-store'; + +@Injectable({ + providedIn: 'root', +}) +export class BasicDataStore { + private advancedDataStore = inject(AdvancedDataStore); + private data: string[] = []; + + addData(item: string): void { + this.data.push(item); + } + + getData(): string[] { + return [...this.data, ...this.advancedDataStore.getData()]; + } +} +``` + +## Next steps + +While `providedIn: 'root'` covers most use cases, Angular offers additional ways to provide services for specialized scenarios: + +- **Component-specific instances** - When components need their own isolated service instances +- **Manual configuration** - For services that require runtime configuration +- **Factory providers** - For dynamic service creation based on runtime conditions +- **Value providers** - For providing configuration objects or constants + +You can learn more about these advanced patterns in the next guide: [defining dependency providers](/guide/di/defining-dependency-providers). diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.md b/adev-ja/src/content/guide/di/creating-and-using-services.md index f8df5139a9..2d80bd4949 100644 --- a/adev-ja/src/content/guide/di/creating-and-using-services.md +++ b/adev-ja/src/content/guide/di/creating-and-using-services.md @@ -1,20 +1,20 @@ -# Creating and using services +# サービスの作成と使用 -Services are reusable pieces of code that can be shared across your Angular application. They typically handle data fetching, business logic, or other functionality that multiple components need to access. +サービスは、Angularアプリケーション全体で共有できる再利用可能なコードです。サービスは通常、複数のコンポーネントがアクセスする必要のあるデータ取得、ビジネスロジック、またはその他の機能を扱います。 -## Creating a service +## サービスの作成 {#creating-a-service} -You can create a service with the [Angular CLI](tools/cli) with the following command: +次のコマンドで[Angular CLI](tools/cli)を使用してサービスを作成できます。 ```bash ng generate service CUSTOM_NAME ``` -This creates a dedicated `CUSTOM_NAME.ts` file in your `src` directory. +これにより、`src`ディレクトリに専用の`CUSTOM_NAME.ts`ファイルが作成されます。 -You can also manually create a service by adding the `@Injectable()` decorator to a TypeScript class. This tells Angular that the service can be injected as a dependency. +TypeScriptクラスに`@Injectable()`デコレーターを追加して、手動でサービスを作成できます。これにより、そのサービスが依存性として注入可能であることがAngularに伝播します。 -Here is an example of a service that allows users to add and request data: +以下は、ユーザーがデータを追加したり要求したりできるサービスの例です。 ```ts // 📄 src/app/basic-data-store.ts @@ -34,21 +34,21 @@ export class BasicDataStore { } ``` -## How services become available +## サービスが利用可能になる仕組み {#how-services-become-available} -When you use `@Injectable({ providedIn: 'root' })` in your service, Angular: +サービスで`@Injectable({ providedIn: 'root' })`を使用すると、Angularは次のことを行います: -- **Creates a single instance** (singleton) for your entire application -- **Makes it available everywhere** without any additional configuration -- **Enables tree-shaking** so the service is only included in your JavaScript bundle if it's actually used +- **アプリケーション全体で単一のインスタンス** (シングルトン) を作成します +- **追加の設定なしでどこでも利用可能**にします +- **ツリーシェイキングを有効にし**、サービスが実際に使用される場合にのみJavaScriptバンドルに含まれるようにします -This is the recommended approach for most services. +これは、ほとんどのサービスで推奨されるアプローチです。 -## Injecting a service +## サービスを注入する -Once you've created a service with `providedIn: 'root'`, you can inject it anywhere in your application using the `inject()` function from `@angular/core`. +`providedIn: 'root'`でサービスを作成すると、`@angular/core`の`inject()`関数を使ってアプリケーションのどこにでも注入できます。 -### Injecting into a component +### コンポーネントへの注入 {#injecting-into-a-component} ```angular-ts import { Component, inject } from '@angular/core'; @@ -70,7 +70,7 @@ export class ExampleComponent { } ``` -### Injecting into another service +### 別のサービスへの注入 {#injecting-into-another-service} ```ts import { inject, Injectable } from '@angular/core'; @@ -93,13 +93,13 @@ export class BasicDataStore { } ``` -## Next steps +## 次のステップ {#next-steps} -While `providedIn: 'root'` covers most use cases, Angular offers additional ways to provide services for specialized scenarios: +`providedIn: 'root'`はほとんどのユースケースをカバーしていますが、Angularは特殊なシナリオのためにサービスを提供するための追加の方法を提供しています: -- **Component-specific instances** - When components need their own isolated service instances -- **Manual configuration** - For services that require runtime configuration -- **Factory providers** - For dynamic service creation based on runtime conditions -- **Value providers** - For providing configuration objects or constants +- **コンポーネント固有のインスタンス** - コンポーネントが独自の独立したサービスインスタンスを必要とする場合 +- **手動設定** - 実行時の設定が必要なサービス向け +- **ファクトリープロバイダー** - 実行時の条件に基づいて動的にサービスを作成するため +- **値プロバイダー** - 設定オブジェクトや定数を提供するため -You can learn more about these advanced patterns in the next guide: [defining dependency providers](/guide/di/defining-dependency-providers). +これらの高度なパターンについての詳細は、次のガイドで学ぶことができます: [依存性プロバイダーの定義](/guide/di/defining-dependency-providers).