Skip to content

Translate faq-ajax #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 2, 2019
+10 −11
Merged

Translate faq-ajax #10

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a89a43
Translate faq-ajax
ossan-engineer Feb 1, 2019
20a0d14
Apply guidelines to document
ossan-engineer Feb 1, 2019
36ca68d
Merge branch 'master' into faq
smikitky Feb 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions content/docs/faq-ajax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
id: faq-ajax
title: AJAX and APIs
title: AJAXとAPI
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: AJAXとAPI
title: AJAX と API

英字と和文との間に半角スペースをお願いします。 TRANSLATION.md をご一読ください。

permalink: docs/faq-ajax.html
layout: docs
category: FAQ
---

### How can I make an AJAX call?
### AJAXコールするには？
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### AJAXコールするには？
### 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)などがあります。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDNのリンクは https://developer.mozilla.org/ja/docs/Web/API/Fetch_API にしても良さそう

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDNのリンクはドキュメント中に数十カ所あるので、日本語版にはまとめて置換するほうが効率的かなということで、一応そのままにするという形でお願いしています。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
任意の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) などがあります。


### Where in the component lifecycle should I make an AJAX call?
### コンポーネントのどのライフサイクルでAJAXコールすべきか？
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### コンポーネントのどのライフサイクルでAJAXコールすべきか？
### コンポーネントのどのライフサイクルで 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` でコンポーネントを更新できるようにするためです。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
AJAXコールによるデータ取得は[`componentDidMount`](/docs/react-component.html#mounting)で行うと良いでしょう。データ取得後に `setState` でコンポーネントを更新できるようにするためです。
AJAX コールによるデータ取得は [`componentDidMount`](/docs/react-component.html#mounting) のライフサイクルメソッドで行うべきです。データ取得後に `setState` でコンポーネントを更新できるようにするためです。

この should は React の思想的に比較的強い should だと思われるので強めにしました


### Example: Using AJAX results to set local state
### 例：AJAXの通信結果をローカルstateで利用する
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 例：AJAXの通信結果をローカルstateで利用する
### 例：ローカル state に AJAX の通信結果をセットする


The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state.
下記のコンポーネントは、 `componentDidMount` でAJAXコールして得られたデータをローカルコンポーネントのstateに流し込んでいます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
下記のコンポーネントは、 `componentDidMount` でAJAXコールして得られたデータをローカルコンポーネントのstateに流し込んでいます。
下記のコンポーネントは、`componentDidMount` で AJAX コールして得られたデータをローカルコンポーネントの state に流し込んでいます。


The example API returns a JSON object like this:
サンプルAPIが返すJSONオブジェクトはこのようになります：
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
サンプルAPIが返すJSONオブジェクトはこのようになります：
このサンプル API が返す JSON オブジェクトはこのようなものです：


```
{
Expand Down Expand Up @@ -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,
Expand Down