From 4b08780161b1416c5cadf7de00c3edc7eaa58e67 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Thu, 16 Dec 2021 11:26:05 +0900
Subject: [PATCH 1/3] Translate two articles (JSX and curly braces)

- Writing Markup with JSX
- JavaScript in JSX with Curly Braces
---
 .../javascript-in-jsx-with-curly-braces.md    | 112 +++++++++---------
 .../pages/learn/writing-markup-with-jsx.md    |  90 +++++++-------
 2 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index 1b970c723..970c49716 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,25 +1,25 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: JSX に波括弧で JavaScript を含める
 ---
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX により、JavaScript ファイル内に HTML のようなマークアップを書いて、レンダリングロジックとコンテンツを同じ場所にまとめられるようになります。ときに、そのマークアップの中で JavaScript のロジックを書いたり動的なプロパティを参照したりしたくなることがあります。このような場合、JSX 内で波括弧を使うことで、JavaScript への入り口を開くことができます。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* 引用符を使って文字列を渡す方法
+* 波括弧を使って JSX 内で JavaScript 変数を参照する方法
+* 波括弧を使って JSX 内で JavaScript 関数を呼び出す方法
+* 波括弧を使って JSX 内でオブジェクトを利用する方法
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## 引用符で文字列を渡す {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+JSX に文字列の属性を渡したい場合、それをシングルクオートかダブルクオートで囲みます：
 
 <Sandpack>
 
@@ -41,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+この例では `"https://i.imgur.com/7vQD0fPs.jpg"` と `"Gregorio Y. Zara"` が文字列として渡されています。
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+では `src` や `alt` のテキストを動的に指定したい場合はどうすればいいのでしょう？ **`"` と `"` を `{` と `}` に置き換えることで、JavaScript の値を使う**ことができるのです：
 
 <Sandpack>
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+`className="avatar"` は `"avatar"` という CSS クラス名を指定して画像を円形にしており、`src={avatar}` は `avatar` という名前の JavaScript 変数を読み出している、という違いに注意してください。波括弧を使うことで、マークアップの中で直接 JavaScript を使えるようになるからです。
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## 波括弧は JavaScript 世界への窓口 {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX とは JavaScript を書く特殊な方法のひとつです。つまりその中で JavaScript が使えるということであり、そのための手段が波括弧 `{}` です。以下の例では、とある科学者の名前を `name` として宣言し、それを `<h1>` 内に波括弧を使って埋め込んでいます：
 
 <Sandpack>
 
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes?
+`name` の値を `'Gregorio Y. Zara'` から `'Hedy Lamarr'` にしてみてください。To Do リストのタイトルが変わりましたか？
 
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+波括弧の中では `formatDate()` のような関数呼び出しも含む、あらゆる JavaScript の式が動作します：
 
 <Sandpack>
 
