feat(docs): translate signal forms tutorial to Japanese

adev-ja/src/content/tutorials/signal-forms/intro/README.en.md

@@ -0,0 +1,24 @@
+# Learn Angular Signal Forms
+
+This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API.
+
+IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates.
+
+## How to use this tutorial
+
+This tutorial assumes you understand Angular's core concepts and have basic familiarity with signals. If you're new to Angular, read our [essentials guide](/essentials). If you're new to signals, complete the [signals tutorial](/tutorials/signals) first.
+
+Each step represents a concept in Signal Forms. You'll build a complete login form from scratch, learning the fundamentals step by step.
+
+**Your learning path:**
+
+1. Set up the form model with TypeScript and signals
+2. Connect the form to your template
+3. Add validation rules
+4. Display validation errors to users
+5. Handle form submission
+6. Explore advanced topics and next steps
+
+If you get stuck, click "Reveal answer" at the top.
+
+Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)!

adev-ja/src/content/tutorials/signal-forms/intro/README.md

@@ -1,24 +1,24 @@
-# Learn Angular Signal Forms
+# Angularシグナルフォームを学ぶ
 
-This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API.
+このインタラクティブなチュートリアルでは、Angularの実験的なシグナルフォームAPIを使用してリアクティブフォームを構築する方法を学びます。
 
-IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates.
+IMPORTANT: シグナルフォームは現在[実験的](reference/releases#experimental)です。安定化する前にAPIが変更される可能性があります。最新の更新については[公式ドキュメント](guide/forms/signal-forms)を確認してください。
 
-## How to use this tutorial
+## このチュートリアルの使い方 {#how-to-use-this-tutorial}
 
-This tutorial assumes you understand Angular's core concepts and have basic familiarity with signals. If you're new to Angular, read our [essentials guide](/essentials). If you're new to signals, complete the [signals tutorial](/tutorials/signals) first.
+このチュートリアルは、Angularのコア概念を理解しており、シグナルの基本的な知識があることを前提としています。Angularが初めての場合は、[基本ガイド](/essentials)を読んでください。シグナルが初めての場合は、まず[シグナルチュートリアル](/tutorials/signals)を完了してください。
 
-Each step represents a concept in Signal Forms. You'll build a complete login form from scratch, learning the fundamentals step by step.
+各ステップはシグナルフォームのコンセプトを表しています。ゼロから完全なログインフォームを構築し、基礎を段階的に学びます。
 
-**Your learning path:**
+**学習パス:**
 
-1. Set up the form model with TypeScript and signals
-2. Connect the form to your template
-3. Add validation rules
-4. Display validation errors to users
-5. Handle form submission
-6. Explore advanced topics and next steps
+1. TypeScriptとシグナルを使用してフォームモデルを設定
+2. フォームをテンプレートに接続
+3. バリデーションルールを追加
+4. バリデーションエラーをユーザーに表示
+5. フォーム送信を処理
+6. 高度なトピックと次のステップを探索
 
-If you get stuck, click "Reveal answer" at the top.
+詰まった場合は、上部の「答えを表示」をクリックしてください。
 
-Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)!
+それでは、[始めましょう](/tutorials/signal-forms/1-set-up-form-model)!

adev-ja/src/content/tutorials/signal-forms/intro/config.en.json

@@ -0,0 +1,6 @@
+{
+  "title": "Learn Angular Signal Forms",
+  "type": "editor",
+  "nextTutorial": "signals",
+  "openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]
+}

adev-ja/src/content/tutorials/signal-forms/intro/config.json

