Fix format errors detected by textlint

src/content/learn/add-react-to-an-existing-project.md

@@ -10,7 +10,7 @@ title: 既存プロジェクトに React を追加する
 
 <Note>
 
-**ローカル環境で開発するには [Node.js](https://nodejs.org/en/) をインストールする必要があります。** React を[オンライン](/learn/installation#try-react)や単純な HTML ページで試すことも可能ですが、現実的には開発時に利用する大抵の JavaScript ツールには Node.js が必要です。
+**ローカル環境で開発するには [Node.js](https://nodejs.org/en/) をインストールする必要があります**。React を[オンライン](/learn/installation#try-react)や単純な HTML ページで試すことも可能ですが、現実的には開発時に利用する大抵の JavaScript ツールには Node.js が必要です。
 
 </Note>
 

src/content/learn/adding-interactivity.md

@@ -83,7 +83,7 @@ const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-以下は、イメージギャラリがクリックされた時に state を更新する方法です：
+以下は、イメージギャラリがクリックされたときに state を更新する方法です：
 
 <Sandpack>
 

src/content/learn/conditional-rendering.md

@@ -310,7 +310,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-[JavaScript の && 式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) は、左側（条件）が `true` である場合、右側（今回の場合はチェックマーク）の値を返します。しかし、条件が `false` である場合、式全体が `false` になります。Reactは、`false` を JSX ツリーの「穴」と見なし、`null` や `undefined` と同様に、何もレンダーしません。
+[JavaScript の && 式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) は、左側（条件）が `true` である場合、右側（今回の場合はチェックマーク）の値を返します。しかし、条件が `false` である場合、式全体が `false` になります。React は、`false` を JSX ツリーの「穴」と見なし、`null` や `undefined` と同様に、何もレンダーしません。
 
 
 <Pitfall>
@@ -441,10 +441,10 @@ JavaScript に慣れていない場合、これだけ多様なスタイルがあ
 
 <Recap>
 
-* Reactでは、JavaScriptを使用して分岐ロジックを制御する。
+* React では、JavaScript を使用して分岐ロジックを制御する。
 * `if` 文を使用して、条件に応じて JSX 式を返すことができる。
 * JSX 内で中身を条件付きで変数に保存し、波括弧を使用して他の JSX 内に含めることができる。
-* JSX 内の `{cond ? <A /> : <B />}` は、「`cond`であれば`<A />`をレンダーし、そうでなければ `<B />` をレンダーする」という意味である。
+* JSX 内の `{cond ? <A /> : <B />}` は、「`cond` であれば `<A />` をレンダーし、そうでなければ `<B />` をレンダーする」という意味である。
 * JSX 内の `{cond && <A />}` は、「`cond` であれば `<A />` をレンダーし、そうでなければ何もレンダーしない」という意味である。
 * これらのショートカットは一般的だが、プレーンな `if` が好きなら必ずしも使わなくて良い。
 
@@ -626,7 +626,7 @@ export default function PackingList() {
 
 `importance` が `0` の場合に `0` が結果として表示されてしまわないよう、`importance && ...` ではなく `importance > 0 && ...` と書く必要があることに注意してください。
 
-この答えでは、名前と重要度ラベルの間にスペースを挿入するために、2 つの条件が使用されています。代わりに、先頭にスペースを入れたフラグメントを使用することができます: `importance > 0 && <> <i>...</i></>` あるいは、`<i>` の直接内側にスペースを追加することもできます: `importance > 0 && <i> ...</i>`。
+この答えでは、名前と重要度ラベルの間にスペースを挿入するために、2 つの条件が使用されています。代わりに、先頭にスペースを入れたフラグメントを使用することができます：`importance > 0 && <> <i>...</i></>` あるいは、`<i>` の直接内側にスペースを追加することもできます：`importance > 0 && <i> ...</i>`。
 
 </Solution>
 
@@ -669,7 +669,7 @@ export default function DrinkList() {
 
 <Solution>
 
-複数のアプローチがありますが、ここでは1つの出発点として以下を示します：
+複数のアプローチがありますが、ここでは 1 つの出発点として以下を示します：
 
 <Sandpack>
 

src/content/learn/describing-the-ui.md

@@ -229,7 +229,7 @@ body > div > div { padding: 20px; }
 
 <LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
 
-**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)** を読んで、JSX 内 から JavaScript のデータにアクセスする方法を学びましょう。
+**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)**を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
 
 </LearnMore>
 
@@ -466,8 +466,8 @@ h2 { font-size: 20px; }
 
 いくつかの JavaScript の関数は*純関数*です。純関数には以下の特徴があります。
 
-* **自分の仕事に集中する。** 呼び出される前に存在していたオブジェクトや変数を変更しない。
-* **同じ入力には同じ出力。** 同じ入力を与えると、純関数は常に同じ結果を返す。
+* **自分の仕事に集中する**。呼び出される前に存在していたオブジェクトや変数を変更しない。
+* **同じ入力には同じ出力**。同じ入力を与えると、純関数は常に同じ結果を返す。
 
 コンポーネントを常に厳密に純関数として書くことで、コードベースが成長するにつれて起きがちな、あらゆる種類の不可解なバグ、予測不可能な挙動を回避することができます。以下は純粋ではないコンポーネントの例です。
 

src/content/learn/editor-setup.md

@@ -36,7 +36,7 @@ title: エディタのセットアップ
 * [React に適した構成の ESLint をインストールする](https://www.npmjs.com/package/eslint-config-react-app)（[Node をインストール](https://nodejs.org/en/download/current/)していることを確認してください！）
 * [公式拡張機能を使用して VS Code に ESLint を統合する](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
-**プロジェクトで [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) のルールをすべて有効化していることを確認してください。** これは非常に重要であり、とても深刻なバグを早期に検出してくれます。[`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) 推奨プリセットは、これらをすでに含んでいます。
+**プロジェクトで [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) のルールをすべて有効化していることを確認してください**。これは非常に重要であり、とても深刻なバグを早期に検出してくれます。[`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) 推奨プリセットは、これらをすでに含んでいます。
 
 ### コードフォーマット {/*formatting*/}
 

src/content/learn/index.md

@@ -316,7 +316,7 @@ function MyButton() {
   // ...
 ```
 
-`useState` からは 2 つのものが得られます。現在の state (`count`) と、それを更新するための関数 (`setCount`) です。名前は何でも構いませんが、慣習的には `[何か, set何か]` のように記述します。
+`useState` からは 2 つのものが得られます。現在の state (`count`) と、それを更新するための関数 (`setCount`) です。名前は何でも構いませんが、慣習的には `[something], setSomething]` のように記述します。
 
 ボタンが初めて表示されるとき、`count` は `0` になります。これは `useState()` に `0` を渡したからです。state を変更したいときは、`setCount()` を呼び出し、新しい値を渡します。このボタンをクリックすると、カウンタが増加します：
 

src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -116,7 +116,7 @@ export default function TodoList() {
 JSX 内部で波括弧を使う方法は 2 つだけです：
 
 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}"` という文字列そのものを渡す。
+2. **属性として**、`=` 記号の直後に使う：`src={avatar}` は `avatar` という変数を読み出すが、`src="{avatar}"` と書くと `"{avatar}"` という文字列そのものを渡す。
 
 ## 「ダブル波括弧」で JSX 内に CSS やその他のオブジェクトを含める {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 

src/content/learn/keeping-components-pure.md

@@ -20,8 +20,8 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
 
 コンピュータサイエンス（特に関数型プログラミングの世界）では、[純関数 (pure function)](https://wikipedia.org/wiki/Pure_function) とは、以下のような特徴を持つ関数のことを指します。
 
-* **自分の仕事に集中する。** 呼び出される前に存在していたオブジェクトや変数を変更しない。
-* **同じ入力には同じ出力。** 同じ入力を与えると、純関数は常に同じ結果を返す。
+* **自分の仕事に集中する**。呼び出される前に存在していたオブジェクトや変数を変更しない。
+* **同じ入力には同じ出力**。同じ入力を与えると、純関数は常に同じ結果を返す。
 
 皆さんは純関数の例をひとつ、すでにご存知のはずです。数学における関数です。
 
@@ -31,7 +31,7 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
 
 もし <Math><MathI>x</MathI> = 3</Math> ならば <Math><MathI>y</MathI> = 6</Math>。常にです。
 
-もし <Math><MathI>x</MathI> = 3</Math> ならば、 <MathI>y</MathI> が現在時刻や株式市況に影響されてたまに <Math>9</Math> や <Math>–1</Math> や <Math>2.5</Math> になったりはしません。
+もし <Math><MathI>x</MathI> = 3</Math> ならば、<MathI>y</MathI> が現在時刻や株式市況に影響されてたまに <Math>9</Math> や <Math>–1</Math> や <Math>2.5</Math> になったりはしません。
 
 もし <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> かつ <Math><MathI>x</MathI> = 3</Math> なら、<MathI>y</MathI> は*どんな場合でも常に* <Math>6</Math> になるのです。
 
@@ -43,9 +43,9 @@ function double(number) {
 }
 ```
 
-上記の例では、 `double` 関数は**純関数**です。もし `3` を渡すと、`6` を返しますね。常にです。
+上記の例では、`double` 関数は**純関数**です。もし `3` を渡すと、`6` を返しますね。常にです。
 
-React はこのような概念に基づいて設計されています。**React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています。** つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
+React はこのような概念に基づいて設計されています。**React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています**。つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
 
 <Sandpack>
 
@@ -151,7 +151,7 @@ export default function TeaSet() {
 
 まだ全部を使ったことはないかもしれませんが、React には [props](/learn/passing-props-to-a-component)、[state](/learn/state-a-components-memory)、そして[コンテクスト](/learn/passing-data-deeply-with-context)という、レンダー中に読み取ることができる 3 種類の入力があります。これらの入力は常に読み取り専用として扱うようにしてください。
 
-ユーザー入力に応じて何かを *変更* したい場合は、変数に書き込む代わりに、[state を設定する](/learn/state-a-components-memory)ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
+ユーザ入力に応じて何かを *変更* したい場合は、変数に書き込む代わりに、[state を設定する](/learn/state-a-components-memory)ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
 
 React には "Strict Mode" という機能があり、開発中には各コンポーネント関数を 2 回呼び出します。**関数呼び出しを 2 回行うことで、Strict Mode はこれらのルールに反するコンポーネントを見つけるのに役立ちます。**
 
@@ -165,7 +165,7 @@ Strict Mode は本番環境では影響を与えないため、ユーザが使
 
 上記の例では、問題はコンポーネントがレンダーの最中に*既存*の変数を変更していた点にありました。このような変更は、少し恐ろしい言い方では **"ミューテーション（変異; mutation）"** と呼ばれます。純関数は、関数のスコープ外の変数や、呼び出し前に作成されたオブジェクトをミューテートしません。そういうことをしてしまった関数は「不純」になってしまいます！
 
-しかし、**レンダー中に*その場で*作成した変数やオブジェクトであれば、書き換えることは全く問題ありません。** この例では、`[]` 配列を作成して `cups` 変数に代入し、それに 12 個のカップを `push` しています：
+しかし、**レンダー中に*その場で*作成した変数やオブジェクトであれば、書き換えることは全く問題ありません**。この例では、`[]` 配列を作成して `cups` 変数に代入し、それに 12 個のカップを `push` しています：
 
 <Sandpack>
 
@@ -216,8 +216,8 @@ React では、**副作用は通常、[イベントハンドラ](/learn/respondi
 <Recap>
 
 * コンポーネントは純粋である必要がある。すなわち：
-  * **コンポーネントは自分の仕事に集中する。** レンダー前に存在していたオブジェクトや変数を書き換えない。
-  * **入力が同じなら出力も同じ。** 同じ入力に対しては、常に同じ JSX を返すようにする。
+  * **コンポーネントは自分の仕事に集中する**。レンダー前に存在していたオブジェクトや変数を書き換えない。
+  * **入力が同じなら出力も同じ**。同じ入力に対しては、常に同じ JSX を返すようにする。
 * レンダーはいつでも起こる可能性があるため、コンポーネントは相互の呼び出し順に依存してはいけない。
 * コンポーネントがレンダーに使用する入力値を書き換えない。これには props、state、コンテクストも含まれる。画面を更新するためには既存のオブジェクトを書き換えるのではなく、代わりに [state を設定する](/learn/state-a-components-memory)。
 * コンポーネントのロジックはできるだけコンポーネントが返す JSX の中で表現する。何かを「変える」必要がある場合、通常はイベントハンドラで行う。最終手段として `useEffect` を使用する。

src/content/learn/passing-props-to-a-component.md

@@ -735,7 +735,7 @@ li { margin: 5px; }
 
 以下の例では `Avatar` は数値型の `size` プロパティを受け取り、これが `<img>` の幅と高さを決定しています。この例では `size` は `40` に設定されています。しかしこの画像を新しいタブで開いてみると、画像自体はもっと大きい（`160` ピクセル）ことがわかります。実際の画像自体のサイズは、リクエストするサムネイルのサイズによって決定されます。
 
-`Avatar` コンポーネントを書き換えて、`size` プロパティに基づいて最も近い画像サイズをリクエストするようにしてください。具体的には、`size` が `90` 未満の時は `getImageUrl` 関数に `'b'` ("big") ではなく `'s'` ("small") を渡すようにします。書き換えがうまくいったことを確認するには、アバターを `size` を書き換えてレンダーし、画像を新しいタブで開くようにします。
+`Avatar` コンポーネントを書き換えて、`size` プロパティに基づいて最も近い画像サイズをリクエストするようにしてください。具体的には、`size` が `90` 未満のときは `getImageUrl` 関数に `'b'` ("big") ではなく `'s'` ("small") を渡すようにします。書き換えがうまくいったことを確認するには、アバターを `size` を書き換えてレンダーし、画像を新しいタブで開くようにします。
 
 <Sandpack>
 

src/content/learn/react-developer-tools.md

@@ -27,7 +27,7 @@ React を使ったウェブサイトをデバッグする最も簡単な方法
 ![React Developer Tools エクステンション](/images/docs/react-devtools-extension.png)
 
 ### Safari および他のブラウザ {/*safari-and-other-browsers*/}
-他のブラウザ（例えば、Safari）の場合、 [`react-devtools`](https://www.npmjs.com/package/react-devtools) の npm パッケージをインストールします：
+他のブラウザ（例えば Safari）の場合、[`react-devtools`](https://www.npmjs.com/package/react-devtools) の npm パッケージをインストールします：
 ```bash
 # Yarn
 yarn global add react-devtools