@@ -111,18 +111,18 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### 波括弧を使える場所 {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+JSX 内部で波括弧を使う方法は 2 つだけです：
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`.
+1. **テキストとして**、JSX タグの中で直接使う：`<h1>{name}'s To Do List</h1>` は動作しますが `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` は動作しない。
+2. **属性として**、`=` 記号の直後に使う：`src={avatar}` は `avatar` という変数を読み出すが、 `src="{avatar}"` と書くと `{avatar}` という文字列そのものを渡す。
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## 「ダブル波括弧」で JSX 内に CSS やその他のオブジェクトを含める {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+文字列や数字、その他の JavaScript の式に加えて、オブジェクトを JSX に渡すこともできます。オブジェクトも波括弧を使って `{ name: "Hedy Lamarr", inventions: 5 }` のように記述しますね。ですので JS オブジェクトを JSX に渡すときには、オブジェクトを別の波括弧のペアでラップして、`person={{ name: "Hedy Lamarr", inventions: 5 }}` のようにする必要があります。
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+これは JSX 内でインラインの CSS スタイルを使うときに目にすることがあります。React でインラインスタイルを使わなければいけないわけではありません（大抵の場合は CSS クラスでうまくいきます）。しかしインラインスタイルが必要な場合は、`style` 属性にオブジェクトを渡します：
 
 <Sandpack>
 
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+`backgroundColor` や `color` の値を変更してみてください。
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
+以下のように書けば波括弧の中に書かれた JavaScript のオブジェクトがよく見えてくるでしょう：
 
 ```js {2-5}
 <ul style={
@@ -161,17 +161,17 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+次に `{{` と `}}` を見たときには、JSX の波括弧の中に書かれたオブジェクトに過ぎないということを思い出してください！
 
 <Gotcha>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+インラインの `style` 属性はキャメルケースで書きます。例えば HTML で `<ul style="background-color: black">` となっていれば、あなたのコンポーネントでは `<ul style={{ backgroundColor: 'black' }}>` になります。
 
 </Gotcha>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## オブジェクトと波括弧でさらにいろいろやってみる {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+複数の式をひとつのオブジェクト内に移動して、JSX の波括弧内から参照することができます：
 
 <Sandpack>
 
@@ -211,7 +211,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+この例では `person` という JavaScript オブジェクト内に `name` 文字列と `theme` オブジェクトが含まれています。
 
 ```js
 const person = {
@@ -223,31 +223,31 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+コンポーネントは `person` から始めて以下のように書くことでこれらの値を使うことができます：
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX ではデータやロジックを書くのに JavaScript を使うため、JSX はテンプレート言語としては非常にミニマルです。
 
 <Recap>
 
-Now you know almost everything about JSX:
+これで JSX についてのほとんどを学びました：
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* 引用符内に書かれた JSX 属性は文字列として渡される。
+* 波括弧を使えば JavaScript のロジックや変数をマークアップ内に含めることができる。
+* 波括弧はタグのコンテンツの中で使うか、属性の場合は `=` の直後で使う。
+* `{{` と `}}` は特別な構文ではなく、JSX の波括弧にくっつくように書かれた JavaScript オブジェクトである。
 
 </Recap>
 
 <Challenges>
 
-### Fix the mistake {/*fix-the-mistake*/}
+### 間違いを修正する {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+以下のコードは `Objects are not valid as a React child` というエラーを出してクラッシュします：
 
 <Sandpack>
 
@@ -287,15 +287,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+どこが問題か分かりますか？
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>波括弧の中に何が書かれているのか見てみましょう。正しいものが入っていますか？</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+このエラーが起きているのは、マークアップ内で文字列ではなく*オブジェクトそのもの*をレンダーしているからです。つまり `<h1>{person}'s Todos</h1>` が `person` オブジェクト全体をレンダーしようとしてしまっているのです。テキスト内容としてオブジェクトをそのまま含めようとすると、React はそれをどう表示したらいいか分からないため、エラーをスローします。
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+修正するには、`<h1>{person}'s Todos</h1>` を `<h1>{person.name}'s Todos</h1>` で置き換えてください：
 
 <Sandpack>
 
@@ -337,9 +337,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-### Extract information into an object {/*extract-information-into-an-object*/}
+### オブジェクト内にデータを移動する {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+画像 URL を `person` オブジェクト内に移動しましょう。
 
 <Sandpack>
 
@@ -381,7 +381,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+画像 URL を `person.imageUrl` というプロパティに移動して、それを `<img>` タグから波括弧を使って読み取ります：
 
 <Sandpack>
 
@@ -424,13 +424,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+### JSX 波括弧内に式を書く {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL,  `imageId`, `imageSize`, and file extension.
+以下のオブジェクトでは画像の URL が、ベース URL・`imageId`・`imageSize`・ファイル拡張子の 4 つに分割されています。
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+画像 URL を指定するところで、ベース URL（常に `'https://i.imgur.com/'`）、`imageId` (`'7vQD0fP'`)、`imageSize` (`'s'`)、ファイル拡張子（常に `'.jpg'`）の 4 つの値を結合したいと思っています。ですが `<img>` タグが `src` を指定する部分で何かがおかしいようです。
 
-Can you fix it?
+修正できますか？
 
 <Sandpack>
 
@@ -474,15 +474,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+修正がうまくいったことを確認するには、`imageSize` の値を `'b'` に書きかえてみてください。編集すると画像のサイズが変わるはずです。
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+`src={baseUrl + person.imageId + person.imageSize + '.jpg'}` のように書いてください。
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` で JavaScript 式が書けるようになる
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` が正しい URL を生成する
+3. `}` で JavaScript 式を終了する
 
 <Sandpack>
 
@@ -525,7 +525,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+あるいは以下の `getImageUrl` のように、別の関数にこの式を移動することもできます：
 
 <Sandpack>
 
@@ -580,7 +580,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+変数と関数を利用することで、マークアップをシンプルに保つことができます！
 
 </Solution>
 
diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md
index c66348161..11e1d49bb 100644
--- a/beta/src/pages/learn/writing-markup-with-jsx.md
+++ b/beta/src/pages/learn/writing-markup-with-jsx.md
@@ -1,44 +1,44 @@
 ---
-title: Writing Markup with JSX
+title: JSX でマークアップを記述する
 ---
 
 <Intro>
 
-JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
+JSX とは JavaScript の拡張であり、JavaScript ファイル内に HTML のようなマークアップを書けるようにするものです。コンポーネントを書く手段はほかにも存在しますが、ほとんどの React 開発者は JSX の簡潔さを好んでいるため、ほとんどのコードベースで使われています。
 
 </Intro>
 
 <YouWillLearn>
 
-* Why React mixes markup with rendering logic
-* How JSX is different from HTML
-* How to display information with JSX
+* React がマークアップとレンダリングロジックを混在させる理由
+* JSX と HTML の違い
+* JSX で情報を表示する方法
 
 </YouWillLearn>
 
-## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
+## JSX: JavaScript にマークアップを入れ込む {/*jsx-putting-markup-into-javascript*/}
 
-The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
+これまでウェブは HTML、CSS そして JavaScript を使って作られてきました。長年にわたり、ウェブ開発者はコンテンツは HTML で書き、デザインは CSS で書き、ロジックは JavaScript で書き、そして大抵の場合はそれらを別ファイルにしていました。コンテンツは HTML 内にマークアップされ、そのページのロジックは別ファイルの JavaScript に存在していました：
 
-![HTML and JavaScript living in separate files](/images/docs/illustrations/i_html_js.svg)
+![HTML と JavaScript は別ファイル](/images/docs/illustrations/i_html_js.svg)
 
-But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!**
+しかしウェブがよりインタラクティブなものになるにつれ、ロジックがコンテンツの中身をも決めるようになっていきました。JavaScript が HTML の領分も担当するようになったのです！ これが、**React ではロジックとマークアップを同じ場所、すなわちコンポーネントに書く**理由です。
 
-![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg)
+![マークアップを混ぜ込んだ JavaScript 関数](/images/docs/illustrations/i_jsx.svg)
 
-Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
+ボタンのレンダリングロジックとマークアップを同じ場所に書くことで、それらが毎回の編集時に同期されることが保証されます。逆に、ボタンのマークアップとサイドバーのマークアップといった互いに関係のない詳細は、互いに分離されるようになるため、それぞれをより安全に独立して更新できるようになります。
 
-Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
+個々の React のコンポーネントは JavaScript の関数であり、React がブラウザに表示するためのマークアップを含めることができます。そのマークアップを表現するのに、React コンポーネントは JSX と呼ばれる拡張構文を使用します。JSX は HTML ととてもよく似ていますが、より構文が厳密であり、動的な情報を表示することができます。理解するには、HTML マークアップを JSX マークアップへと変換してみるのが最もよいでしょう。
 
 <Note>
 
-[JSX and React are two separate things](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) you _can_ use independently of each other.
+[JSX と React は別物](/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform)であり、互いに無関係に使用することが可能です。
 
 </Note>
 
-## Converting HTML to JSX {/*converting-html-to-jsx*/}
+## HTML を JSX に変換する {/*converting-html-to-jsx*/}
 
-Suppose that you have some (perfectly valid) HTML:
+このような（まったく正しい）HTML があるとしましょう：
 
 ```html
 <h1>Hedy Lamarr's Todos</h1>
@@ -54,7 +54,7 @@ Suppose that you have some (perfectly valid) HTML:
 </ul>
 ```
 
-And you want to put it into your component:
+これをコンポーネントの中に入れたいとします：
 
 ```js
 export default function TodoList() {
@@ -64,7 +64,7 @@ export default function TodoList() {
 }
 ```
 
-If you copy and paste it as is, it will not work:
+そのままコピー・ペーストした場合、うまく動きません：
 
 
 <Sandpack>
@@ -94,21 +94,21 @@ img { height: 90px }
 
 </Sandpack>
 
-This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
+これは、JSX の方が厳密であり、HTML よりも若干ルールが多いからです。上記のエラーメッセージを読めばマークアップの修正方法は分かるようになっていますが、今は以下のガイドに従えば大丈夫です。
 
 <Note>
 
-Most of the times, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
+大抵の場合は React が画面上に表示するエラーメッセージが、問題のある場所を見つける手がかりになります。困ったら読んでみてください！
 
 </Note>
 
-## The Rules of JSX {/*the-rules-of-jsx*/}
+## JSX のルール {/*the-rules-of-jsx*/}
 
-### 1. Return a single root element {/*1-return-a-single-root-element*/}
+### 1. 単一のルート要素を返す {/*1-return-a-single-root-element*/}
 
-To return multiple elements from a component, **wrap them with a single parent tag**.
+コンポーネントから複数の要素を返すには、**それを単一の親タグで囲みます**。
 
-For example, you can use a `<div>`:
+例えば `<div>` を使うことができます：
 
 ```js {1,11}
 <div>
@@ -125,7 +125,7 @@ For example, you can use a `<div>`:
 ```
 
 
-If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
+マークアップに余分な `<div>` を加えたくない場合は、`<>` と `</>` を代わりに使うことができます：
 
 ```js {1,11}
 <>
@@ -141,19 +141,19 @@ If you don't want to add an extra `<div>` to your markup, you can write `<>` and
 </>
 ```
 
-This empty tag is called a *[React fragment](TODO)*. React fragments let you group things without leaving any trace in the browser HTML tree.
+この中身のないタグは *[React フラグメント](TODO)* と呼ばれるものです。フラグメントを使えば、ブラウザの HTML ツリーに痕跡を残さずに複数の要素をまとめることができます。
 
-<DeepDive title="Why do multiple JSX tags need to be wrapped?">
+<DeepDive title="JSX タグが複数あるときにラップしないといけない理由">
 
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a fragment.
+JSX は HTML のように見えますが、裏ではプレーンな JavaScript オブジェクトに変換されます。関数から 2 つのオブジェクトを返したい場合、配列でラップしないといけませんよね。2 つの JSX タグを返したい場合に別のタグかフラグメントでラップしないといけないのも、同じ理由です。
 
 </DeepDive>
 
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. すべてのタグを閉じる {/*2-close-all-the-tags*/}
 
-JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
+JSX ではすべてのタグを明示的に閉じる必要があります。`<img>` のような自動で閉じるタグは `<img />` のようになりますし、`<li>oranges` のような囲みタグは `<li>oranges</lit>` と書かなければなりません。
 
-This is how Hedy Lamarr's image and list items look closed:
+ヘディ・ラマーの画像とリスト項目は、閉じタグを書いた状態では以下のようになります：
 
 ```js {2-6,8-10}
 <>
@@ -170,11 +170,11 @@ This is how Hedy Lamarr's image and list items look closed:
 </>
 ```
 
-### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. （ほぼ）すべてキャメルケースで！ {/*3-camelcase-salls-most-of-the-things*/}
 
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX は JavaScript に変換され、中に書かれた属性は JavaScript オブジェクトのキーになります。コンポーネント内では、これらの属性を変数に読み出したくなることがよくあります。しかし JavaScript の変数名には一定の制約があります。例えば、名前にハイフンを含めたり `class` のような予約語を使ったりすることはできません。
 
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+このため、React では多くの HTML および SVG の属性はキャメルケースで書かれます。例えば `stroke-width` の代わりに `strokeWidth` を使います。`class` は予約語なので、React では `className` を使います（[対応するDOMプロパティ](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)が由来となっています）。
 
 ```js {4}
 <img 
@@ -184,19 +184,19 @@ This is why, in React, many HTML and SVG attributes are written in camelCase. Fo
 />
 ```
 
-You can [find all these attributes in the React DOM Elements](TODO). If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console](https://developer.mozilla.org/docs/Tools/Browser_Console).
+全リストは[React DOM 要素に存在する属性の一覧](TODO)にあります。何かを間違ったとしても心配は要りません。[ブラウザのコンソール](https://developer.mozilla.org/docs/Tools/Browser_Console)にメッセージと修正の提案が表示されるようになっています。
 
 <Gotcha>
 
-For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+歴史的理由により、[`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) と [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) 属性は HTML 属性と同じようにハイフン付きで書くことになっています。
 
 </Gotcha>
 
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### ヒント：JSX コンバータを使う {/*pro-tip-use-a-jsx-converter*/}
 
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+既存のマークアップの属性をすべて書きかえていくのは時に面倒です！ 既存の HTML や SVG を JSX に変換する場合は[コンバータ](https://transform.tools/html-to-jsx)を使うことをお勧めします。コンバータは実用上非常に役に立ちますが、自分でも楽に JSX が書けるよう、何が起こっているのかを理解しておくことも大切です。
 
-Here is your final result:
+最終結果は以下のようなものになります：
 
 <Sandpack>
 
@@ -228,11 +228,11 @@ img { height: 90px }
 
 <Recap>
 
-Now you know why JSX exists and how to use it in components:
+これで JSX が存在する理由と、コンポーネント内での使い方について理解しました：
 
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
+* レンダリングロジックとマークアップは互いに関連しているので、React ではそれらをグループ化する。
+* JSX は HTML と似ているがいくつかの違いがある。必要なら[コンバータ](https://transform.tools/html-to-jsx)を使える。
+* エラーメッセージを見れば、大概はマークアップの修正方法について指針が得られる。
 
 </Recap>
 
@@ -240,9 +240,9 @@ Now you know why JSX exists and how to use it in components:
 
 <Challenges>
 
-### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+### HTML を JSX に変換する {/*convert-some-html-to-jsx*/}
 
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+この HTML はコンポーネント内に貼り付けられたものですが、正しい JSX ではありません。修正してください：
 
 <Sandpack>
 
@@ -278,7 +278,7 @@ export default function Bio() {
 
 </Sandpack>
 
-Whether to do it by hand or using the converter is up to you!
+手作業で直すかコンバータを使うかはお任せします！
 
 <Solution>
 

From 95ccff3d18b6072731343152ff1509210806e9e9 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Thu, 16 Dec 2021 11:35:54 +0900
Subject: [PATCH 2/3] Translate sidebar

---
 beta/src/sidebarLearn.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index 7422c25cc..27cbde654 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -51,11 +51,11 @@
               "path": "/learn/importing-and-exporting-components"
             },
             {
-              "title": "Writing Markup with JSX",
+              "title": "JSX でマークアップを記述する",
               "path": "/learn/writing-markup-with-jsx"
             },
             {
-              "title": "JavaScript in JSX with Curly Braces",
+              "title": "JSX に波括弧で JavaScript を含める",
               "path": "/learn/javascript-in-jsx-with-curly-braces"
             },
             {

From 4360313fe1bd4aab0648eaf5b05151ef326d5a79 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Fri, 24 Dec 2021 22:24:50 +0900
Subject: [PATCH 3/3] Update beta/src/pages/learn/writing-markup-with-jsx.md

Co-authored-by: Toru Kobayashi <koba0004@gmail.com>
---
 beta/src/pages/learn/writing-markup-with-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/writing-markup-with-jsx.md b/beta/src/pages/learn/writing-markup-with-jsx.md
index 11e1d49bb..c5de2f1d8 100644
--- a/beta/src/pages/learn/writing-markup-with-jsx.md
+++ b/beta/src/pages/learn/writing-markup-with-jsx.md
@@ -153,7 +153,7 @@ JSX は HTML のように見えますが、裏ではプレーンな JavaScript 
 
 JSX ではすべてのタグを明示的に閉じる必要があります。`<img>` のような自動で閉じるタグは `<img />` のようになりますし、`<li>oranges` のような囲みタグは `<li>oranges</lit>` と書かなければなりません。
 
-ヘディ・ラマーの画像とリスト項目は、閉じタグを書いた状態では以下のようになります：
+Hedy Lamarr の画像とリスト項目は、閉じタグを書いた状態では以下のようになります：
 
 ```js {2-6,8-10}
 <>