@@ -1,5 +1,5 @@
 {
-  "title": "Learn Angular Signal Forms",
+  "title": "Angularシグナルフォームを学ぶ",
   "type": "editor",
   "nextTutorial": "signals",
   "openFiles": ["src/app/app.ts", "src/app/app.html", "src/app/app.css"]

adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.en.md

@@ -0,0 +1,73 @@
+# Set up the form model
+
+Every Signal Form starts with a form data model - a signal that defines the shape of your data, and stores your form data.
+
+In this lesson, you'll learn how to:
+
+- Define a TypeScript interface for your form data
+- Create a signal to hold form values
+- Use the `form()` function to create a Signal Form
+
+Let's build the foundation for our login form!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Define the LoginData interface">
+Create a TypeScript interface that defines the structure of your login form data. The form will have:
+
+- An `email` field (string)
+- A `password` field (string)
+- A `rememberMe` field (boolean)
+
+```ts
+interface LoginData {
+  email: string;
+  password: string;
+  rememberMe: boolean;
+}
+```
+
+Add this interface above the `@Component` decorator.
+</docs-step>
+
+<docs-step title="Import signal and form">
+Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`:
+
+```ts
+import { Component, signal } from '@angular/core';
+import { form } from '@angular/forms/signals';
+```
+
+</docs-step>
+
+<docs-step title="Create the form model signal">
+In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter:
+
+```ts
+loginModel = signal<LoginData>({
+  email: '',
+  password: '',
+  rememberMe: false,
+});
+```
+
+The initial values start as empty strings for text fields and `false` for the checkbox.
+</docs-step>
+
+<docs-step title="Create the form">
+Now create the form by passing your model signal to the `form()` function:
+
+```ts
+loginForm = form(this.loginModel);
+```
+
+The `form()` function creates a form from your model, giving you access to field state and validation.
+</docs-step>
+
+</docs-workflow>
+
+Excellent! You've set up your form model. The `loginModel` signal holds your form data, and the `loginForm` provides access to each field with type safety.
+
+Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)!

adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md

@@ -1,25 +1,25 @@
-# Set up the form model
+# フォームモデルを設定
 
-Every Signal Form starts with a form data model - a signal that defines the shape of your data, and stores your form data.
+すべてのシグナルフォームは、データの形状を定義し、フォームデータを格納するシグナルであるフォームデータモデルから始まります。
 
-In this lesson, you'll learn how to:
+このレッスンでは、次の方法を学びます:
 
-- Define a TypeScript interface for your form data
-- Create a signal to hold form values
-- Use the `form()` function to create a Signal Form
+- フォームデータのTypeScriptインターフェースを定義
+- フォーム値を保持するシグナルを作成
+- `form()` 関数を使用してシグナルフォームを作成
 
-Let's build the foundation for our login form!
+ログインフォームの基礎を構築しましょう!
 
 <hr />
 
 <docs-workflow>
 
-<docs-step title="Define the LoginData interface">
-Create a TypeScript interface that defines the structure of your login form data. The form will have:
+<docs-step title="LoginDataインターフェースを定義">
+ログインフォームデータの構造を定義するTypeScriptインターフェースを作成します。フォームには次のものが含まれます:
 
-- An `email` field (string)
-- A `password` field (string)
-- A `rememberMe` field (boolean)
+- `email` フィールド（文字列）
+- `password` フィールド（文字列）
+- `rememberMe` フィールド（真偽値）
 
 ```ts
 interface LoginData {
@@ -29,11 +29,11 @@ interface LoginData {
 }
 ```
 
-Add this interface above the `@Component` decorator.
+このインターフェースを `@Component` デコレーターの上に追加します。
 </docs-step>
 
-<docs-step title="Import signal and form">
-Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`:
+<docs-step title="signalとformをインポート">
+`@angular/core` から `signal` 関数を、`@angular/forms/signals` から `form` 関数をインポートします:
 
 ```ts
 import { Component, signal } from '@angular/core';
@@ -42,8 +42,8 @@ import { form } from '@angular/forms/signals';
 
 </docs-step>
 
-<docs-step title="Create the form model signal">
-In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter:
+<docs-step title="フォームモデルシグナルを作成">
+コンポーネントクラスで、初期値を持つ `loginModel` シグナルを作成します。型パラメータとして `LoginData` インターフェースを使用します:
 
 ```ts
 loginModel = signal<LoginData>({
@@ -53,21 +53,21 @@ loginModel = signal<LoginData>({
 });
 ```
 
-The initial values start as empty strings for text fields and `false` for the checkbox.
+初期値は、テキストフィールドには空文字列、チェックボックスには `false` として開始します。
 </docs-step>
 
-<docs-step title="Create the form">
-Now create the form by passing your model signal to the `form()` function:
+<docs-step title="フォームを作成">
+モデルシグナルを `form()` 関数に渡してフォームを作成します:
 
 ```ts
 loginForm = form(this.loginModel);
 ```
 
-The `form()` function creates a form from your model, giving you access to field state and validation.
+`form()` 関数は、モデルからフォームを作成し、フィールドの状態とバリデーションへのアクセスを提供します。
 </docs-step>
 
 </docs-workflow>
 
-Excellent! You've set up your form model. The `loginModel` signal holds your form data, and the `loginForm` provides access to each field with type safety.
+素晴らしい! フォームモデルを設定しました。`loginModel` シグナルがフォームデータを保持し、`loginForm` が型安全性を備えた各フィールドへのアクセスを提供します。
 
-Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)!
+次に、[フォームをテンプレートに接続する方法](/tutorials/signal-forms/2-connect-form-template)を学びます!

adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.en.json

@@ -0,0 +1,5 @@
+{
+  "openFiles": ["src/app/app.ts", "src/app/app.html"],
+  "type": "editor",
+  "title": "Set up the form model"
+}

adev-ja/src/content/tutorials/signal-forms/steps/1-set-up-form-model/config.json

@@ -1,5 +1,5 @@
 {
   "openFiles": ["src/app/app.ts", "src/app/app.html"],
   "type": "editor",
-  "title": "Set up the form model"
+  "title": "フォームモデルを設定"
 }

adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md

@@ -0,0 +1,79 @@
+# Connect your form to the template
+
+Now, you need to connect your form to the template using the `[field]` directive. This creates two-way data binding between your form model and the input elements.
+
+In this lesson, you'll learn how to:
+
+- Import the `Field` directive
+- Use the `[field]` directive to bind form fields to inputs
+- Connect text inputs and checkboxes to your form
+- Display form field values in the template
+
+Let's wire up the template!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Import the Field directive">
+Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array:
+
+```ts
+import { form, Field } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Field],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+```
+
+</docs-step>
+
+<docs-step title="Bind the email field">
+In your template, add the `[field]` directive to the email input:
+
+```html
+<input type="email" [field]="loginForm.email" />
+```
+
+The `loginForm.email` expression accesses the email field from your form.
+</docs-step>
+
+<docs-step title="Bind the password field">
+Add the `[field]` directive to the password input:
+
+```html
+<input type="password" [field]="loginForm.password" />
+```
+
+</docs-step>
+
+<docs-step title="Bind the checkbox field">
+Add the `[field]` directive to the checkbox input:
+
+```html
+<input type="checkbox" [field]="loginForm.rememberMe" />
+```
+
+</docs-step>
+
+<docs-step title="Display the form values">
+Below the form, there's a debug section to show current form values. Display each field value using `.value()`:
+
+```html
+<p>Email: {{ loginForm.email().value() }}</p>
+<p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
+<p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
+```
+
+Form field values are signals, so the displayed values update automatically as you type.
+</docs-step>
+
+</docs-workflow>
+
+Great work! You've connected your form to the template and displayed the form values. The `[field]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
+
+Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)!