Translate 02.3-jsx-gotchas.md to Japanese
Kohei TAKATA committed
Jun 27, 2015 at 19:11 UTC
19e1d11d2fe35976686f8084e4cbc893cac8ebc5
1 file changed
+68
docs/docs/02.3-jsx-gotchas.ja-JP.md
new
+68
@@ -0,0 +1,68 @@
1
+---
2
+id: jsx-gotchas
3
+title: JSXの理解
4
+permalink: jsx-gotchas-ja-JP.html
5
+prev: jsx-spread-ja-JP.html
6
+next: interactivity-and-dynamic-uis-ja-JP.html
7
+
8
+---
9
+
10
+JSXはHTMLに似ていますが、重要な違いがいくつかあります。
11
+
12
+> 注意:
13
+> インラインの `style` 属性のようなDOMの違いについては、[こちら](/react/docs/dom-differences.html)を確認してください。
14
+
15
+## HTMLのエンティティ
16
+
17
+以下のように、JSXの文字のテキストの中にHTMLのエンティティを挿入することができます。
18
+
19
+```javascript
20
+<div>First · Second</div>
21
+```
22
+
23
+動的なコンテンツとしてHTMLのエンティティを表示する際に、ダブルエスケープを書いてしまうことがあるかと思いますが、Reactはデフォルトで広い範囲のXSS攻撃を防ぐために表示しようとしている全ての文字列をエスケープします。
24
+
25
+```javascript
26
+// 悪い例: 以下は "First · Second" を表示します。
27
+<div>{'First · Second'}</div>
28
+```
29
+
30
+この問題を防止するためにはいくつかの方法があります。最も簡単な方法は、unicodeの文字を直でJavaScriptに記述する方法です。その際には、ファイルがUTF-8で保存されていることと、ブラウザが正しく表示できるように、UTF-8で表示する命令が正しくセットされていることを確認してください。
31
+
32
+```javascript
33
+<div>{'First · Second'}</div>
34
+```
35
+
36
+さらに安全な代替の方法は、[エンティティに対応するunicodeの数値](http://www.fileformat.info/info/unicode/char/b7/index.htm)を見つけて、JavaScriptの文字列の中でそれを使うことです。
37
+
38
+```javascript
39
+<div>{'First \u00b7 Second'}</div>
40
+<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
41
+```
42
+
43
+配列と文字列とJSXの要素を混ぜて使うこともできます。
44
+
45
+```javascript
46
+<div>{['First ', <span>·</span>, ' Second']}</div>
47
+```
48
+
49
+最後の手段として、常に[生のHTMLを挿入](/react/tips/dangerously-set-inner-html.html)することもできます。
50
+
51
+```javascript
52
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
53
+```
54
+
55
+
56
+## カスタムされたHTMLの属性
57
+
58
+HTMLの仕様書に存在しない要素をネイティブなHTML要素に渡した場合は、Reactはそれらをレンダリングしません。カスタムした属性を使う場合は、 `data-` を頭につけてください。
59
+
60
+```javascript
61
+<div data-custom-attribute="foo" />
62
+```
63
+
64
+`aria-` から始まる[Webアクセシビリティ](http://www.w3.org/WAI/intro/aria)属性はプロパティをレンダリングします。
65
+
66
+```javascript
67
+<div aria-hidden={true} />
68
+```