Skip to content

Commit 54cb686

Browse files
darkss-xyzzydarkss-xyzzy
committed
04-interfacesの和訳を作成
1 parent 02d5a20 commit 54cb686

2 files changed

Lines changed: 147 additions & 48 deletions

File tree

‎adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.en.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Creating an interface
2+
3+
This tutorial lesson demonstrates how to create an interface and include it in a component of your app.
4+
5+
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=YkFSeUeV8Ixtz8pm"/>
6+
7+
## What you'll learn
8+
9+
- Your app has a new interface that it can use as a data type.
10+
- Your app has an instance of the new interface with sample data.
11+
12+
## Conceptual preview of interfaces
13+
14+
[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) are custom data types for your app.
15+
16+
Angular uses TypeScript to take advantage of working in a strongly typed programming environment.
17+
Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another.
18+
Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
19+
20+
In this lesson, you'll create an interface to define properties that represent data about a single housing location.
21+
22+
<docs-workflow>
23+
24+
<docs-step title="Create a new Angular interface">
25+
This step creates a new interface in your app.
26+
27+
In the **Terminal** pane of your IDE:
28+
29+
1. In your project directory, navigate to the `first-app` directory.
30+
1. In the `first-app` directory, run this command to create the new interface.
31+
32+
```shell
33+
34+
ng generate interface housinglocation
35+
36+
```
37+
38+
1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
39+
1. In a browser, open `http://localhost:4200` to see your app.
40+
1. Confirm that the app builds without error.
41+
Correct any errors before you continue to the next step.
42+
</docs-step>
43+
44+
<docs-step title="Add properties to the new interface">
45+
This step adds the properties to the interface that your app needs to represent a housing location.
46+
47+
1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`.
48+
1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
49+
1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example.
50+
51+
<docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
52+
53+
1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
54+
55+
At this point, you've defined an interface that represents data about a housing location including an `id`, `name`, and location information.
56+
</docs-step>
57+
58+
<docs-step title="Create a test house for your app">
59+
You have an interface, but you aren't using it yet.
60+
61+
In this step, you create an instance of the interface and assign some sample data to it.
62+
You won't see this sample data appear in your app yet.
63+
There are a few more lessons to complete before that happens.
64+
65+
1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`.
66+
1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`.
67+
1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface.
68+
69+
<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
70+
71+
1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.
72+
73+
<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
74+
75+
1. Confirm that your `home.ts` file matches this example.
76+
77+
<docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
78+
79+
By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
80+
81+
1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"
82+
83+
<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
84+
85+
1. Correct any errors before you continue to the next step.
86+
</docs-step>
87+
88+
</docs-workflow>
89+
90+
SUMMARY: In this lesson, you created an interface that created a new data type for your app.
91+
This new data type makes it possible for you to specify where `HousingLocation` data is required.
92+
This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required.
93+
94+
For more information about the topics covered in this lesson, visit:
95+
96+
<docs-pill-row>
97+
<docs-pill href="cli/generate/interface" title="ng generate interface"/>
98+
<docs-pill href="cli/generate" title="ng generate"/>
99+
</docs-pill-row>

‎adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,97 @@
1-
# Creating an interface
1+
# インターフェースを作成する
22

3-
This tutorial lesson demonstrates how to create an interface and include it in a component of your app.
3+
このレッスンではインターフェースを作成し、アプリケーションのコンポーネントに組み込む方法を紹介します。
44

55
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=YkFSeUeV8Ixtz8pm"/>
66

7-
## What you'll learn
7+
## 何を学ぶか
88

9-
- Your app has a new interface that it can use as a data type.
10-
- Your app has an instance of the new interface with sample data.
9+
- データ型として利用できる新しいインターフェースの作成
10+
- サンプルデータを持つ新しいインターフェースのインスタンスの作成
1111

12-
## Conceptual preview of interfaces
12+
## インターフェースのコンセプト概要
1313

14-
[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) are custom data types for your app.
14+
[Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html)はアプリケーションで使用するカスタムデータ型です
1515

16-
Angular uses TypeScript to take advantage of working in a strongly typed programming environment.
17-
Strong type checking reduces the likelihood of one element in your app sending incorrectly formatted data to another.
18-
Such type-mismatch errors are caught by the TypeScript compiler and many such errors can also be caught in your IDE.
16+
Angularは強い型付けのプログラミング環境で作業できるようにするためにTypeScriptを使用しています。
17+
強力な型チェックにより、アプリケーション内のある要素が別の要素に誤った形式のデータを送る可能性を減らせます。
18+
このような型の不一致によるエラーはTypeScriptコンパイラによって検出され、多くの場合IDEでも検出できます。
1919

20-
In this lesson, you'll create an interface to define properties that represent data about a single housing location.
20+
このレッスンでは、1つの住宅物件に関するデータを表すプロパティを定義するインターフェースを作成します。
2121

2222
<docs-workflow>
2323

24-
<docs-step title="Create a new Angular interface">
25-
This step creates a new interface in your app.
24+
<docs-step title="新しいAngularインターフェースを作成する">
25+
このステップではアプリケーションに新しいインターフェースを作成します。
2626

27-
In the **Terminal** pane of your IDE:
27+
IDEの**ターミナル**ペインで、
2828

29-
1. In your project directory, navigate to the `first-app` directory.
30-
1. In the `first-app` directory, run this command to create the new interface.
29+
1. プロジェクトディレクトリ内の、`first-app`ディレクトリに移動します。
30+
1. `first-app`ディレクトリで、このコマンドを実行して新しいインターフェースを作成します。
3131

3232
```shell
3333

3434
ng generate interface housinglocation
3535

