Merge pull request #59 from imamoto/translation-tutorial-top-pt1

tutorial/toh-pt1.mdの翻訳

Author: lacolaco

aio-ja/content/tutorial/toh-pt1.md

@@ -1,224 +1,239 @@
-# The Hero Editor
+{@a the-hero-editor}
+# ヒーローエディター
 
-The application now has a basic title.
-Next you will create a new component to display hero information
-and place that component in the application shell.
+アプリケーションに基本的なタイトルが追加されました。
+次に、ヒーロー情報を表示するための新しいコンポーネントを作成し、
+そのコンポーネントをアプリケーションシェルに配置します。
 
-## Create the heroes component
+{@a create-the-heroes-component}
+## heroes コンポーネントを作成する
 
-Using the Angular CLI, generate a new component named `heroes`.
+Angular CLIを使用して､`heroes`という名前の新しいコンポーネントを生成します。
 
 <code-example language="sh" class="code-shell">
   ng generate component heroes
 </code-example>
 
-The CLI creates a new folder, `src/app/heroes/` and generates
-the three files of the  `HeroesComponent`.
+CLIは`src/app/heroes/`という新しいフォルダを作成し、
+`HeroesComponent`に関する3つのファイルを生成します。
 
-The `HeroesComponent` class file is as follows:
+`HeroesComponent`のクラスファイルは次のとおりです。
 
 <code-example 
   path="toh-pt1/src/app/heroes/heroes.component.ts" region="v1" 
-  title="app/heroes/heroes.component.ts (initial version)" linenums="false">
+  title="app/heroes/heroes.component.ts (初期バージョン)" linenums="false">
 </code-example>
 
-You always import the `Component` symbol from the Angular core library
-and annotate the component class with `@Component`.
+常にAngularコアライブラリから`Component`シンボルをインポートし、
+コンポーネントクラスに`@Component`で注釈を付けます。
 
-`@Component` is a decorator function that specifies the Angular metadata for the component.
+`@Component`は、コンポーネントのAngularメタデータを指定するデコレータ関数です。
 
-The CLI generated three metadata properties:
+CLIは3つのメタデータプロパティを生成しました:
 
-1. `selector`&mdash; the components CSS element selector
-1. `templateUrl`&mdash; the location of the component's template file.
-1. `styleUrls`&mdash; the location of the component's private CSS styles.
+1. `selector`&mdash; コンポーネントのCSS要素セレクタ
+1. `templateUrl`&mdash; コンポーネントのテンプレートファイルの場所
+1. `styleUrls`&mdash; コンポーネントのプライベートCSSスタイルの場所
 
 {@a selector}
 
-The [CSS element selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors),
-`'app-heroes'`, matches the name of the HTML element that identifies this component within a parent component's template.
+[CSS要素セレクタ](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)である
+`'app-heroes'`は、親コンポーネントのテンプレート内でこのコンポーネントを識別するHTML要素の名前と一致します。
 
