Skip to content

Commit 77b0093

Browse files
committed
Make a sentence reflect the resolution of <em> issue
1 parent aed3392 commit 77b0093

File tree

1 file changed

+5
-6
lines changed

1 file changed

+5
-6
lines changed

content/docs/thinking-in-react.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,13 @@ JSON のデータモデルをユーザーに向けて表示することはよく
4141

4242
![コンポーネント図](../images/blog/thinking-in-react-components.png)
4343

44-
5 種類のコンポーネントがこのシンプルなアプリの中にあることが見て取れます。それぞれの解説の中で、データを表すものについては斜体にしました。
45-
<!-- nkzn注: 日本語フォントは斜体を表現できないことが多いので、別の表現でマークアップしたほうがいいかもしれない => #22 で対応予定 -->
44+
5 種類のコンポーネントがこのシンプルなアプリの中にあることが見て取れます。それぞれの解説の中で、データを表すものについては**太字**にしました。
4645

4746
1. **`FilterableProductTable`(オレンジ色):** このサンプル全体を含む
48-
2. **`SearchBar`(青色):** すべての *ユーザー入力* を受け付ける
49-
3. **`ProductTable`(緑色):** *ユーザー入力* に基づく *データの集合* を表示・フィルタする
50-
4. **`ProductCategoryRow`(水色):** *カテゴリ* を見出しとして表示する
51-
5. **`ProductRow`(赤色):** *商品* を 1 行で表示する
47+
2. **`SearchBar`(青色):** すべての*ユーザー入力*を受け付ける
48+
3. **`ProductTable`(緑色):** *ユーザー入力*に基づく*データの集合*を表示・フィルタする
49+
4. **`ProductCategoryRow`(水色):** *カテゴリ*を見出しとして表示する
50+
5. **`ProductRow`(赤色):***商品*を 1 行で表示する
5251

5352
`ProductTable` を見てみると、表のヘッダー(「Name」や「Price」のラベルを含む)が単独のコンポーネントになっていないことがわかります。これは好みの問題で、コンポーネントにするかしないかは両論あります。今回の例でいえば、ヘッダーを `ProductTable` の一部にしたのは、*データの集合*を描画するという `ProductTable` の責務の一環として適切だったからです。しかしながら、将来ヘッダーが肥大化して複雑になった場合(例えばソート機能を追加した場合など)は、`ProductTableHeader` のようなコンポーネントにするのが適切になるでしょう。
5453

0 commit comments

Comments
 (0)