Skip to content

Commit cd1bddf

Browse files
darkss-xyzzydarkss-xyzzy
authored
feat: translate tutorial first app 05 (#1174)
* 04-interfacesの和訳を作成 * 05-inputsの和訳を作成
1 parent bef0828 commit cd1bddf

2 files changed

Lines changed: 75 additions & 22 deletions

File tree

‎adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.en.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Add an input parameter to the component
2+
3+
This tutorial lesson demonstrates how to create a component `input` and use it to pass data to a component for customization.
4+
5+
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&amp;start=241"/>
6+
7+
NOTE: This video reflects an older syntax, but the main concepts remain valid.
8+
9+
## What you'll learn
10+
11+
Your app's `HousingLocation` template has a `HousingLocation` property to receive input.
12+
13+
## Conceptual preview of Inputs
14+
15+
[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component.
16+
17+
In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component.
18+
19+
Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides.
20+
21+
<docs-workflow>
22+
23+
<docs-step title="Import the input() function">
24+
In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component.
25+
26+
<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
27+
28+
</docs-step>
29+
30+
<docs-step title="Add the Input property">
31+
Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`.
32+
33+
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
34+
35+
You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
36+
37+
</docs-step>
38+
39+
<docs-step title="Pass data to the input">
40+
Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
41+
42+
<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
43+
44+
</docs-step>
45+
46+
</docs-workflow>
47+
48+
SUMMARY: In this lesson, you created a new `input` property. You also used the `.required` method to ensure the signal value is always defined.
49+
50+
<docs-pill-row>
51+
<docs-pill href="guide/components/inputs" title="Accepting data with input properties"/>
52+
<docs-pill href="guide/components/outputs" title="Custom events with outputs"/>
53+
</docs-pill-row>

‎adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
# Add an input parameter to the component
1+
# コンポーネントに入力パラメーターを追加する
22

3-
This tutorial lesson demonstrates how to create a component `input` and use it to pass data to a component for customization.
3+
このチュートリアルレッスンでは`input`を作成し、それを使ってコンポーネントにデータを渡してカスタマイズする方法を紹介します。
44

55
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&amp;start=241"/>
66

7-
NOTE: This video reflects an older syntax, but the main concepts remain valid.
7+
NOTE: この動画は古い構文を使っていますが、主要なコンセプトは今でも有効です。
88

9-
## What you'll learn
9+
## 何を学ぶか
1010

11-
Your app's `HousingLocation` template has a `HousingLocation` property to receive input.
11+
アプリケーションの`HousingLocation`コンポーネントのテンプレートには、入力を受け取るための`HousingLocation`プロパティがあります。
1212

13-
## Conceptual preview of Inputs
13+
## inputプロパティのコンセプト概要
1414

15-
[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component.
15+
[Inputs](api/core/input)を使うと、親コンポーネントから渡されるデータを子コンポーネントで受け取れるようになります。
1616

17-
In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component.
17+
このレッスンでは、コンポーネントで表示されるデータをカスタマイズできるようにするため、`HousingLocation`コンポーネント内に`input`プロパティを定義します。
1818

19-
Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides.
19+
詳しく学ぶには[inputプロパティでデータを受け取る](guide/components/inputs)ガイドと[outputを使ったカスタムイベント](guide/components/outputs)ガイドを参照して下さい。
2020

2121
<docs-workflow>
2222

23-
<docs-step title="Import the input() function">
24-
In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component.
23+
<docs-step title="input()関数をインポートする">
24+
コードエディタ―で、`HousingLocation`コンポーネントに`@angular/core`から`input`ヘルパーメソッドをインポートします。
2525

26-
<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
26+
<docs-code header="housing-location.tsでinputをインポートする" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
2727

2828
</docs-step>
2929

30-
<docs-step title="Add the Input property">
31-
Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`.
30+
<docs-step title="inputプロパティを追加する">
31+
必須のプロパティであるhousingLocationを追加し、`HousingLocationInfo`型として`input.required()`を使って初期化します。
3232

33-
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
33+
<docs-code header="housing-location.tsでinputプロパティを宣言する" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
3434

35-
You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
35+
親コンポーネントが値を必ず提供しなければならないことを示すために、`input`の`required`メソッドを呼び出す必要があります。例のアプリケーションでは、この値は設計上必ず渡されます。`.required()`を呼ぶことで、TypeScriptコンパイラがこの制約をチェックし、さらにテンプレートでコンポーネントが使用される際に、このプロパティを非nullとして扱います。
3636

3737
</docs-step>
3838

39-
<docs-step title="Pass data to the input">
40-
Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
39+
<docs-step title="inputにデータを渡す">
40+
`Home`コンポーネントからHousingLocationコンポーネントの`housingLocation`プロパティへ`housingLocation`の値を渡します。
4141

42-
<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
42+
<docs-code language="angular-ts" header="home.tsでHousingLocation用のinputプロパティを宣言する" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
4343

4444
</docs-step>
4545

4646
</docs-workflow>
4747

48-
SUMMARY: In this lesson, you created a new `input` property. You also used the `.required` method to ensure the signal value is always defined.
48+
SUMMARY: このレッスンでは、新しい`input`プロパティを作成しました。また、`.required`メソッドを使うことで、シグナル値が常に定義されていることを保証します。
4949

5050
<docs-pill-row>
51-
<docs-pill href="guide/components/inputs" title="Accepting data with input properties"/>
52-
<docs-pill href="guide/components/outputs" title="Custom events with outputs"/>
51+
<docs-pill href="guide/components/inputs" title="inputプロパティでデータを受け取る"/>
52+
<docs-pill href="guide/components/outputs" title="outputを使ったカスタムイベント"/>
5353
</docs-pill-row>

0 commit comments

Comments
 (0)