Skip to content

Commit 8a62e6f

Browse files
lacolacolacolaco
authored
feat: translate signals tutorial (#1070)
1 parent bc5a7d8 commit 8a62e6f

File tree

48 files changed

+1443
-277
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1443
-277
lines changed

‎adev-ja/src/content/tutorials/signals/intro/README.en.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Learn Angular signals
2+
3+
This interactive tutorial will teach you the fundamentals of Angular signals and how to use them to build reactive applications.
4+
5+
## How to use this tutorial
6+
7+
This tutorial assumes you understand Angular's core concepts. If you're new to Angular, read our [essentials guide](/essentials).
8+
9+
Each step represents a concept in Angular signals. You can do one, or all of them.
10+
11+
If you get stuck, click "Reveal answer" at the top.
12+
13+
Alright, let's [get started](/tutorials/signals/1-creating-your-first-signal)!

‎adev-ja/src/content/tutorials/signals/intro/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# Learn Angular signals
1+
# Angularシグナルを学ぶ
22

3-
This interactive tutorial will teach you the fundamentals of Angular signals and how to use them to build reactive applications.
3+
このインタラクティブなチュートリアルでは、Angularシグナルの基礎と、それらを使用してリアクティブなアプリケーションを構築する方法を学びます。
44

5-
## How to use this tutorial
5+
## このチュートリアルの使い方 {#how-to-use-this-tutorial}
66

7-
This tutorial assumes you understand Angular's core concepts. If you're new to Angular, read our [essentials guide](/essentials).
7+
このチュートリアルは、Angularのコアコンセプトを理解していることを前提としています。Angularを初めて使用する場合は、[基本ガイド](/essentials)をお読みください。
88

9-
Each step represents a concept in Angular signals. You can do one, or all of them.
9+
各ステップは、Angular signalsのコンセプトを表しています。1つだけ実行することも、すべて実行できます。
1010

11-
If you get stuck, click "Reveal answer" at the top.
11+
行き詰まった場合は、上部にある「Reveal answer」をクリックしてください。
1212

13-
Alright, let's [get started](/tutorials/signals/1-creating-your-first-signal)!
13+
さあ、[始めましょう](/tutorials/signals/1-creating-your-first-signal)！

‎adev-ja/src/content/tutorials/signals/intro/config.en.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "Learn Angular signals",
3+
"type": "editor",
4+
"nextTutorial": "first-app",
5+
"openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]
6+
}

‎adev-ja/src/content/tutorials/signals/intro/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"title": "Learn Angular signals",
2+
"title": "Angularシグナルを学ぶ",
33
"type": "editor",
44
"nextTutorial": "first-app",
55
"openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]

‎adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.en.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Creating and updating your first signal
2+
3+
Welcome to the Angular signals tutorial! [Signals](/essentials/signals) are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes.
4+
5+
In this activity, you'll learn how to:
6+
7+
- Create your first signal using the `signal()` function
8+
- Display its value in a template
9+
- Update the signal value using `set()` and `update()` methods
10+
11+
Let's build an interactive user status system with signals!
12+
13+
<hr />
14+
15+
<docs-workflow>
16+
17+
<docs-step title="Import the signal function">
18+
Import the `signal` function from `@angular/core` at the top of your component file.
19+
20+
```ts
21+
import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
22+
```
23+
24+
</docs-step>
25+
26+
<docs-step title="Create a signal in your component">
27+
Add a `userStatus` signal to your component class that is initialized with a value of `'offline'`.
28+
29+
```ts
30+
@Component({
31+
/* Config omitted */
32+
})
33+
export class App {
34+
userStatus = signal<'online' | 'offline'>('offline');
35+
}
36+
```
37+
38+
</docs-step>
39+
40+
<docs-step title="Display the signal value in the template">
41+
Update the status indicator to display the current user status by:
42+
1. Binding the signal to the class attribute with `[class]="userStatus()"`
43+
2. Displaying the status text by replacing `???` with `{{ userStatus() }}`
44+
45+
```html
46+
<!-- Update from: -->
47+
<div class="status-indicator offline">
48+
<span class="status-dot"></span>
49+
Status: ???
50+
</div>
51+
52+
<!-- To: -->
53+
<div class="status-indicator" [class]="userStatus()">
54+
<span class="status-dot"></span>
55+
Status: {{ userStatus() }}
56+
</div>
57+
```
58+
59+
Notice how we call the signal `userStatus()` with parentheses to read its value.
60+
</docs-step>
61+
62+
<docs-step title="Add methods to update the signal">
63+
Add methods to your component that change the user status using the `set()` method.
64+
65+
```ts
66+
goOnline() {
67+
this.userStatus.set('online');
68+
}
69+
70+
goOffline() {
71+
this.userStatus.set('offline');
72+
}
73+
```
74+
75+
The `set()` method replaces the signal's value entirely with a new value.
76+
77+
</docs-step>
78+
79+
<docs-step title="Wire up the control buttons">
80+
The buttons are already in the template. Now connect them to your methods by adding:
81+
1. Click handlers with `(click)`
82+
2. Disabled states with `[disabled]` when already in that status
83+
84+
```html
85+
<!-- Add bindings to the existing buttons: -->
86+
<button (click)="goOnline()" [disabled]="userStatus() === 'online'">
87+
Go Online
88+
</button>
89+
<button (click)="goOffline()" [disabled]="userStatus() === 'offline'">
90+
Go Offline
91+
</button>
92+
```
93+
94+
</docs-step>
95+
96+
<docs-step title="Add a toggle method using update()">
97+
Add a `toggleStatus()` method that switches between online and offline using the `update()` method.
98+
99+
```ts
100+
toggleStatus() {
101+
this.userStatus.update(current => current === 'online' ? 'offline' : 'online');
102+
}
103+
```
104+
105+
The `update()` method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state.
106+
107+
</docs-step>
108+
109+
<docs-step title="Add the toggle button handler">
110+
The toggle button is already in the template. Connect it to your `toggleStatus()` method:
111+
112+
```html
113+
<button (click)="toggleStatus()" class="toggle-btn">
114+
Toggle Status
115+
</button>
116+
```
117+
118+
</docs-step>
119+
120+
</docs-workflow>
121+
122+
Congratulations! You've created your first signal and learned how to update it using both `set()` and `update()` methods. The `signal()` function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes.
123+
124+
Next, you'll learn [how to derive state from signals using computed](/tutorials/signals/2-deriving-state-with-computed-signals)!
125+
126+
<docs-callout helpful title="About ChangeDetectionStrategy.OnPush">
127+
128+
You might notice `ChangeDetectionStrategy.OnPush` in the component decorator throughout this tutorial. This is a performance optimization for Angular components that use signals. For now, you can safely ignore it—just know it helps your app run faster when using signals! You can learn more in the [change detection strategies API docs](/api/core/ChangeDetectionStrategy).
129+
130+
</docs-callout>