3636
```
3737

38-
1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
39-
1. In a browser, open `http://localhost:4200` to see your app.
40-
1. Confirm that the app builds without error.
41-
Correct any errors before you continue to the next step.
38+
1. `ng serve`を実行してアプリケーションをビルドし、`http://localhost:4200`で開発サーバーを起動します。
39+
1. ブラウザで、`http://localhost:4200`を開き、アプリケーションを表示します。
40+
1. アプリケーションがエラーなくビルドされていることを確認します。
41+
次のステップに進む前に、エラーがあれば修正してください。
4242
</docs-step>
4343

44-
<docs-step title="Add properties to the new interface">
45-
This step adds the properties to the interface that your app needs to represent a housing location.
44+
<docs-step title="新しいインターフェースにプロパティを追加する">
45+
このステップでは住宅物件を表すためにアプリケーションが必要とするプロパティをインターフェースに追加します。
4646

47-
1. In the **Terminal** pane of your IDE, start the `ng serve` command, if it isn't already running, to build the app and serve it to `http://localhost:4200`.
48-
1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
49-
1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example.
47+
1. IDEの**ターミナル**ペインで、`ng serve`コマンドがまだ実行されていない場合は起動し、アプリケーションをビルドして`http://localhost:4200`で開発サーバーを起動します。
48+
1. IDEの**編集**ペインで、`src/app/housinglocation.ts`を開きます。
49+
1. `housinglocation.ts`のデフォルトの内容を以下のコードと同じになるように置き換えて、新しいインターフェースを作成します。
5050

51-
<docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
51+
<docs-code header="src/app/housinglocation.tsをこのコードに合わせて更新する" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
5252

53-
1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
53+
1. 変更を保存し、アプリケーションがエラーを表示していないことを確認します。次のステップに進む前に、エラーがあれば修正してください。
5454

55-
At this point, you've defined an interface that represents data about a housing location including an `id`, `name`, and location information.
55+
ここまでで、`id`と`name`、および場所情報を含む住宅物件データを表すインターフェースを定義しました。
5656
</docs-step>
5757

58-
<docs-step title="Create a test house for your app">
59-
You have an interface, but you aren't using it yet.
58+
<docs-step title="アプリケーション用のテスト用住宅データを作成する">
59+
インターフェースは定義しましたが、まだ使用していません。
6060

61-
In this step, you create an instance of the interface and assign some sample data to it.
62-
You won't see this sample data appear in your app yet.
63-
There are a few more lessons to complete before that happens.
61+
このステップでは、インターフェースのインスタンスを作成し、サンプルデータを割り当てます。
62+
このサンプルデータは、まだアプリケーションには表示されません。
63+
これが表示されるようになるまでには、いくつかのレッスンを進める必要があります。
6464

65-
1. In the **Terminal** pane of your IDE, run the `ng serve` command, if it isn't already running, to build the app and serve your app to `http://localhost:4200`.
66-
1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`.
67-
1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface.
65+
1. IDEの**ターミナル**ペインで、`ng serve`コマンドがまだ実行されていない場合は起動し、アプリケーションをビルドして`http://localhost:4200`で開発サーバーを起動します。
66+
1. IDEの*編集*ペインで、`src/app/home/home.ts`を開きます。
67+
1. `src/app/home/home.ts`で、`Home`が新しいインターフェースを使えるように、既存の`import`文の後にこのimport文を追加します。
6868

69-
<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
69+
<docs-code language="angular-ts" header="src/app/homse/home.tsでHomeをインポートする" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
7070

71-
1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.
71+
1. `src/app/home/home.ts`で、空の`export class Home {}`の定義をコンポーネント内で新しいインターフェースの単一のインスタンスを作成する次のコードに置き換えてください。
7272

73-
<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
73+
<docs-code language="angular-ts" header="src/app/home/home.tsにサンプルデータを追加する" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
7474

75-
1. Confirm that your `home.ts` file matches this example.
75+
1. `home.ts`ファイルが次の例と一致していることを確認してください。
7676

7777
<docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
7878

79-
By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
79+
`Home`クラスに`HousingLocation`型の`housingLocation`プロパティを追加することで、データがインターフェースの定義どおりであることを確認できます。もしデータがインターフェースの定義を満たしていなければ、IDEがその旨のエラーを表示して知らせてくれます。
8080

81-
1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"
81+
1. 変更を保存し、アプリケーションにエラーがないことを確認してください。ブラウザを開き、アプリケーションが引き続き"housing-location works!"というメッセージを表示していることを確認してください。
8282

83-
<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
83+
<img alt="ロゴ、フィルター用のテキスト入力ボックス、検索ボタン、そして'housing-location works!'というメッセージを表示しているhomes-appのブラウザフレーム" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
8484

85-
1. Correct any errors before you continue to the next step.
85+
1. 次のステップに進む前に、エラーがあれば修正してください。
8686
</docs-step>
8787

8888
</docs-workflow>
8989

90-
SUMMARY: In this lesson, you created an interface that created a new data type for your app.
91-
This new data type makes it possible for you to specify where `HousingLocation` data is required.
92-
This new data type also makes it possible for your IDE and the TypeScript compiler can ensure that `HousingLocation` data is used where it's required.
90+
SUMMARY: このレッスンでは、アプリケーションで新しいデータ型を定義するインターフェースを作成しました。
91+
この新しいデータ型によって、`HousingLocation`データが必要となる箇所を明確に指定できます。
92+
また、この新しいデータ型で、IDEとTypeScriptコンパイラが`HousingLocation`データが正しく使われているかどうかを検証できるようになります。
9393

94-
For more information about the topics covered in this lesson, visit:
94+
このレッスンで扱った内容の詳細については、次のページをご覧ください:
9595

9696
<docs-pill-row>
9797
<docs-pill href="cli/generate/interface" title="ng generate interface"/>

0 commit comments

Comments
 (0)