From b8899e350326af3e53dfad89747761c1c13a3915 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 11:06:51 +0900 Subject: Learn 以下の文書内のリンクURLを正規化 (#2356) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- .../client-side_web_apis/fetching_data/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html') diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html index 44f7c8b035..7a47966ea1 100644 --- a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -48,9 +48,9 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

Ajax の登場

-

上述の問題を解決すべく、Web ページから細かいデータ (HTML、{{glossary("XML")}}、JSON やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。

+

上述の問題を解決すべく、Web ページから細かいデータ (HTML、{{glossary("XML")}}、JSON やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。

-

これは {{domxref("XMLHttpRequest")}} や、最近では Fetch API の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 HTTP リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。

+

これは {{domxref("XMLHttpRequest")}} や、最近では Fetch API の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 HTTP リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。

注記: これらのテクニック一般はかつて Ajax (Asynchronous JavaScript and XML)と呼ばれていましたが、これは {{domxref("XMLHttpRequest")}} を使って XML データを要求するものが多かったためです。今日ではそういうものばかりではありませんが (XMLHttpRequest や Fetch を使って JSON を要求する場合の方が多いでしょう)、結果としては同じであり、"Ajax" という用語はしばしば今でもこのテクニックを説明するのに使われます。

@@ -78,7 +78,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data

基本的な Ajax リクエスト

-

{{domxref("XMLHttpRequest")}} と Fetch それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。

+

{{domxref("XMLHttpRequest")}} と Fetch それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。

この一連のファイルは疑似データベースとして働きます。実際のアプリケーションでは、PHP や Python、Node のようなサーバサイド言語を使ってデータベースから取り出したデータをリクエストする場合が多いでしょう。ですがここでは簡単にしておき、クライアント側のパートに集中します。

@@ -156,9 +156,9 @@ verseChoose.value = 'Verse 1';

サーバからあなたの例題を送らせる

-

今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは Webサイトのセキュリティを読んで下さい)。

+

今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは Webサイトのセキュリティを読んで下さい)。

-

これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 テスト用のローカルサーバを設定するにはどうすればいい? を読んで下さい。

+

これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 テスト用のローカルサーバを設定するにはどうすればいい? を読んで下さい。

Fetch

@@ -251,7 +251,7 @@ myFetch.then(function(response) { }); } -

レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の textContent プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。

+

レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の textContent プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。

これも覚えておく価値があります、それぞれのブロックの結果を次のブロックに渡していくように、直接複数のプロミスブロック(.then()ブロック以外の種類もあります)を次から次へと連鎖する事ができます、あたかも鎖を下にたどっていくように。このおかげで、プロミスはとても強力なのです。

@@ -263,7 +263,7 @@ myFetch.then(function(response) { poemDisplay.textContent = text; }); -

多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは return 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。

+

多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは return 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。

どっちの機構を使うべき?

-- cgit v1.2.3-54-g00ecf