‎adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
# Creating and updating your first signal
1+
# 初めてのシグナルの作成と更新
22

3-
Welcome to the Angular signals tutorial! [Signals](/essentials/signals) are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes.
3+
Angularシグナルチュートリアルへようこそ！[シグナル](/essentials/signals)は、状態を管理し、その状態が変化したときにUIを自動的に更新する方法を提供するAngularのリアクティブプリミティブです。
44

5-
In this activity, you'll learn how to:
5+
このアクティビティでは、以下の方法を学びます。
66

7-
- Create your first signal using the `signal()` function
8-
- Display its value in a template
9-
- Update the signal value using `set()` and `update()` methods
7+
- `signal()`関数を使用して初めてのシグナルを作成する
8+
- テンプレートでその値を表示する
9+
- `set()`および`update()`メソッドを使用してシグナル値を更新する
1010

11-
Let's build an interactive user status system with signals!
11+
シグナルを使ってインタラクティブなユーザー状態システムを構築しましょう！
1212

1313
<hr />
1414

1515
<docs-workflow>
1616

17-
<docs-step title="Import the signal function">
18-
Import the `signal` function from `@angular/core` at the top of your component file.
17+
<docs-step title="signal関数をインポートする">
18+
コンポーネントファイルの先頭で、`@angular/core`から`signal`関数をインポートします。
1919

2020
```ts
2121
import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
2222
```
2323

2424
</docs-step>
2525

26-
<docs-step title="Create a signal in your component">
27-
Add a `userStatus` signal to your component class that is initialized with a value of `'offline'`.
26+
<docs-step title="コンポーネントでシグナルを作成する">
27+
コンポーネントクラスに、`'offline'`の値で初期化される`userStatus`シグナルを追加します。
2828

