diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 3dcf2ac26..5c5080b10 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX In Depth
+title: JSX を深く理解する
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+JSX とは、つまるところ `React.createElement(component, props, ...children)` の糖衣構文にすぎません。例として、次の JSX コードを見てみましょう。
 
 ```js
 <MyButton color="blue" shadowSize={2}>
@@ -21,7 +21,7 @@ Fundamentally, JSX just provides syntactic sugar for the `React.createElement(co
 </MyButton>
 ```
 
-compiles into:
+これは以下のようにコンパイルされます。
 
 ```js
 React.createElement(
@@ -31,13 +31,13 @@ React.createElement(
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+子要素を持たない場合には、自己クローズ (self-closing) タグを利用することもできます。次のコードを見てください。
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+これは以下のようにコンパイルされます。
 
 ```js
 React.createElement(
@@ -47,19 +47,19 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+具体的に JSX がどのように JavaScript へ変換されるのかをテストしたい場合は、[オンライン Babel コンパイラ](babel://jsx-simple-example)で試すことができます。
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+## React 要素の型を指定する {#specifying-the-react-element-type}
 
-The first part of a JSX tag determines the type of the React element.
+JSX タグの先頭の部分は、React 要素の型を決定しています。
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+大文字で始まる型は JSX タグが React コンポーネントを参照していることを示しています。このような JSX タグはコンパイルを経てその大文字で始まる変数を直接参照するようになります。つまり JSX の `<Foo />` 式を使用する場合、`Foo` がスコープになければなりません。
 
-### React Must Be in Scope {#react-must-be-in-scope}
+### React がスコープ内にあること {#react-must-be-in-scope}
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
+JSX は `React.createElement` の呼び出しへとコンパイルされるため、`React` ライブラリは常に JSX コードのスコープ内にある必要があります。
 
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+例えば以下のコードでは、`React` も `CustomButton` も JavaScript から直接は参照されていませんが、両方ともインポートされていることが必要です。
 
 ```js{1,2,5}
 import React from 'react';
@@ -71,11 +71,11 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+JavaScript のバンドルツールを使わずに `<script>` タグから React を読み込んでいる場合は、`React` はグローバル変数として既にスコープに入っています。
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### JSX 型にドット記法を使用する {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+JSX の中においては、ドット記法を使うことによって React コンポーネントを参照することもできます。これは単一のモジュールがたくさんの React コンポーネントをエクスポートしているような場合に便利です。例えば、`MyComponents.DatePicker` というコンポーネントがあるのであれば、次のように JSX 内から直接利用することができます。
 
 ```js{10}
 import React from 'react';
@@ -91,49 +91,49 @@ function BlueDatePicker() {
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### ユーザー定義のコンポーネントの名前は大文字で始めること {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+ある要素の型が小文字から始まっているような場合、それは `<div>` や `<span>` のような組み込みのコンポーネントを参照しており、これらはそれぞれ `'div'` や `'span'` といった文字列に変換されて `React.createElement` に渡されます。一方で `<Foo />` のように大文字で始まる型は `React.createElement(Foo)` にコンパイルされ、JavaScript ファイルにおいて定義あるいはインポートされたコンポーネントを参照します。
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+コンポーネントを命名するときには、大文字から始めるようにしてください。もしすでに小文字から始まるコンポーネントを作ってしまっていたら、JSX 内で利用する前にいちど大文字から始まる変数に代入しておきましょう。
 
-For example, this code will not run as expected:
+例えば、以下のコードは期待通りには動きません。
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// 間違った例。これはコンポーネントなので、大文字ではじめなければ行けません。
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // 正しい例。div は HTML タグなので、<div> と書くのは正解です。
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // 間違った例。大文字ではじまっていないため、React は <hello /> を HTML タグと認識してしまいます。
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+`hello` を `Hello` に書き換え、`<Hello />` を使って参照するようにすれば、このコードはきちんと動作するようになります。
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// 正しい例。コンポーネントなので大文字からはじまっています。
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // 正しい例。div は HTML タグなので、<div> と書くのは正解です。
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // 正しい例。大文字ではじまっているため、React は <Hello /> がコンポーネントだと認識できます。
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### 実行時に型を選択する {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+一般的な式を React の要素の型として使用することはできません。どうしても一般的な式を使って要素の型を示したいのであれば、まずその式を大文字から始まる変数に代入してから利用しましょう。これはプロパティの値に応じて異なるコンポーネントを表示し分けたいような場合によくあるケースです。
 
 ```js{10,11}
 import React from 'react';
@@ -145,12 +145,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // 間違った例。式は JSX の型に指定できません。
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+大文字から始まる変数に型を代入することで、上のコードをきちんと動作するようにしてみましょう。
 
 ```js{10-12}
 import React from 'react';
@@ -162,27 +162,27 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // 正しい例。大文字で始まる変数は JSX の型に指定できます。
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## JSX における props {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+JSX で props を指定するやり方はいくつかあります。
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### プロパティとしての JavaScript 式 {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+任意の JavaScript 式は `{}` で囲むことによって props として渡すことができます。例として次の JSX を見てみましょう。
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+この `MyComponent` について、`props.foo` の値は `10` 、つまり `1 + 2 + 3 + 4` という式が評価されます。
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+`if` 文や `for` 文は JavaScript においては式ではないため、JSX 内で直接利用することはできません。代わりに JSX の近くで間接的に利用してみてください。次がその例です。
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -196,11 +196,11 @@ function NumberDescriber(props) {
 }
 ```
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
+これについては、[条件付きレンダー](/docs/conditional-rendering.html)と[ループ](/docs/lists-and-keys.html)でさらに深く学ぶことができます。
 
-### String Literals {#string-literals}
+### 文字列リテラル {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+文字列リテラルを props として渡すことができます。そのため以下のふたつの JSX の式はまったく等しいものとなります。
 
 ```js
 <MyComponent message="hello world" />
@@ -208,7 +208,7 @@ You can pass a string literal as a prop. These two JSX expressions are equivalen
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+文字列リテラルを渡す際、その値における HTML エスケープは元の形に復元されます。そのため以下のふたつの JSX の式もまったく等しいものとなります。
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,11 +216,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+この振る舞いは多くの場合それほど重要なものではありませんが、包括的な解説の一環としてここでは触れておきます。
 
-### Props Default to "True" {#props-default-to-true}
+### プロパティのデフォルト値は true {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+プロパティに値を与えない場合、デフォルトの値は `true` となります。そのため以下のふたつの JSX の式はまったく等しいものとなります。
 
 ```js
 <MyTextBox autocomplete />
@@ -228,11 +228,11 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+特別な理由がある場合を除いて、このように値を省略することは推奨していません。[ES6 におけるオブジェクトの簡略表記](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015)においては、`{foo}` は `{foo: true}` ではなく `{foo: foo}` を意味するため、HTML の動作に似せて作られたこの機能はかえって混乱をきたす可能性があります。
 
-### Spread Attributes {#spread-attributes}
+### 属性の展開 {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+`props` オブジェクトがあらかじめ存在しており、それを JSX に渡したいような場合は `...` を「スプレッド」演算子として使用することで、props オブジェクトそのものを渡すことができます。そのため以下のふたつの JSX の式はまったく等しいものとなります。
 
 ```js{7}
 function App1() {
@@ -245,7 +245,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+また、コンポーネントが利用する適当なプロパティを取り出しつつ、残りのすべてのプロパティに対してスプレッド演算子を利用することもできます。
 
 ```js{2}
 const Button = props => {
@@ -265,30 +265,30 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+上の例では、`kind` プロパティは無事に取り出され、DOM 中の `<button>` 要素には*渡されていません*。
+残りのプロパティは `...other` オブジェクトにより渡され、このコンポーネントを柔軟性の高いものにしています。上記のコードは `onClick` や `children` プロパティを渡していることが見てとれるはずです。
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+スプレッド演算子は便利ではありますが、コンポーネント内で利用しないプロパティを不用意に渡してしまったり、意味をなさない HTML 属性を DOM に渡してしまうようなことが容易にありえます。そのためこの構文は慎重に利用してください。
 
-## Children in JSX {#children-in-jsx}
+## JSX における子要素 {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+開始タグと終了タグの両方を含む JSX 式においては、タグに囲まれた部分は、`props.children` という特別なプロパティとして渡されます。このような子要素を渡す方法はいくつかあります。
 
-### String Literals {#string-literals-1}
+### 文字列リテラル {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+開始タグと終了タグの間に文字列を挟んでいる場合、その文字列が `props.children` となります。これは HTML 要素を JSX 内で利用するような場合よくあるケースです。次の例を見てください。
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+この JSX は正しく動作します。この場合 `props.children` は `MyComponent` において、単なる文字列 `"Hello world!"` となります。HTML エスケープは元の文字列に復元されるため、多くの場合は以下のように HTML を書くように JSX を書くことができます。
 
 ```html
 <div>This is valid HTML &amp; JSX at the same time.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX は行の先頭と末尾の空白文字を削除し、また空白行も削除します。タグに隣接する改行も削除され、文字列リテラル内での改行は 1 つの空白文字に置き換えられます。そのため以下の例はすべて同じものを表示します。
 
 ```js
 <div>Hello World</div>
@@ -308,9 +308,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### 子要素としての JSX 要素 {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+JSX 要素を子要素として渡すこともできます。これはネストしたコンポーネントを表示したいときに活用することができます。
 
 ```js
 <MyContainer>
@@ -319,7 +319,7 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+異なる型の子要素を混在させることができるためため、文字列リテラルを JSX 要素と同時に子要素として渡すことができます。この点においても JSX と HTML は似ており、次のような例は JSX としても HTML としても正しく動作します。
 
 ```html
 <div>
@@ -331,13 +331,13 @@ You can mix together different types of children, so you can use string literals
 </div>
 ```
 
-A React component can also return an array of elements:
+また React コンポーネントは要素の配列を返すこともできます。
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // リスト化するだけのために要素を用意する必要はありません！
   return [
-    // Don't forget the keys :)
+    // key 属性を書き忘れないようにしてください :)
     <li key="A">First item</li>,
     <li key="B">Second item</li>,
     <li key="C">Third item</li>,
@@ -345,9 +345,9 @@ render() {
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### 子要素としての JavaScript 式 {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+任意の JavaScript の式は `{}` で囲むことによって子要素として渡すことができます。そのため以下の JSX の式はまったく等しいものとなります。
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,7 +355,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+これは長さの決まっていない JSX 式のリストを表示したいような場合に特に便利に使うことができます。次の例は HTML の表を表示します。
 
 ```js{2,9}
 function Item(props) {
@@ -372,7 +372,7 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+JavaScript の式は異なる型の子要素と併用することができるため、テンプレートリテラルの代わりに次のような書き方をすることもできます。
 
 ```js{2}
 function Hello(props) {
@@ -380,12 +380,12 @@ function Hello(props) {
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### 子要素としての関数 {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+JSX タグに挟まれた JavaScript 式は、多くの場合は文字列や React 要素、あるいはこれらの要素のリストとして評価されます。ただし、`props.children` はあらゆるプロパティと同様に任意のデータを渡すことができ、そのデータとは必ずしも React がレンダーできるものに限らないということに留意してください。例えば独自コンポーネントに `props.children` を通してコールバックを定義することもできるのです。
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+// numTimes の数だけ子要素のコールバックを呼び出し、コンポーネントを繰り返し作成する
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -403,11 +403,11 @@ function ListOfTenThings() {
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+独自コンポーネントに渡される子要素は、レンダーが実行されるまでに React が理解できる要素に変換されている限りにおいては、どのようなものでも構いません。このようなやり方は一般的ではありませんが、JSX をさらに拡張したくなった時には活用してみてください。
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### 真偽値、null、undefined は無視される {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+真偽値つまり `true` と `false`、`null`、そして `undefined` は子要素として渡すことができます。これらは何もレンダーしません。以下の JSX の式はすべて同じ結果となります。
 
 ```js
 <div />
@@ -423,7 +423,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+これは条件に応じて React 要素を表示する際に活用できます。次の例は `showHeader` が `true` の時に限って `<Header />` が表示されます。
 
 ```js{2}
 <div>
@@ -432,7 +432,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+1 つ注意点として、数値 `0` のように[偽と評価されるいくつかの値](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)は、React によって表示されます。つまり次のコードは `props.messages` が空の配列の時には `0` が表示されてしまうため、期待通りには動作しません。
 
 ```js{2}
 <div>
@@ -442,7 +442,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+`&&` の前の式が必ず真偽値となるようにすれば、期待通りに動作します。
 
 ```js{2}
 <div>
@@ -452,7 +452,7 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+反対に、`false`、`true`、`null`、または `undefined` といった値を表示したいのであれば、まず[文字列に変換](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion)する必要があります。
 
 ```js{2}
 <div>