-The `ngOnInit` is a [lifecycle hook](guide/lifecycle-hooks#oninit) 
-Angular calls `ngOnInit` shortly after creating a component.
-It's a good place to put initialization logic.
+`ngOnInit`は[ライフサイクルフック](guide/lifecycle-hooks#oninit)です。
+Angularは、コンポーネントの作成直後に`ngOnInit`を呼び出します。
+初期化ロジックを置くのに適しています。
 
-Always `export` the component class so you can `import` it elsewhere ... like in the `AppModule`.
+常にコンポーネントクラスを`export`するので、`AppModule`のようにいつでも他の場所に`import`できます。
 
-### Add a _hero_ property
+{@a add-a-hero-property}
+### _hero_ プロパティを追加する
 
-Add a `hero` property to the `HeroesComponent` for a hero named "Windstorm."
+"Windstorm"という名前のヒーローのために、`HeroesComponent`に`hero`プロパティを追加します。
 
-<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" title="heroes.component.ts (hero property)" linenums="false">
+<code-example path="toh-pt1/src/app/heroes/heroes.component.ts" region="add-hero" title="heroes.component.ts (hero プロパティ)" linenums="false">
 </code-example>
 
-### Show the hero
+{@a show-the-hero}
+### ヒーローを表示する
 
-Open the `heroes.component.html` template file.
-Delete the default text generated by the Angular CLI and 
-replace it with a data binding to the new `hero` property.  
+`heroes.component.html`テンプレートファイルを開きます。
+Angular CLIで生成されたデフォルトのテキストを削除し、
+それを新しい`hero`プロパティへのデータバインディングに置き換えてください。
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" title="heroes.component.html" region="show-hero-1" linenums="false">
 </code-example>
 
-## Show the _HeroesComponent_ view
+{@a show-the-heroescomponent-view}
+## _HeroesComponent_ ビューを表示する
 
-To display the `HeroesComponent`, you must add it to the template of the shell `AppComponent`.
+`HeroesComponent`を表示するには、それをアプリケーションシェルの`AppComponent`のテンプレートに追加する必要があります。
 
-Remember that `app-heroes` is the [element selector](#selector) for the `HeroesComponent`. 
-So add an `<app-heroes>` element to the `AppComponent` template file, just below the title.
+`app-heroes`は`HeroesComponent`の[要素セレクタ](#selector)であることを思い出してください。
+なので、`AppComponent`のテンプレートファイルで、タイトルの直下に`<app-heroes>`要素を追加してください。
 
 <code-example path="toh-pt1/src/app/app.component.html" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-Assuming that the CLI `ng serve` command is still running,
-the browser should refresh and display both the application title and the hero name.
+CLIの`ng serve`コマンドがまだ実行中であれば、
+ブラウザが更新され、アプリケーションのタイトルとヒーローの名前が表示されます。
 
-## Create a Hero class
+{@a create-a-hero-class}
+## Hero クラスを作成する
 
-A real hero is more than a name.
+本当のヒーローは名前だけではありません。
 
-Create a `Hero` class in its own file in the `src/app` folder.
-Give it `id` and `name` properties.
+`src/app`フォルダ内の独自のファイルに、`Hero`クラスを作成します。
+それに`id`プロパティと`name`プロパティを与えます。
 
 <code-example path="toh-pt1/src/app/hero.ts"  title="src/app/hero.ts" linenums="false">
 </code-example>
 
 
-Return to the `HeroesComponent` class and import the `Hero` class.
+`HeroesComponent`クラスに戻り、`Hero`クラスをインポートします。
 
-Refactor the component's `hero` property to be of type `Hero`.
-Initialize it with an `id` of `1` and the name `Windstorm`.
+コンポーネントの`hero`プロパティを`Hero`型にリファクタリングします。
+それを、`1`という`id`と`Windstorm`という名前で初期化します。
 
-The revised `HeroesComponent` class file should look like this:
+改訂された`HeroesComponent`のクラスファイルは、次のようになります。
 
 <code-example path="toh-pt1/src/app/heroes/heroes.component.ts" linenums="false"
   title= "src/app/heroes/heroes.component.ts">
 </code-example>
 
-The page no longer displays properly because you changed the hero from a string to an object.
+ヒーローを文字列からオブジェクトに変更したため、ページが正しく表示されなくなりました。
 
-## Show the hero object
+{@a show-the-hero-object}
+## ヒーローオブジェクトを表示する
 
-Update the binding in the template to announce the hero's name
-and show both `id` and `name` in a details layout like this:
+ヒーローの名前を知らせるためにテンプレートのバインディングを更新し、
+次のような詳細レイアウトで`id`と`name`の両方を表示します。
 
 <code-example 
   path="toh-pt1/src/app/heroes/heroes.component.1.html"
   region="show-hero-2" 
-  title="heroes.component.html (HeroesComponent's template)" linenums="false">
+  title="heroes.component.html (HeroesComponent のテンプレート)" linenums="false">
 </code-example>
 
-The browser refreshes and display's the hero's information.
+ブラウザが更新され、ヒーローの情報が表示されます。
 
-## Format with the _UppercasePipe_
+{@a format-with-the-uppercasepipe}
+## _UppercasePipe_ で書式設定する
 
-Modify the `hero.name` binding like this.
+`hero.name`のバインディングをこのように修正してください。
 <code-example
   path="toh-pt1/src/app/heroes/heroes.component.html"
   region="pipe">
 </code-example>
 
-The browser refreshes and now the hero's name is displayed in capital letters.
+ブラウザが更新され、ヒーローの名前が大文字で表示されるようになります。
 
-The word `uppercase` in the interpolation binding, 
-right after the pipe operator ( | ),
-activates the built-in `UppercasePipe`.
+補間バインディングの中、パイプ演算子 ( | ) の直後にある単語`uppercase`は、
+組み込みの`UppercasePipe`を起動します。
 
-[Pipes](guide/pipes) are a good way to format strings, currency amounts, dates and other display data.
-Angular ships with several built-in pipes and you can create your own.
+[パイプ](guide/pipes)は、文字列、通貨金額、日付や、その他の表示データを書式設定するのに適しています。
+Angularは複数のビルトインパイプを備えており、あなた自身が独自のパイプを作ることもできます。
 
-## Edit the hero
+{@a edit-the-hero}
+## ヒーローを編集する
 
-Users should be able to edit the hero name in an `<input>` textbox.
+ユーザーは`<input>`テキストボックスでヒーローの名前を編集できるべきです。
 
-The textbox should both _display_ the hero's `name` property
-and _update_ that property as the user types.
-That means data flow from the component class _out to the screen_ and
-from the screen _back to the class_.
+テキストボックスにはヒーローの`name`プロパティが _表示_ され、
+ユーザーの入力時にそのプロパティが _更新_ されます。
+これは、コンポーネントクラスから _画面へ_ 、
+そして画面から _コンポーネントクラスへの_ データフローを意味します。
 
-To automate that data flow, setup a two-way data binding between the `<input>` form element and the `hero.name` property.
+そのデータフローを自動化するには、`<input>`フォーム要素と`hero.name`プロパティとの間に双方向データバインディングを設定します。
 
-### Two-way binding
+{@a two-way-binding}
+### 双方向データバインディング
 
-Refactor the details area in the `HeroesComponent` template so it looks like this:
+`HeroesComponent`テンプレートの詳細エリアをリファクタリングすると、次のようになります。
 
-<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" title="src/app/heroes/heroes.component.html (HeroesComponent's template)" linenums="false">
+<code-example path="toh-pt1/src/app/heroes/heroes.component.1.html" region="name-input" title="src/app/heroes/heroes.component.html (HeroesComponent のテンプレート)" linenums="false">
 
 </code-example>
 
-**[(ngModel)]** is Angular's two-way data binding syntax. 
+**[(ngModel)]** は、Angularの双方向データバインディング構文です。
 
-Here it binds the `hero.name` property to the HTML textbox so that data can flow _in both directions:_ from the `hero.name` property to the textbox, and from the textbox back to the `hero.name`.
+これで`hero.name`プロパティをHTMLのテキストボックスにバインドするので、
+`hero.name`プロパティからテキストボックスへ、テキストボックスから`hero.name`プロパティへ、 _双方向に_ データを流すことができます。
 
-### The missing _FormsModule_
+{@a the-missing-formsmodule}
+### 見つからない _FormsModule_
 
-Notice that the app stopped working when you added `[(ngModel)]`.
+`[(ngModel)]`を追加したときにアプリケーションが動かなくなったことに注目してください。
 
-To see the error, open the browser development tools and look in the console
-for a message like
+エラーを表示するには、ブラウザの開発ツールを開き、
+コンソールで次のようなメッセージを探します、
 
 <code-example language="sh" class="code-shell">
 Template parse errors:
 Can't bind to 'ngModel' since it isn't a known property of 'input'.
 </code-example>
 
-Although `ngModel` is a valid Angular directive, it isn't available by default. 
+`ngModel`は有効なAngularディレクティブですが、デフォルトでは使用できません。
 
-It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
+これはオプションの`FormsModule`に属しており、使用するにはそのモジュールをオプトインする必要があります。
 
 ## _AppModule_
 
-Angular needs to know how the pieces of your application fit together
-and what other files and libraries the app requires.
-This information is called _metadata_
+Angularでは、アプリケーションの部品がどのように合わさるかや、
+アプリケーションが必要としている他のファイルやライブラリを知る必要があります。
+この情報を _メタデータ_ といいます。
 
-Some of the metadata is in the `@Component` decorators that you added to your component classes.
-Other critical metadata is in [`@NgModule`](guide/ngmodule) decorators.
+一部のメタデータは、コンポーネントクラスに追加した`@Component`デコレータ内にあります。
+その他の重要なメタデータは[`@NgModule`](guide/ngmodule)デコレータ内にあります。
 
-The most important `@NgModule`decorator annotates the top-level **AppModule** class.
+最も重要な`@NgModule`デコレータは、トップレベルの **AppModule** クラスに注釈を付けます。
 
-The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
-This is where you _opt-in_ to the `FormsModule`.
+Angular CLI は、プロジェクトを作成するときに`src/app/app.module.ts`に`AppModule`クラスを作成しました。
+ここで`FormsModule`をオプトインします。
 
-### Import _FormsModule_
+{@a import-formsmodule}
+### _FormsModule_ をインポートする
 
-Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the `@angular/forms` library. 
+`AppModule` (`app.module.ts`) を開き、`@angular/forms`ライブラリから`FormsModule`シンボルをインポートします。
 
-<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule symbol import)"
+<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule シンボルのインポート)"
  region="formsmodule-js-import">
 </code-example>
 
-Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
+それから、`FormsModule`を`@NgModule`メタデータの`imports`配列に追加します。
+この配列には、アプリケーションに必要な外部モジュールのリストが含まれています。
 
 <code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts ( @NgModule imports)"
 region="ng-imports">
 </code-example>
 
-When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
+ブラウザが更新されると、アプリケーションは再び動作するはずです。ヒーローの名前を編集し、テキストボックスの上にある`<h2>`に即座に変更が反映されていることを確認できます。
 
-### Declare _HeroesComponent_ 
+{@a declare-heroescomponent}
+### _HeroesComponent_ を宣言する
 
-Every component must be declared in _exactly one_ [NgModule](guide/ngmodule).
+すべてのコンポーネントは、 _ただ1つの_ [NgModule](guide/ngmodule)で宣言されなければなりません。
 
-_You_ didn't declare the `HeroesComponent`.
-So why did the application work?
+_あなたは_ `HeroesComponent`を宣言していません。
+では、なぜアプリケーションは動作したのでしょうか？
 
-It worked because the Angular CLI declared `HeroesComponent` in the `AppModule` when it generated that component.
+アプリケーションが動作したのは、Angular CLI が`HeroesComponent`を生成したときに、`AppModule`でそのコンポーネントの宣言を行っていたからです。
 
-Open `src/app/app.module.ts` and find `HeroesComponent` imported near the top.
+`src/app/app.module.ts`を開き、先頭付近で`HeroesComponent`がインポートされているのを見つけてください。
 <code-example path="toh-pt1/src/app/app.module.ts" region="heroes-import" >
 </code-example>
 
-The `HeroesComponent` is declared in the `@NgModule.declarations` array.
+`HeroesComponent`は、`@NgModule.declarations`配列で宣言されています。
 <code-example path="toh-pt1/src/app/app.module.ts" region="declarations">
 </code-example>
 
-Note that `AppModule`  declares both application components, `AppComponent` and `HeroesComponent`.
+`AppModule`は`AppComponent`と`HeroesComponent`の両方のアプリケーションコンポーネントを宣言しています。
 
 
-## Final code review
+{@a final-code-review}
+## 最終的なコードレビュー
 
-Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.
+あなたのアプリケーションはこのように見えるはずです <live-example></live-example> 。このページで解説したコードファイルは次のとおりです。
 
 <code-tabs>
 
@@ -244,13 +259,13 @@ Your app should look like this <live-example></live-example>. Here are the code
 
 </code-tabs>
 
-## Summary
+{@a summary}
+## まとめ
 
-* You used the CLI to create a second `HeroesComponent`.
-* You displayed the `HeroesComponent` by adding it to the `AppComponent` shell. 
-* You applied the `UppercasePipe` to format the name.
-* You used two-way data binding with the `ngModel` directive.
-* You learned about the `AppModule`.
-* You imported the `FormsModule` in the `AppModule` so that Angular would recognize and apply the `ngModel` directive. 
-* You learned the importance of declaring components in the `AppModule`
-and appreciated that the CLI declared it for you.
+* CLIを使用して、2番目の `HeroesComponent` を作成しました。
+* `HeroesComponent` を `AppComponent` シェルに追加して表示しました。
+* 名前をフォーマットするために、 `UppercasePipe` を適用しました。
+* `ngModel` ディレクティブで双方向データバインディングを使用しました。
+* `AppModule` について学びました。
+* `AppModule` に `FormsModule` をインポートして、Angular `ngModel` ディレクティブを認識して適用するようにしました。
+* `AppModule` でコンポーネントを宣言することの重要性を学び、CLIがあなたのためにその宣言を行っていることを認識しました。