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).