Skip to content

Commit 805aa49

Browse files
authored
Merge pull request #578 from reactjs/textlint-fix
Fix format errors detected by textlint
2 parents 75c33f9 + f63ef85 commit 805aa49

18 files changed

+66
-66
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ title: 既存プロジェクトに React を追加する
1010

1111
<Note>
1212

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

1515
</Note>
1616

src/content/learn/adding-interactivity.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const [index, setIndex] = useState(0);
8383
const [showMore, setShowMore] = useState(false);
8484
```
8585

86-
以下は、イメージギャラリがクリックされた時に state を更新する方法です:
86+
以下は、イメージギャラリがクリックされたときに state を更新する方法です:
8787

8888
<Sandpack>
8989

src/content/learn/conditional-rendering.md

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ body > div > div { padding: 20px; }
229229
230230
<LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
231231
232-
**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)** を読んで、JSX 内 から JavaScript のデータにアクセスする方法を学びましょう。
232+
**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)**を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
233233
234234
</LearnMore>
235235
@@ -466,8 +466,8 @@ h2 { font-size: 20px; }
466466

467467
いくつかの JavaScript の関数は*純関数*です。純関数には以下の特徴があります。
468468

469-
* **自分の仕事に集中する** 呼び出される前に存在していたオブジェクトや変数を変更しない。
470-
* **同じ入力には同じ出力** 同じ入力を与えると、純関数は常に同じ結果を返す。
469+
* **自分の仕事に集中する**呼び出される前に存在していたオブジェクトや変数を変更しない。
470+
* **同じ入力には同じ出力**同じ入力を与えると、純関数は常に同じ結果を返す。
471471

472472
コンポーネントを常に厳密に純関数として書くことで、コードベースが成長するにつれて起きがちな、あらゆる種類の不可解なバグ、予測不可能な挙動を回避することができます。以下は純粋ではないコンポーネントの例です。
473473

src/content/learn/editor-setup.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ title: エディタのセットアップ
3636
* [React に適した構成の ESLint をインストールする](https://www.npmjs.com/package/eslint-config-react-app)[Node をインストール](https://nodejs.org/en/download/current/)していることを確認してください!)
3737
* [公式拡張機能を使用して VS Code に ESLint を統合する](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
3838

39-
**プロジェクトで [`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) 推奨プリセットは、これらをすでに含んでいます。
39+
**プロジェクトで [`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) 推奨プリセットは、これらをすでに含んでいます。
4040

4141
### コードフォーマット {/*formatting*/}
4242

src/content/learn/index.md

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export default function TodoList() {
116116
JSX 内部で波括弧を使う方法は 2 つだけです:
117117
118118
1. **テキストとして**、JSX タグの中で直接使う:`<h1>{name}'s To Do List</h1>` は動作しますが `<{tag}>Gregorio Y. Zara's To Do List</{tag}>` は動作しない。
119-
2. **属性として**、`=` 記号の直後に使う:`src={avatar}` は `avatar` という変数を読み出すが、 `src="{avatar}"` と書くと `"{avatar}"` という文字列そのものを渡す。
119+
2. **属性として**、`=` 記号の直後に使う:`src={avatar}` は `avatar` という変数を読み出すが、`src="{avatar}"` と書くと `"{avatar}"` という文字列そのものを渡す。
120120
121121
## 「ダブル波括弧」で JSX 内に CSS やその他のオブジェクトを含める {/*using-double-curlies-css-and-other-objects-in-jsx*/}
122122

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
2020

2121
コンピュータサイエンス(特に関数型プログラミングの世界)では、[純関数 (pure function)](https://wikipedia.org/wiki/Pure_function) とは、以下のような特徴を持つ関数のことを指します。
2222

23-
* **自分の仕事に集中する** 呼び出される前に存在していたオブジェクトや変数を変更しない。
24-
* **同じ入力には同じ出力** 同じ入力を与えると、純関数は常に同じ結果を返す。
23+
* **自分の仕事に集中する**呼び出される前に存在していたオブジェクトや変数を変更しない。
24+
* **同じ入力には同じ出力**同じ入力を与えると、純関数は常に同じ結果を返す。
2525

2626
皆さんは純関数の例をひとつ、すでにご存知のはずです。数学における関数です。
2727

@@ -31,7 +31,7 @@ JavaScript 関数の中には、*純関数* (pure function) と呼ばれるも
3131

3232
もし <Math><MathI>x</MathI> = 3</Math> ならば <Math><MathI>y</MathI> = 6</Math>。常にです。
3333

34-
もし <Math><MathI>x</MathI> = 3</Math> ならば、 <MathI>y</MathI> が現在時刻や株式市況に影響されてたまに <Math>9</Math> や <Math>–1</Math> や <Math>2.5</Math> になったりはしません。
34+
もし <Math><MathI>x</MathI> = 3</Math> ならば、<MathI>y</MathI> が現在時刻や株式市況に影響されてたまに <Math>9</Math> や <Math>–1</Math> や <Math>2.5</Math> になったりはしません。
3535

3636
もし <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> かつ <Math><MathI>x</MathI> = 3</Math> なら、<MathI>y</MathI> は*どんな場合でも常に* <Math>6</Math> になるのです。
3737

@@ -43,9 +43,9 @@ function double(number) {
4343
}
4444
```
4545

46-
上記の例では、 `double` 関数は**純関数**です。もし `3` を渡すと、`6` を返しますね。常にです。
46+
上記の例では、`double` 関数は**純関数**です。もし `3` を渡すと、`6` を返しますね。常にです。
4747

48-
React はこのような概念に基づいて設計されています。**React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています** つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
48+
React はこのような概念に基づいて設計されています。**React は、あなたが書くすべてのコンポーネントが純関数であると仮定しています**つまり、あなたが書く React コンポーネントは、与えられた入力が同じであれば、常に同じ JSX を返す必要があります。
4949

5050
<Sandpack>
5151

@@ -151,7 +151,7 @@ export default function TeaSet() {
151151

152152
まだ全部を使ったことはないかもしれませんが、React には [props](/learn/passing-props-to-a-component)[state](/learn/state-a-components-memory)、そして[コンテクスト](/learn/passing-data-deeply-with-context)という、レンダー中に読み取ることができる 3 種類の入力があります。これらの入力は常に読み取り専用として扱うようにしてください。
153153

154-
ユーザー入力に応じて何かを *変更* したい場合は、変数に書き込む代わりに、[state を設定する](/learn/state-a-components-memory)ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
154+
ユーザ入力に応じて何かを *変更* したい場合は、変数に書き込む代わりに、[state を設定する](/learn/state-a-components-memory)ことが適切です。要素のレンダー中に既存の変数やオブジェクトを書き換えることは絶対にやってはいけません。
155155

156156
React には "Strict Mode" という機能があり、開発中には各コンポーネント関数を 2 回呼び出します。**関数呼び出しを 2 回行うことで、Strict Mode はこれらのルールに反するコンポーネントを見つけるのに役立ちます。**
157157

@@ -165,7 +165,7 @@ Strict Mode は本番環境では影響を与えないため、ユーザが使
165165

166166
上記の例では、問題はコンポーネントがレンダーの最中に*既存*の変数を変更していた点にありました。このような変更は、少し恐ろしい言い方では **"ミューテーション(変異; mutation)"** と呼ばれます。純関数は、関数のスコープ外の変数や、呼び出し前に作成されたオブジェクトをミューテートしません。そういうことをしてしまった関数は「不純」になってしまいます!
167167

168-
しかし、**レンダー中に*その場で*作成した変数やオブジェクトであれば、書き換えることは全く問題ありません** この例では、`[]` 配列を作成して `cups` 変数に代入し、それに 12 個のカップを `push` しています:
168+
しかし、**レンダー中に*その場で*作成した変数やオブジェクトであれば、書き換えることは全く問題ありません**この例では、`[]` 配列を作成して `cups` 変数に代入し、それに 12 個のカップを `push` しています:
169169

170170
<Sandpack>
171171

@@ -216,8 +216,8 @@ React では、**副作用は通常、[イベントハンドラ](/learn/respondi
216216
<Recap>
217217

218218
* コンポーネントは純粋である必要がある。すなわち:
219-
* **コンポーネントは自分の仕事に集中する** レンダー前に存在していたオブジェクトや変数を書き換えない。
220-
* **入力が同じなら出力も同じ** 同じ入力に対しては、常に同じ JSX を返すようにする。
219+
* **コンポーネントは自分の仕事に集中する**レンダー前に存在していたオブジェクトや変数を書き換えない。
220+
* **入力が同じなら出力も同じ**同じ入力に対しては、常に同じ JSX を返すようにする。
221221
* レンダーはいつでも起こる可能性があるため、コンポーネントは相互の呼び出し順に依存してはいけない。
222222
* コンポーネントがレンダーに使用する入力値を書き換えない。これには props、state、コンテクストも含まれる。画面を更新するためには既存のオブジェクトを書き換えるのではなく、代わりに [state を設定する](/learn/state-a-components-memory)
223223
* コンポーネントのロジックはできるだけコンポーネントが返す JSX の中で表現する。何かを「変える」必要がある場合、通常はイベントハンドラで行う。最終手段として `useEffect` を使用する。

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -735,7 +735,7 @@ li { margin: 5px; }
735735

736736
以下の例では `Avatar` は数値型の `size` プロパティを受け取り、これが `<img>` の幅と高さを決定しています。この例では `size``40` に設定されています。しかしこの画像を新しいタブで開いてみると、画像自体はもっと大きい(`160` ピクセル)ことがわかります。実際の画像自体のサイズは、リクエストするサムネイルのサイズによって決定されます。
737737

738-
`Avatar` コンポーネントを書き換えて、`size` プロパティに基づいて最も近い画像サイズをリクエストするようにしてください。具体的には、`size``90` 未満の時は `getImageUrl` 関数に `'b'` ("big") ではなく `'s'` ("small") を渡すようにします。書き換えがうまくいったことを確認するには、アバターを `size` を書き換えてレンダーし、画像を新しいタブで開くようにします。
738+
`Avatar` コンポーネントを書き換えて、`size` プロパティに基づいて最も近い画像サイズをリクエストするようにしてください。具体的には、`size``90` 未満のときは `getImageUrl` 関数に `'b'` ("big") ではなく `'s'` ("small") を渡すようにします。書き換えがうまくいったことを確認するには、アバターを `size` を書き換えてレンダーし、画像を新しいタブで開くようにします。
739739

740740
<Sandpack>
741741

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ React を使ったウェブサイトをデバッグする最も簡単な方法
2727
![React Developer Tools エクステンション](/images/docs/react-devtools-extension.png)
2828

2929
### Safari および他のブラウザ {/*safari-and-other-browsers*/}
30-
他のブラウザ(例えばSafari)の場合、 [`react-devtools`](https://www.npmjs.com/package/react-devtools) の npm パッケージをインストールします:
30+
他のブラウザ(例えば Safari)の場合、[`react-devtools`](https://www.npmjs.com/package/react-devtools) の npm パッケージをインストールします:
3131
```bash
3232
# Yarn
3333
yarn global add react-devtools

0 commit comments

Comments
 (0)