メインコンテンツへスキップ

ネットワーク

多くのモバイルアプリでは、リモートURLからリソースを読み込む必要があります。REST APIにPOSTリクエストを送信したり、別のサーバーから静的コンテンツの一部を取得したりする必要があるかもしれません。

Fetchの使用​

React Nativeは、ネットワーキングのニーズに対応するためにFetch APIを提供しています。以前にXMLHttpRequestやその他のネットワーキングAPIを使用したことがあるなら、Fetchはおなじみのものでしょう。詳細については、MDNのFetchの使用に関するガイドを参照してください。

リクエストの送信​

任意のURLからコンテンツを取得するには、そのURLをfetchに渡します。

tsx
fetch('https://mywebsite.com/mydata.json');

Fetchは、HTTPリクエストをカスタマイズできる任意の第二引数も受け取ります。追加のヘッダーを指定したり、POSTリクエストを送信したりできます。

tsx
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

プロパティの完全なリストについては、Fetch Requestのドキュメントをご覧ください。

レスポンスの処理​

上記の例は、リクエストを送信する方法を示しています。多くの場合、レスポンスを使って何かをしたいと思うでしょう。

ネットワーキングは本質的に非同期操作です。FetchメソッドはPromiseを返すので、非同期で動作するコードを簡単に書くことができます。

tsx
const getMoviesFromApi = () => {
  return fetch('https://reactnative.dokyumento.jp/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

React Nativeアプリでは、async / await構文を使用することもできます。

tsx
const getMoviesFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://reactnative.dokyumento.jp/movies.json',
    );
    const json = await response.json();
    return json.movies;
  } catch (error) {
    console.error(error);
  }
};

fetchによってスローされる可能性のあるエラーをキャッチすることを忘れないでください。そうしないと、エラーは静かに無視されます。

デフォルトでは、iOS 9.0以降はApp Transport Security（ATS）を強制します。ATSは、すべてのHTTP接続にHTTPSを使用することを要求します。平文のURL（httpで始まるもの）からフェッチする必要がある場合は、まずATSの例外を追加する必要があります。アクセスする必要があるドメインが事前にわかっている場合は、それらのドメインに対してのみ例外を追加する方が安全です。ドメインが実行時までわからない場合は、ATSを完全に無効にすることができます。ただし、2017年1月以降、AppleのApp Storeレビューでは、ATSを無効にするための合理的な正当化が求められることに注意してください。詳細については、Appleのドキュメントを参照してください。

Androidでは、APIレベル28以降、平文のトラフィックもデフォルトでブロックされます。この動作は、アプリのマニフェストファイルでandroid:usesCleartextTrafficを設定することでオーバーライドできます。

他のネットワークライブラリの使用​

XMLHttpRequest APIはReact Nativeに組み込まれています。これは、frisbeeやaxiosのようなそれに依存するサードパーティライブラリを使用できること、または、お好みであればXMLHttpRequest APIを直接使用できることを意味します。

tsx
const request = new XMLHttpRequest();
request.onreadystatechange = e => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

ネイティブアプリにはCORSの概念がないため、XMLHttpRequestのセキュリティモデルはウェブとは異なります。

WebSocketのサポート​

React Nativeは、単一のTCP接続を介して全二重通信チャネルを提供するプロトコルであるWebSocketもサポートしています。

tsx
const ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = e => {
  // a message was received
  console.log(e.data);
};

ws.onerror = e => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = e => {
  // connection closed
  console.log(e.code, e.reason);
};

以下のオプションは現在fetchで動作しません。

  • redirect:manual
  • credentials:omit
  • Androidで同じ名前のヘッダーがあると、最後のヘッダーのみが存在する結果になります。一時的な解決策はこちらにあります：https://github.com/facebook/react-native/issues/18837#issuecomment-398779994。
  • Cookieベースの認証は現在不安定です。ここで提起された問題の一部を閲覧できます：https://github.com/facebook/react-native/issues/23185
  • 最低限iOSでは、302リダイレクトを介した場合、Set-Cookieヘッダーが存在してもクッキーが正しく設定されません。リダイレクトは手動で処理できないため、リダイレクトがセッションの有効期限切れの結果である場合、無限にリクエストが発生するシナリオを引き起こす可能性があります。

iOSでのNSURLSessionの設定​

一部のアプリケーションでは、iOSで実行されているReact Nativeアプリケーションのネットワークリクエストに使用される基盤となるNSURLSessionに、カスタムのNSURLSessionConfigurationを提供することが適切な場合があります。例えば、アプリからのすべてのネットワークリクエストにカスタムのユーザーエージェント文字列を設定したり、NSURLSessionに一時的なNSURLSessionConfigurationを提供したりする必要があるかもしれません。関数RCTSetCustomNSURLSessionConfigurationProviderはそのようなカスタマイズを可能にします。RCTSetCustomNSURLSessionConfigurationProviderが呼び出されるファイルに、次のインポートを追加することを忘れないでください。

objectivec
#import <React/RCTHTTPRequestHandler.h>

RCTSetCustomNSURLSessionConfigurationProviderは、アプリケーションのライフサイクルの早い段階で呼び出して、Reactが必要とするときにすぐに利用できるようにする必要があります。例えば、

objectivec
-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // set RCTSetCustomNSURLSessionConfigurationProvider
  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
     // configure the session
     return configuration;
  });

  // set up React
  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}