Skip to content

Conversation

@kappy
Copy link
Contributor

@kappy kappy commented Nov 19, 2017

tutorial/toh-pt2.mdを日本語に翻訳しました。
レビューお願いいたします。
#54

@googlebot
Copy link

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.


  • If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
  • If your company signed a CLA, they designated a Point of Contact who decides which employees are authorized to participate. You may need to contact the Point of Contact for your company and ask to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the project maintainer to go/cla#troubleshoot.
  • In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again.

@kappy
Copy link
Contributor Author

kappy commented Nov 19, 2017

@googlebot I signed it!

@googlebot
Copy link

CLAs look good, thanks!



## Create mock heroes
## ヒーローのmockを作成する
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

全体を通して、mockモックで通じると思いますので、カタカナでOKです

* Insert an `<li>` within the `<ul>` that displays properties of a `hero`.
* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly).
* `<h2>` を先頭に追加してください
* その下にHTMLの順序付けられていないリスト (`<ul>`) を追加してください
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


The [`*ngFor`](guide/template-syntax#ngFor) is Angular's _repeater_ directive.
It repeats the host element for each element in a list.
[`*ngFor`](guide/template-syntax#ngFor) はAngularの _repeater_ ディレクティブです。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

繰り返し ディレクティブ としましょう

* `hero` holds the current hero object for each iteration through the list.
* `<li>` はホスト要素です
* `heroes` `HeroesComponent` クラスのリストです
* `hero` は各ループ毎のリストに、現在のヒーローオブジェクトを保持しています
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

保持します


You define private styles either inline in the `@Component.styles` array or
as stylesheet file(s) identified in the `@Component.styleUrls` array.
プライベートなスタイルは `@Component.styles` 内にインラインで定義するか、スタイルシートファイルとして特定の `@Component.styleUrls` 内に定義します。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Component.styleUrls 配列の中で識別されるスタイルシートファイルとして


The template still refers to the component's old `hero` property which no longer exists.
Rename `hero` to `selectedHero`.
テンプレートはまだ、存在しなくなったコンポーネントの古い `hero` プロパティを参照しています。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

テンプレートはもう存在していないコンポーネントの古い hero プロパティをまだ参照しています。

### なにが起きたのか?

When the app starts, the `selectedHero` is `undefined` _by design_.
アプリを起動した際、 `selectedHero` _設計により_ `undefined` です。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_意図的に_

The details area is blank.
Click a hero and its details appear.
ブラウザを更新すると、名前の一覧が再度表示されます。
detailsエリアは空白になっています。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

詳細のエリア

### なぜこれが動くのか

When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to worry about.
`selectedHero` が定義されていないとき、 `ngIf` はDOMからヒーローの詳細を削除します。これらは `selectedHero` のバインディングの役割ではありません。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

心配する `selectedHero` へのバインディングは存在しません`


The Angular [class binding](guide/template-syntax#class-binding) makes it easy to add and remove a CSS class conditionally.
Just add `[class.some-css-class]="some-condition"` to the element you want to style.
Angularの [class binding](guide/template-syntax#class-binding) は条件がついたCSSクラスの追加と削除を容易にします。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

クラスバインディング でよいです

@lacolaco
Copy link
Collaborator

翻訳ありがとうございます!いくつかの部分で修正をお願いします 🙇

@kappy
Copy link
Contributor Author

kappy commented Nov 19, 2017

@lacolaco 修正いたしました。再度レビューよろしくお願いいたします。🙇

@lacolaco
Copy link
Collaborator

修正ありがとうございました! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants