コンテンツにスキップ

JavaScript/fetch

    リンクを追加
    出典: フリー教科書『ウィキブックス（Wikibooks）』

    fetch() メソッドは、ネットワークリソースを取得するための現代的な API です。このメソッドは Promise ベースであり、XMLHttpRequest に比べてより柔軟でパワフルなリクエスト/レスポンス機能を提供します[1]。

    構文

    [編集]
    partialinterfacemixinWindowOrWorkerGlobalScope{[NewObject]Promise<Response>fetch(RequestInfoinput,optionalRequestInitinit={});};

    パラメータ

    [編集]

    input

    [編集]

    リソースを示す Request オブジェクトまたは URL を表す文字列（RequestInfo 型）。

    init

    [編集]

    オプションの RequestInit オブジェクト。リクエストのカスタマイズに使用されます。主なプロパティには以下があります：

    • method: リクエストに使用する HTTP メソッド（"GET", "POST" など）
    • headers: HTTP ヘッダーを表すオブジェクト
    • body: リクエストボディ（POST リクエストなどで送信するデータ）
    • mode: リクエストモード（"cors", "no-cors", "same-origin" など）
    • credentials: Cookie をリクエストに含めるかどうか（"omit", "same-origin", "include"）
    • cache: キャッシュモード（"default", "no-store", "reload" など）
    • redirect: リダイレクトの処理方法（"follow", "error", "manual"）
    • referrer: リファラー情報
    • referrerPolicy: リファラーポリシー
    • integrity: サブリソースの完全性値
    • keepalive: ページのアンロード後もリクエストを続行するかどうか
    • signal: リクエストをキャンセルするための AbortSignal

    戻り値

    [編集]

    リクエストの結果を表す Promise<Response> オブジェクト。 Response オブジェクトの主なプロパティとメソッド：

    • status: HTTP ステータスコード（200, 404 など）
    • statusText: ステータスメッセージ（"OK", "Not Found" など）
    • ok: ステータスコードが 200-299 の範囲内かどうか
    • headers: レスポンスヘッダー
    • body: レスポンスボディのストリーム
    • text(): レスポンスをテキストとして取得する Promise を返す
    • json(): レスポンスを JSON としてパースする Promise を返す
    • blob(): レスポンスを Blob として取得する Promise を返す
    • formData(): レスポンスを FormData として取得する Promise を返す
    • arrayBuffer(): レスポンスを ArrayBuffer として取得する Promise を返す

    例

    [編集]

    基本的な使用方法

    [編集]

    以下のプログラムは、fetch() の基本的な使用方法を示しています。 

    // GET リクエストを送信fetch('https://api.example.com/data').then(response=>{// レスポンスステータスを確認if(!response.ok){thrownewError(`HTTP エラー: ${response.status}`);}returnresponse.json();// JSON としてパース}).then(data=>{console.log('取得したデータ:',data);}).catch(error=>{console.error('fetch エラー:',error);});// async/await を使用した書き方asyncfunctionfetchData(){try{constresponse=awaitfetch('https://api.example.com/data');if(!response.ok){thrownewError(`HTTP エラー: ${response.status}`);}constdata=awaitresponse.json();console.log('取得したデータ:',data);}catch(error){console.error('fetch エラー:',error);}}fetchData();

    このプログラムでは、fetch() を使用して API からデータを取得し、レスポンスを JSON としてパースしています。Promise チェーンと async/await の両方の書き方を示しています。

    カスタムリクエストの送信

    [編集]

    以下のプログラムは、fetch() を使用してカスタマイズされたリクエストを送信する方法を示しています。 

    // POST リクエストを送信asyncfunctionpostData(url,data){constresponse=awaitfetch(url,{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer YOUR_TOKEN'},body:JSON.stringify(data)});returnresponse.json();}// 使用例constuserData={name:'山田太郎',email:'yamada@example.com',age:30};postData('https://api.example.com/users',userData).then(responseData=>{console.log('サーバーレスポンス:',responseData);}).catch(error=>{console.error('エラー:',error);});

    このプログラムでは、fetch() の init パラメータを使用して、POST メソッド、カスタムヘッダー、およびリクエストボディを持つカスタムリクエストを送信しています。

    ファイルのアップロード

    [編集]

    以下のプログラムは、fetch() を使用してファイルをアップロードする方法を示しています。 

    // フォームデータを使用したファイルアップロードasyncfunctionuploadFile(file){constformData=newFormData();formData.append('file',file);formData.append('filename',file.name);try{constresponse=awaitfetch('https://api.example.com/upload',{method:'POST',body:formData});if(!response.ok){thrownewError(`アップロードエラー: ${response.status}`);}returnawaitresponse.json();}catch(error){console.error('アップロードエラー:',error);throwerror;}}// ファイル入力要素からファイルを取得constfileInput=document.getElementById('fileInput');fileInput.addEventListener('change',async(event)=>{constfile=event.target.files[0];if(file){try{constresult=awaituploadFile(file);console.log('アップロード成功:',result);}catch(error){console.error('アップロード失敗:',error);}}});

    このプログラムでは、FormData オブジェクトを使用してファイルをアップロードしています。ファイル入力要素からファイルを取得し、fetch() を使用してサーバーにアップロードしています。

    リクエストのキャンセル

    [編集]

    以下のプログラムは、AbortController を使用して fetch() リクエストをキャンセルする方法を示しています。 

    // キャンセル可能なフェッチリクエストfunctionfetchWithTimeout(url,options={},timeoutMs=5000){constcontroller=newAbortController();const{signal}=controller;// タイムアウトを設定consttimeout=setTimeout(()=>{controller.abort();},timeoutMs);returnfetch(url,{...options,signal}).then(response=>{clearTimeout(timeout);returnresponse;}).catch(error=>{clearTimeout(timeout);if(error.name==='AbortError'){thrownewError(`リクエストがタイムアウトしました (${timeoutMs}ms)`);}throwerror;});}// 使用例fetchWithTimeout('https://api.example.com/data',{},3000).then(response=>response.json()).then(data=>console.log('データ:',data)).catch(error=>console.error('エラー:',error));// ユーザーアクションでキャンセルする例constcontroller=newAbortController();const{signal}=controller;constfetchPromise=fetch('https://api.example.com/large-data',{signal}).then(response=>response.json()).then(data=>console.log('データ:',data)).catch(error=>{if(error.name==='AbortError'){console.log('ユーザーによってリクエストがキャンセルされました');}else{console.error('エラー:',error);}});// キャンセルボタンのイベントリスナーdocument.getElementById('cancelButton').addEventListener('click',()=>{controller.abort();});

    このプログラムでは、AbortController と signal を使用して fetch() リクエストをキャンセルする方法を示しています。タイムアウトでキャンセルする例とユーザーアクションでキャンセルする例の両方を含んでいます。

    様々なデータタイプの処理

    [編集]

    以下のプログラムは、fetch() を使用して様々なデータタイプを処理する方法を示しています。 

    // 様々なレスポンスタイプを処理する関数asyncfunctionfetchDifferentTypes(){// テキストを取得consttextResponse=awaitfetch('https://example.com/text');consttext=awaittextResponse.text();console.log('テキスト:',text);// JSON を取得constjsonResponse=awaitfetch('https://api.example.com/data');constjsonData=awaitjsonResponse.json();console.log('JSON データ:',jsonData);// Blob を取得（画像など）constimageResponse=awaitfetch('https://example.com/image.jpg');constimageBlob=awaitimageResponse.blob();constimageUrl=URL.createObjectURL(imageBlob);document.getElementById('image').src=imageUrl;// ArrayBuffer を取得（バイナリデータ）constbinaryResponse=awaitfetch('https://example.com/binary-data');constbuffer=awaitbinaryResponse.arrayBuffer();constdataView=newDataView(buffer);console.log('バイナリデータ 最初の4バイト:',dataView.getUint32(0));}fetchDifferentTypes().catch(error=>{console.error('フェッチエラー:',error);});

    このプログラムでは、fetch() を使用して異なるタイプのデータ（テキスト、JSON、Blob、ArrayBuffer）を取得して処理する方法を示しています。

    注意点

    [編集]
    • クロスオリジンリクエスト: 異なるオリジンへのリクエストは CORS ポリシーに従う必要があります。
    • ステータスコードの処理: fetch() は HTTP エラーレスポンス（404、500 など）を拒否しません。response.ok をチェックする必要があります。
    • Cookie: デフォルトでは、異なるオリジンへのリクエストに Cookie は含まれません。含める場合は credentials: 'include' を指定します。
    • リダイレクト: デフォルトでは、リダイレクトは自動的に処理されます。
    • キャッシュ: デフォルトでは、ブラウザのキャッシュメカニズムが使用されます。
    • ストリーミング: レスポンスボディは一度だけ消費できるストリームです。複数回アクセスする場合は response.clone() を使用します。

    脚註

    [編集]
    1. ^この API は、ウェブアプリケーションでのデータ取得や API 通信の標準的な方法となっています。

    外部リンク

    [編集]

    附録

    [編集]

    以下は、Fetch APIに関連する主要なオブジェクトや概念を「名称」と「解説」の順に表組みにしたものです。

    名称 解説
    fetch()ネットワークリクエストを送信し、レスポンスを取得するための関数。Promiseを返す。
    Requestリクエストを表すオブジェクト。URL、メソッド、ヘッダー、ボディなどを含む。
    Responseリクエストに対するレスポンスを表すオブジェクト。ステータスコード、ヘッダー、ボディなどを含む。
    HeadersHTTPヘッダーを表すオブジェクト。ヘッダーの追加、取得、削除などの操作が可能。
    Bodyリクエストやレスポンスのボディを表すミックスイン。テキスト、JSON、Blobなどの形式でデータを取得できる。
    URLSearchParamsURLのクエリパラメータを操作するためのユーティリティクラス。
    AbortControllerリクエストを中止するためのコントローラー。AbortSignalを提供する。
    AbortSignalAbortControllerによって生成され、リクエストが中止されたかどうかを示す信号。

    これらのオブジェクトや概念は、Fetch APIを使用してネットワークリクエストを扱う際に重要な役割を果たします。

    "https://ja.wikibooks.org/w/index.php?title=JavaScript/fetch&oldid=270870" より作成
    close