微修正

Author: smikitky

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

@@ -10,7 +10,7 @@ title: 既存プロジェクトに React を追加する
 
 <Note>
 
-**ローカル環境で開発するには [Node.js](https://nodejs.org/ja/) をインストールする必要があります。** 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>
 
@@ -20,8 +20,8 @@ title: 既存プロジェクトに React を追加する
 
 以下の手順に従って設定することをお勧めします。
 
-1. [React ベースのフレームワーク](/learn/start-a-new-react-project)の一つを使って **React の部分をビルド** します。
-2. フレームワークの設定で `/some-app` を ***base path*に指定** します（方法：[Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath)、[Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)）。
+1. [React ベースのフレームワーク](/learn/start-a-new-react-project)のうちひとつを使い、アプリの **React 部分をビルド**します。
+2. フレームワークの設定で `/some-app` を ***base path* に指定**します（方法：[Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath)、[Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)）。
 3. **サーバーまたはプロキシを設定**して、`/some-app/` 以下のすべてのリクエストを React アプリで処理するようにします。
 
 こうすることで、アプリの React 部分がこれらのフレームワークに組み込まれた[ベストプラクティスを最大限に取り入れる](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)ことができます。
@@ -34,12 +34,12 @@ title: 既存プロジェクトに React を追加する
 
 これを行うには、2 つのステップが必要です。
 
-1. **JavaScript 環境を設定**して、[JSX 構文](/learn/writing-markup-with-jsx)の使用、[`import`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export) 構文を使ったコードのモジュール分割、[npm](https://www.npmjs.com/) パッケージレジストリからのパッケージ（React など）の使用ができるようにする。
+1. **JavaScript 開発環境を設定**して、[JSX 構文](/learn/writing-markup-with-jsx)の使用、[`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) 構文を使ったコードのモジュール分割、[npm](https://www.npmjs.com/) パッケージレジストリからのパッケージ（例えば React）の使用ができるようにする。
 2. ページ上の表示させたい場所に **React コンポーネントをレンダー**する。
 
 具体的なアプローチはあなたの既存ページのセットアップによって異なりますが、一部の詳細について見ていきましょう。
 
-### ステップ1: モジュラーな JavaScript 環境を設定する {/*step-1-set-up-a-modular-javascript-environment*/}
+### ステップ 1: モジュラーな JavaScript 環境を設定する {/*step-1-set-up-a-modular-javascript-environment*/}
 
 モジュラーな JavaScript 環境を使用すると、すべてのコードを単一のファイルに書くのではなく、React コンポーネントを別々のファイルに記述できるようになります。また、他の開発者によって [npm](https://www.npmjs.com/) パッケージレジストリに公開されている、素晴らしいパッケージ群（React 自身も含む）を使えるようにもなります。具体的なやり方はあなたの既存のセットアップ方法によって異なります：
 
@@ -88,7 +88,7 @@ root.render(<h1>Hello, world</h1>);
 
 </Note>
 
-### ステップ2: ページに React コンポーネントをレンダーする {/*step-2-render-react-components-anywhere-on-the-page*/}
+### ステップ 2: ページに React コンポーネントをレンダーする {/*step-2-render-react-components-anywhere-on-the-page*/}
 
 前のステップでは、以下のコードをメインファイルのトップに置きました：
 
@@ -107,7 +107,7 @@ root.render(<h1>Hello, world</h1>);
 
 なので上記のコードは削除してください。
 
-代わりに、あなたの HTML 内の特定の場所に React コンポーネントをレンダーしたいはずです。HTML ページ（またはそれを生成するサーバーテンプレート）を開き、次のようにして、任意のタグにユニークな [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) 属性を追加します：
+代わりに、あなたの HTML 内の特定の場所に React コンポーネントをレンダーしたいはずです。HTML ページ（またはそれを生成しているサーバテンプレート）を開き、次のようにして、任意のタグに一意の [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) 属性を追加します：
 
 ```html
 <!-- ... somewhere in your html ... -->
@@ -148,7 +148,7 @@ root.render(<NavigationBar />);
 
 `index.html` にあるオリジナルの HTML コンテンツはそのままに、自分の `NavigationBar` という React コンポーネントが、HTML の `<nav id="navigation">` 内に表示されるようになりました。React コンポーネントを既存の HTML ページの内部にレンダーする方法の詳細については、[`createRoot` 使用方法のドキュメント](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) を参照してください。
 
-既存のプロジェクトで React を使用する場合、まずはボタンのような小さなインタラクティブなコンポーネントから始め、その後、徐々に「上向きに」進んで、最終的にはページ全体が React で構築されるようにすることが一般的です。もしもそのような段階に到達した場合は、React の効果が最大限に得られるように、[React フレームワーク](/learn/start-a-new-react-project)に移行することをお勧めします。
+既存のプロジェクトで React を使用する場合、まずはボタンのような小さなインタラクティブなコンポーネントから始め、その後、徐々に「上向きに」進んでいき、最終的にはページ全体が React で構築されるようにすることが一般的です。もしもそのような段階に到達した場合は、React の効果が最大限に得られるように、[React フレームワーク](/learn/start-a-new-react-project)に移行することをお勧めします。
 
 ## 既存のネイティブモバイルアプリ内で React Native を使用する {/*using-react-native-in-an-existing-native-mobile-app*/}
 

src/content/learn/editor-setup.md

@@ -4,7 +4,7 @@ title: エディタのセットアップ
 
 <Intro>
 
-エディタを適切に設定することで、コードが読みやすく、素早く書けるようになります。さらに、書きながらバグを防ぐのにも役立ちます！ エディタの設定をするのが初めてである、あるいは現在使用しているエディタをチューンアップしたいという場合、いくつかのおすすめがあります。
+エディタを適切に設定することで、コードが読みやすく、素早く書けるようになります。さらに、書いている途中でバグを検出するのにも役立ちます！ エディタの設定をするのが初めてである、あるいは現在使用しているエディタをチューンアップしたいという場合、いくつかのおすすめがあります。
 
 </Intro>
 
@@ -25,22 +25,22 @@ title: エディタのセットアップ
 * [Sublime Text](https://www.sublimetext.com/) は、JSX や TypeScript のサポート、[シンタックスハイライト](https://stackoverflow.com/a/70960574/458193)、オートコンプリート機能を組み込みで有しています。
 * [Vim](https://www.vim.org/) は、あらゆる種類のテキストの作成や編集を効率的に行うために作られた、高度にカスタマイズ可能なテキストエディタです。多くの UNIX システムや Apple OS X には "vi" として含まれています。
 
-## 推奨されるテキストエディタの機能 {/*recommended-text-editor-features*/}
+## テキストエディタ機能のお勧め {/*recommended-text-editor-features*/}
 
 一部のエディタは以下の機能を組み込みで有していますが、他のエディタでは拡張機能を追加する必要があるかもしれません。使いたいエディタのサポート状況を確認してください!
 
 ### リント {/*linting*/}
 
 コードリンタは、書きながらコード内の問題を見つけて、問題を早期に修正できるようにしてくれます。[ESLint](https://eslint.org/) は、人気の JavaScript 用オープンソースリンタです。
 
-* [React に適した構成の ESLint をインストールする](https://www.npmjs.com/package/eslint-config-react-app)（必ず [Node をインストール](https://nodejs.org/en/download/current/)していることを確認してください）
+* [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*/}
 
-他の人とコードを共有するにあたって何よりも避けたいのは、[タブ vs スペース](https://www.google.com/search?q=tabs+vs+spaces) についての議論が勃発することです！ 幸いなことに、[Prettier](https://prettier.io/) を使うと、あらかじめ設定できるルールに従ってコードを再フォーマットすることで、あなたのコードを綺麗にしてくれます。Prettier を実行すれば、タブはスペースに変換され、インデント、引用符なども設定に従って変更されます。理想的なセットアップでは、Prettier はファイルを保存するたびに実行され、瞬時にれらの変更を適用してくれます。
+他の人とコードを共有するにあたって何よりも避けたいのは、[タブ vs スペース](https://www.google.com/search?q=tabs+vs+spaces) についての議論に巻き込まれてしまうことです！ 幸いなことに、[Prettier](https://prettier.io/) は、あらかじめ設定できるルールに従ってコードを再フォーマットすることで、あなたのコードを綺麗にしてくれます。Prettier を実行すれば、タブはスペースに変換され、インデント、引用符なども設定に従って変更されます。理想的なセットアップでは、Prettier はファイルを保存するたびに実行され、瞬時にれらの変更を適用してくれます。
 
 [VSCode 用の Prettier 拡張機能](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) を VS Code にインストールするには、次の手順に従ってください。
 
@@ -59,4 +59,4 @@ title: エディタのセットアップ
 4. 検索バーに "format on save" と入力する。
 5. "format on save" オプションがチェックされているようにする。
 
-> あなたの ESLint のプリセットに、フォーマットに関するルールがある場合、それらが Prettier と競合する可能性があります。[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) を使用して、ESLint プリセット内のフォーマットに関するルールをすべて無効にし、ESLint を論理的な誤りの検出に限定して利用することをお勧めします。プルリクエストをマージする前にファイルがフォーマットされていることを強制するには、継続的インテグレーション (CI) で [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) を使用してください。
+> あなたの ESLint のプリセットに、フォーマットに関するルールがある場合、それらが Prettier と競合する可能性があります。[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) を使用して、ESLint プリセット内のフォーマットに関するルールをすべて無効にし、ESLint を論理的な誤りの検出*のみ*に限定して利用することをお勧めします。プルリクエストをマージする前にファイルがフォーマットされていることを強制するには、継続的インテグレーション (CI) で [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) を使用してください。

src/content/learn/installation.md

@@ -4,7 +4,7 @@ title: インストール
 
 <Intro>
 
-React は当初より、段階的に導入できるように設計されています。あなたの必要に応じて、React を使う量はどれだけ少なくても多くても構いません。React を少し味見してみたい場合でも、HTML ページにちょっとしたインタラクティブ性を追加したい場合でも、そして複雑な React アプリをスタートしたい場合でも、このセクションがあなたのスタートをお手伝いします。
+React は当初より、段階的に導入できるように設計されています。あなたの必要に応じて、React を使う量はどれだけ少なくても、どれだけ多くても構いません。React を少し味見してみたい場合でも、HTML ページにちょっとしたインタラクティブ性を追加したい場合でも、あるいは複雑な React アプリを立ち上げたいという場合でも、このセクションがあなたのスタートをお手伝いします。
 
 </Intro>
 
@@ -37,11 +37,11 @@ export default function App() {
 
 直接編集しても構いませんし、右上の "Fork" ボタンを押して新しいタブで開くこともできます。
 
-React のドキュメントのほとんどのページには、このようなサンドボックスが含まれています。React のドキュメント外にも、React をサポートするオンラインサンドボックスがたくさんあります。例えば、[CodeSandbox](https://codesandbox.io/s/new)、[StackBlitz](https://stackblitz.com/fork/react) や [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) が挙げられます。
+React ドキュメントのほとんどのページには、このようなサンドボックスが含まれています。React のドキュメント外にも、React をサポートするオンラインサンドボックスがたくさんあります。例えば、[CodeSandbox](https://codesandbox.io/s/new)、[StackBlitz](https://stackblitz.com/fork/react) や [CodePen](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) が挙げられます。
 
 ### ローカルで React を試す {/*try-react-locally*/}
 
-パソコンでローカルで React を試すために、[この HTML ページをダウンロードしてください](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)。そしてエディタとブラウザで開いてください！
+あなたのコンピュータのローカル環境で React を試すには、[この HTML ページをダウンロードしてください](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)。そしてエディタとブラウザで開いてください！
 
 ## 新しい React プロジェクトを開始する {/*start-a-new-react-project*/}