From 1a89a43bc46e6fec907a5ce471871607567541ee Mon Sep 17 00:00:00 2001 From: ossan-engineer Date: Fri, 1 Feb 2019 18:44:26 +0900 Subject: [PATCH 1/2] Translate faq-ajax --- content/docs/faq-ajax.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index 89c1e7dbd..d6cba8916 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -1,24 +1,24 @@ --- id: faq-ajax -title: AJAX and APIs +title: AJAXとAPI permalink: docs/faq-ajax.html layout: docs category: FAQ --- -### How can I make an AJAX call? +### AJAXコールするには？ -You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). +任意のAJAXライブラリをReactと共に利用可能です。人気のあるものとしては、[Axios](https://github.com/axios/axios)、[jQuery AJAX](https://api.jquery.com/jQuery.ajax/)、ブラウザ組み込みの [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)などがあります。 -### Where in the component lifecycle should I make an AJAX call? +### コンポーネントのどのライフサイクルでAJAXコールすべきか？ -You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved. +AJAXコールによるデータ取得は[`componentDidMount`](/docs/react-component.html#mounting)で行うと良いでしょう。データ取得後に `setState` でコンポーネントを更新できるようにするためです。 -### Example: Using AJAX results to set local state +### 例：AJAXの通信結果をローカルstateで利用する -The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. +下記のコンポーネントは、 `componentDidMount` でAJAXコールして得られたデータをローカルコンポーネントのstateに流し込んでいます。 -The example API returns a JSON object like this: +サンプルAPIが返すJSONオブジェクトはこのようになります： ``` { @@ -50,9 +50,8 @@ class MyComponent extends React.Component { items: result.items }); }, - // Note: it's important to handle errors here - // instead of a catch() block so that we don't swallow - // exceptions from actual bugs in components. + // 補足：コンポーネント内のバグによる例外を隠蔽しないためにも + // catch()ブロックの代わりにここでエラーハンドリングすることが重要です (error) => { this.setState({ isLoaded: true, From 20a0d147bfe1596d03a507060aa8efa3d650c713 Mon Sep 17 00:00:00 2001 From: ossan-engineer Date: Sat, 2 Feb 2019 07:36:55 +0900 Subject: [PATCH 2/2] Apply guidelines to document --- content/docs/faq-ajax.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index d6cba8916..2665f1c4c 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -1,24 +1,24 @@ --- id: faq-ajax -title: AJAXとAPI +title: AJAX と API permalink: docs/faq-ajax.html layout: docs category: FAQ --- -### AJAXコールするには？ +### AJAX コールをする方法は？ -任意のAJAXライブラリをReactと共に利用可能です。人気のあるものとしては、[Axios](https://github.com/axios/axios)、[jQuery AJAX](https://api.jquery.com/jQuery.ajax/)、ブラウザ組み込みの [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)などがあります。 +任意の AJAX ライブラリを React と共に利用可能です。人気のあるものとしては、[Axios](https://github.com/axios/axios)、[jQuery AJAX](https://api.jquery.com/jQuery.ajax/)、ブラウザ組み込みの [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) などがあります。 -### コンポーネントのどのライフサイクルでAJAXコールすべきか？ +### コンポーネントのどのライフサイクルで AJAX コールすべきか？ -AJAXコールによるデータ取得は[`componentDidMount`](/docs/react-component.html#mounting)で行うと良いでしょう。データ取得後に `setState` でコンポーネントを更新できるようにするためです。 +AJAX コールによるデータ取得は[`componentDidMount`](/docs/react-component.html#mounting)のライフサイクルメソッドで行うべきです。データ取得後に `setState` でコンポーネントを更新できるようにするためです。 -### 例：AJAXの通信結果をローカルstateで利用する +### 例：ローカル state に AJAX の通信結果をセットする -下記のコンポーネントは、 `componentDidMount` でAJAXコールして得られたデータをローカルコンポーネントのstateに流し込んでいます。 +下記のコンポーネントは、 `componentDidMount` で AJAX コールして得られたデータをローカルコンポーネントの state に流し込んでいます。 -サンプルAPIが返すJSONオブジェクトはこのようになります： +このサンプル API が返す JSON オブジェクトはこのようになります： ``` {