2929
```ts
3030
@Component({
@@ -37,10 +37,10 @@ export class App {
3737

3838
</docs-step>
3939

40-
<docs-step title="Display the signal value in the template">
41-
Update the status indicator to display the current user status by:
42-
1. Binding the signal to the class attribute with `[class]="userStatus()"`
43-
2. Displaying the status text by replacing `???` with `{{ userStatus() }}`
40+
<docs-step title="テンプレートでシグナル値を表示する">
41+
現在のユーザー状態を表示するようにステータスインジケーターを更新します。
42+
1. `[class]="userStatus()"`を使用してシグナルをclass属性にバインドする
43+
2. `???`を`{{ userStatus() }}`に置き換えてステータステキストを表示する
4444

4545
```html
4646
<!-- Update from: -->
@@ -56,11 +56,11 @@ Update the status indicator to display the current user status by:
5656
</div>
5757
```
5858

59-
Notice how we call the signal `userStatus()` with parentheses to read its value.
59+
シグナル`userStatus()`を括弧付きで呼び出してその値を読み取る方法に注目してください。
6060
</docs-step>
6161

62-
<docs-step title="Add methods to update the signal">
63-
Add methods to your component that change the user status using the `set()` method.
62+
<docs-step title="シグナルを更新するメソッドを追加する">
63+
コンポーネントに、`set()`メソッドを使用してユーザー状態を変更するメソッドを追加します。
6464

6565
```ts
6666
goOnline() {
@@ -72,14 +72,14 @@ goOffline() {
7272
}
7373
```
7474

75-
The `set()` method replaces the signal's value entirely with a new value.
75+
`set()`メソッドは、シグナルの値を新しい値で完全に置き換えます。
7676

7777
</docs-step>
7878

79-
<docs-step title="Wire up the control buttons">
80-
The buttons are already in the template. Now connect them to your methods by adding:
81-
1. Click handlers with `(click)`
82-
2. Disabled states with `[disabled]` when already in that status
79+
<docs-step title="コントロールボタンを接続する">
80+
ボタンはすでにテンプレートにあります。次に、以下を追加してメソッドに接続します。
81+
1. `(click)`によるクリックハンドラー
82+
2. すでにその状態である場合の`[disabled]`による無効状態
8383

8484
```html
8585
<!-- Add bindings to the existing buttons: -->
@@ -93,21 +93,21 @@ The buttons are already in the template. Now connect them to your methods by add
9393

9494
</docs-step>
9595

96-
<docs-step title="Add a toggle method using update()">
97-
Add a `toggleStatus()` method that switches between online and offline using the `update()` method.
96+
<docs-step title="update()を使用したトグルメソッドを追加する">
97+
オンラインとオフラインを切り替える`toggleStatus()`メソッドを`update()`メソッドを使用して追加します。
9898

9999
```ts
100100
toggleStatus() {
101101
this.userStatus.update(current => current === 'online' ? 'offline' : 'online');
102102
}
103103
```
104104

105-
The `update()` method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state.
105+
`update()`メソッドは、現在の値を受け取り、新しい値を返す関数を取ります。これは、現在の状態に基づいて既存の値を変更する必要がある場合に便利です。
106106

107107
</docs-step>
108108

109-
<docs-step title="Add the toggle button handler">
110-
The toggle button is already in the template. Connect it to your `toggleStatus()` method:
109+
<docs-step title="トグルボタンハンドラーを追加する">
110+
トグルボタンはすでにテンプレートにあります。それを`toggleStatus()`メソッドに接続します。
111111

112112
```html
113113
<button (click)="toggleStatus()" class="toggle-btn">
@@ -119,12 +119,12 @@ The toggle button is already in the template. Connect it to your `toggleStatus()
119119

120120
</docs-workflow>
121121

122-
Congratulations! You've created your first signal and learned how to update it using both `set()` and `update()` methods. The `signal()` function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes.
122+
おめでとうございます！初めてのシグナルを作成し、`set()`と`update()`の両方のメソッドを使用して更新する方法を学びました。`signal()`関数は、Angularが追跡するリアクティブな値を作成し、それを更新すると、UIが自動的に変更を反映します。
123123

124-
Next, you'll learn [how to derive state from signals using computed](/tutorials/signals/2-deriving-state-with-computed-signals)!
124+
次に、[computedを使用してシグナルから状態を派生させる方法](/tutorials/signals/2-deriving-state-with-computed-signals)を学びます！
125125

126-
<docs-callout helpful title="About ChangeDetectionStrategy.OnPush">
126+
<docs-callout helpful title="ChangeDetectionStrategy.OnPushについて">
127127

128-
You might notice `ChangeDetectionStrategy.OnPush` in the component decorator throughout this tutorial. This is a performance optimization for Angular components that use signals. For now, you can safely ignore it—just know it helps your app run faster when using signals! You can learn more in the [change detection strategies API docs](/api/core/ChangeDetectionStrategy).
128+
このチュートリアル全体で、コンポーネントデコレーターに`ChangeDetectionStrategy.OnPush`があることに気づくかもしれません。これは、シグナルを使用するAngularコンポーネントのパフォーマンス最適化です。今のところ、これは安全に無視して構いません。シグナルを使用する際にアプリケーションの実行を高速化するのに役立つとだけ知っておいてください！詳細については、[変更検知戦略APIドキュメント](/api/core/ChangeDetectionStrategy)を参照してください。
129129

130130
</docs-callout>

‎adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.en.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"openFiles": ["src/app/app.ts", "src/app/app.css"],
3+
"type": "editor",
4+
"title": "Creating and updating your first signal"
5+
}

‎adev-ja/src/content/tutorials/signals/steps/1-creating-your-first-signal/config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"openFiles": ["src/app/app.ts", "src/app/app.css"],
33
"type": "editor",
4-
"title": "Creating and updating your first signal"
4+
"title": "初めてのシグナルの作成と更新"
55
}

0 commit comments

Comments
 (0)