From eda81db17c4b02d82e4f95ad82e578a3bdba0f0d Mon Sep 17 00:00:00 2001 From: saitoeku3 Date: Fri, 1 Feb 2019 14:27:18 +0900 Subject: [PATCH 01/16] Translate js-environment-requirements --- .../reference-javascript-environment-requirements.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 44a36eb9d..822731098 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -1,14 +1,14 @@ --- id: javascript-environment-requirements -title: JavaScript Environment Requirements +title: JavaScript 環境の要件 layout: docs category: Reference permalink: docs/javascript-environment-requirements.html --- -React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/). +React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。（例えば IE 11 以前など）これらのプロパティをネイティブに提供しない、または非準拠の実装をしている古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) もしくは [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などにより、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。 -A polyfilled environment for React 16 using core-js to support older browsers might look like: +古いブラウザをサポートするために、core-js を利用して React 16 向けにポリフィルした環境は次のようになります。 ```js import 'core-js/es6/map'; @@ -23,8 +23,8 @@ ReactDOM.render( ); ``` -React also depends on `requestAnimationFrame` (even in test environments). -You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`: +React は（テスト環境であっても）`requestAnimationFrame` に依存します。 +`requestAnimationFrame` をシミュレートするには [raf](https://www.npmjs.com/package/raf) を使用することができます。 ```js import 'raf/polyfill'; From b10e23723d3c7196c3eb51586eae9e7aceb0f376 Mon Sep 17 00:00:00 2001 From: saitoeku3 Date: Fri, 1 Feb 2019 17:01:17 +0900 Subject: [PATCH 02/16] Modify translation --- content/docs/reference-javascript-environment-requirements.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 822731098..5a31e61a2 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -6,7 +6,7 @@ category: Reference permalink: docs/javascript-environment-requirements.html --- -React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。（例えば IE 11 以前など）これらのプロパティをネイティブに提供しない、または非準拠の実装をしている古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) もしくは [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などにより、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。 +React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。これらの機能をネイティブに提供しない（IE 11未満など）、または標準非準拠な挙動をする（IE 11など）古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) もしくは [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などにより、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。 古いブラウザをサポートするために、core-js を利用して React 16 向けにポリフィルした環境は次のようになります。 @@ -24,7 +24,7 @@ ReactDOM.render( ``` React は（テスト環境であっても）`requestAnimationFrame` に依存します。 -`requestAnimationFrame` をシミュレートするには [raf](https://www.npmjs.com/package/raf) を使用することができます。 +`requestAnimationFrame` を再現するには [raf](https://www.npmjs.com/package/raf) を使用することができます。 ```js import 'raf/polyfill'; From fd8e369af56e2a7374ea8eea5248bffedc855f34 Mon Sep 17 00:00:00 2001 From: saitoeku3 Date: Fri, 1 Feb 2019 17:20:45 +0900 Subject: [PATCH 03/16] Add space before 11 --- content/docs/reference-javascript-environment-requirements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md index 5a31e61a2..c94fc873c 100644 --- a/content/docs/reference-javascript-environment-requirements.md +++ b/content/docs/reference-javascript-environment-requirements.md @@ -6,7 +6,7 @@ category: Reference permalink: docs/javascript-environment-requirements.html --- -React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。これらの機能をネイティブに提供しない（IE 11未満など）、または標準非準拠な挙動をする（IE 11など）古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) もしくは [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などにより、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。 +React 16 はコレクション型 [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) および [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) に依存しています。これらの機能をネイティブに提供しない（IE 11 未満など）、または標準非準拠な挙動をする（IE 11 など）古いブラウザやデバイスをサポートする場合は、[core-js](https://github.com/zloirock/core-js) もしくは [babel-polyfill](https://babeljs.io/docs/en/babel-polyfill/) などにより、グローバル環境のポリフィルをバンドルしたアプリケーションに含めることを検討してください。 古いブラウザをサポートするために、core-js を利用して React 16 向けにポリフィルした環境は次のようになります。 From 291bb4ce308a51544f30547d3b77f223cc056b88 Mon Sep 17 00:00:00 2001 From: kik4 Date: Fri, 1 Feb 2019 19:33:22 +0900 Subject: [PATCH 04/16] translate docs/cdn-links --- content/docs/cdn-links.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index 9f48a01f7..59daa123a 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -1,37 +1,37 @@ --- id: cdn-links -title: CDN Links +title: CDN リンク permalink: docs/cdn-links.html prev: create-a-new-react-app.html next: hello-world.html --- -Both React and ReactDOM are available over a CDN. +React および ReactDOM は CDN を介して利用することができます。 ```html ``` -The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at: +上記のバージョンは開発のためだけのものあり、本番環境には適していません。圧縮・最適化された本番バージョンの React は下記で利用できます。 ```html ``` -To load a specific version of `react` and `react-dom`, replace `16` with the version number. +特定のバージョンの `react` と `react-dom` をロードする場合は、`16` の部分をバージョン番号で置き換えてください。 -### Why the `crossorigin` Attribute? +### なぜ `crossorigin` 属性が必要なのか？ -If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set: +CDN を使って React の機能を提供する場合、[`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) 属性を設定することをお勧めします。 ```html ``` -We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header: +また、利用している CDN が `Access-Control-Allow-Origin: *` という HTTP ヘッダを設定していることを確認してください。 ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png) -This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later. +これにより React 16 以降でより優れた[エラーハンドリング](/blog/2017/07/26/error-handling-in-react-16.html)を利用できます。 \ No newline at end of file From 50703978a0f16a702a9b4f47907a35da19531092 Mon Sep 17 00:00:00 2001 From: queq1890 <32263803+queq1890@users.noreply.github.com> Date: Fri, 1 Feb 2019 17:39:11 +0700 Subject: [PATCH 05/16] Translate reference-test-renderer --- content/docs/reference-test-renderer.md | 58 ++++++++++++------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md index 92f5246cb..78884f521 100644 --- a/content/docs/reference-test-renderer.md +++ b/content/docs/reference-test-renderer.md @@ -6,20 +6,20 @@ layout: docs category: Reference --- -**Importing** +**インポート** ```javascript import TestRenderer from 'react-test-renderer'; // ES6 const TestRenderer = require('react-test-renderer'); // ES5 with npm ``` -## Overview +## 概要 -This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. +このパッケージは React レンダラを提供します。レンダラは React コンポーネントをピュア JavaScript オブジェクトにレンダリングするのに使用することができ、DOM に依存したりネイティブのモバイル環境には依存しません。 -Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom). +基本的には、このパッケージはプラットフォームにおいて、（DOM ツリーと同様の）ビューの階層構造のスナップショットの取得を容易にするものです。ビューの階層構造は、ブラウザや [jsdom](https://github.com/tmpvar/jsdom) を利用せずに React DOM もしくは React Native コンポーネントからレンダリングされます。 -Example: +例： ```javascript import TestRenderer from 'react-test-renderer'; @@ -38,9 +38,9 @@ console.log(testRenderer.toJSON()); // children: [ 'Facebook' ] } ``` -You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html). +JSON ツリーを自動的にファイルに保存し、変更が起こったかをテストで確認するには、Jest のスナップショットテスト機能が利用できます。[詳細について知る](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html) -You can also traverse the output to find specific nodes and make assertions about them. +出力を横断して特定のノードを検索し、それらに対してアサーションを行うこともできます。 ```javascript import TestRenderer from 'react-test-renderer'; @@ -94,7 +94,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']); * [`testInstance.parent`](#testinstanceparent) * [`testInstance.children`](#testinstancechildren) -## Reference +## リファレンス ### `TestRenderer.create()` @@ -102,7 +102,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']); TestRenderer.create(element, options); ``` -Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties. +渡された React 要素から `TestRenderer` のインスタンスを作成します。実際の DOM は使用しませんが、コンポーネントを完全な形でメモリにレンダリングするので、アサーションを行うことができます。返されたインスタンスは、次のメソッドとプロパティを持ちます。 ### `testRenderer.toJSON()` @@ -110,7 +110,7 @@ Create a `TestRenderer` instance with the passed React element. It doesn't use t testRenderer.toJSON() ``` -Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `
` or `` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest). +レンダリングされたツリーを表すオブジェクトを返します。このツリーは `
` もしくは `` のようなプラットフォーム固有のノードとそのプロパティを含みますが、ユーザー定義のコンポーネントは含まれません。[スナップショットテスト](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest)に便利です。 ### `testRenderer.toTree()` @@ -118,7 +118,7 @@ Return an object representing the rendered tree. This tree only contains the pla testRenderer.toTree() ``` -Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test renderer. +レンダリングされたツリーを表すオブジェクトを返します。`toJSON()` とは異なり、より詳細な内容を含んでいます。ユーザー定義のコンポーネントも含みます。テストレンダラの最上位に自作のアサーションライブラリを作成している場合以外は、このメソッドが必要となることはないでしょう。 ### `testRenderer.update()` @@ -126,7 +126,7 @@ Return an object representing the rendered tree. Unlike `toJSON()`, the represen testRenderer.update(element) ``` -Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree. +メモリ上のツリーを新規のルート要素で再レンダリングします。ルートでの React の更新をシミュレートします。新しい要素が以前のものと同じ型とキーを持つ場合は、ツリーが更新されます。それ以外の場合は新しいツリーを再マウントします。 ### `testRenderer.unmount()` @@ -134,7 +134,7 @@ Re-render the in-memory tree with a new root element. This simulates a React upd testRenderer.unmount() ``` -Unmount the in-memory tree, triggering the appropriate lifecycle events. +メモリ上のツリーをアンマウントし、適切なライフサイクルイベントを発生させます。 ### `testRenderer.getInstance()` @@ -142,7 +142,7 @@ Unmount the in-memory tree, triggering the appropriate lifecycle events. testRenderer.getInstance() ``` -Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don't have instances. +可能な場合、ルート要素と対応したインスタンスを返します。関数コンポーネントはインスタンスを持たないため、ルート要素が関数コンポーネントの場合、このメソッドを使用することはできません。 ### `testRenderer.root` @@ -150,7 +150,7 @@ Return the instance corresponding to the root element, if available. This will n testRenderer.root ``` -Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below. +ツリー上の特定のノードに対してアサーションを行う際に役立つ、ルート「テストインスタンス」を返します。ルート「テストインスタンス」は、配下の他のテストインスタンスを検索する際に使用することができます。 ### `testInstance.find()` @@ -158,7 +158,7 @@ Returns the root "test instance" object that is useful for making assertions abo testInstance.find(test) ``` -Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error. +`test(testInstance)` が `true` を返すテストインスタンスの、単一の子テストインスタンスを検索します。 `test(testInstance)` がテストインスタンスに対して 1 つも `true` を返さない場合は、エラーがスローされます。 ### `testInstance.findByType()` @@ -166,7 +166,7 @@ Find a single descendant test instance for which `test(testInstance)` returns `t testInstance.findByType(type) ``` -Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error. +与えられた `type` を持つ単一の子テストインスタンスを検索します。与えられた `type` を持つテストインスタンスが 1 つもない場合は、エラーがスローされます。 ### `testInstance.findByProps()` @@ -174,7 +174,7 @@ Find a single descendant test instance with the provided `type`. If there is not testInstance.findByProps(props) ``` -Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error. +与えられた `props` を持つ単一の子テストインスタンスを検索します。与えられた `props` を持つテストインスタンスが 1 つもない場合は、エラーがスローされます。 ### `testInstance.findAll()` @@ -182,7 +182,7 @@ Find a single descendant test instance with the provided `props`. If there is no testInstance.findAll(test) ``` -Find all descendant test instances for which `test(testInstance)` returns `true`. +`test(testInstance)` が `true` を返す全ての子テストインスタンスを検索します。 ### `testInstance.findAllByType()` @@ -190,7 +190,7 @@ Find all descendant test instances for which `test(testInstance)` returns `true` testInstance.findAllByType(type) ``` -Find all descendant test instances with the provided `type`. +与えられた `type` を持つテストインスタンスを全て検索します。 ### `testInstance.findAllByProps()` @@ -198,7 +198,7 @@ Find all descendant test instances with the provided `type`. testInstance.findAllByProps(props) ``` -Find all descendant test instances with the provided `props`. +与えられた `props` を持つテストインスタンスを全て検索します。 ### `testInstance.instance` @@ -206,7 +206,7 @@ Find all descendant test instances with the provided `props`. testInstance.instance ``` -The component instance corresponding to this test instance. It is only available for class components, as function components don't have instances. It matches the `this` value inside the given component. +当該テストインスタンスに対応するコンポーネントのインスタンスです。関数コンポーネントはインスタンスを持たないため、クラスコンポーネントでのみ使用することができます。 与えられたコンポーネント内での this の値と一致します。 ### `testInstance.type` @@ -214,7 +214,7 @@ The component instance corresponding to this test instance. It is only available testInstance.type ``` -The component type corresponding to this test instance. For example, a `