React Nativeでネットワーク接続状態を簡単に追跡し、ユーザーへ通知する方法

執筆：Jordy van den Aardweg

フリーランスのフロントエンド開発者として日々の業務に追われる合間にも、私は新しい技術の探求が好きです。最近はReact Nativeを学びながら、新しいツールやAPIに触れています。

しかし、ネイティブアプリの構築はWebアプリとは少し勝手が違います。先日、ユーザーがインターネットに接続できない状況に遭遇しました。

このようなとき、アプリの機能が制限されていることをどうやってユーザーに伝えればよいのでしょうか？

なぜ接続状態のハンドリングが必要なのか

ネットワーク接続を必要とするアプリを作る場合、リクエスト失敗への適切な対応が不可欠です。たとえば、ユーザーのインターネット接続が不安定になった（いわば「かくれんぼ」を始めた）とき、アプリ側でリクエストが失敗する理由をユーザーに伝えたり、そもそもリクエストの発行自体を防いだりできます。さらに良いのは、何が起きているのかを説明する分かりやすいメッセージを表示し、ユーザーが適切に対処できるようにすることです。

つまり、アプリが特定のリクエストを実行できない理由という「文脈（コンテキスト）」をユーザーに提供できるのです。

Redux vs. Context API

React Nativeコミュニティでは、オンライン・オフラインなどユーザーのネットワーク接続に関する情報を取得できるNetInfoモジュールが提供されています。このデータはアプリ全体でグローバルに利用できるようにしたいところです。

真っ先に思いつくのはReduxを使う方法でしょう。私のアプリでもすでにReduxを使っているので、「それならReduxでいいのでは？」と思いました。

もちろん可能です。しかし、その場合、接続情報を利用したいすべてのコンポーネントをReduxストアに接続する必要があります。Reduxへの接続はオーバーヘッドやコード量の増加を招き、必要以上にアプリを複雑にしてしまう可能性があります。

そこで、別の選択肢を探ってみましょう。

ReactのContext APIは、ステートのようなデータをコンポーネント間で共有するためのよりシンプルでクリーンな手段を提供します。

Contextは、現在認証済みのユーザー、テーマ、優先言語など、Reactコンポーネントツリーにとって「グローバル」とみなせるデータを共有するために設計されています。— 出典：React公式ドキュメント

まさにReactの新しいContext APIを使う絶好のユースケースと言えます！

実装してみよう

まず、必要なパッケージをインストールします。React Native 0.59以降では、NetInfoモジュールは別パッケージになっています。また、renderメソッドの外でcontextを扱えるようにするため、React 16.6以降も必要です。これは非常に便利で、contextを柔軟な場所で使えるようになります。

React Nativeアプリのセットアップ手順は割愛し、すでにプロジェクトがあるものとして進めます。

NetInfoパッケージをインストールしましょう：

npm install @react-native-community/netinfo --save

インストールが完了したら、コンポーネントを作成していきます。

Context Providerの作成

まず、<NetworkProvider>コンポーネントを用意します。このコンポーネントが、接続ステータスをすべての子コンポーネントに渡します。

コードでは、connectionChangeイベントを購読しているだけです。このイベントは、インターネット接続が有効ならtrue、無効ならfalseを返します。接続ステータスが変化したタイミングでstateを更新します。

stateが更新されると、コンポーネントツリー内のcontextも変化します。これにより、すべてのコンポーネントが最新のisConnected値にアクセスできるようになります。Reduxと似ていますが、ボイラープレートのコードは格段に少なくなります。

Context Providerでラップする

ReactのContext APIを機能させるには、作成した<NetworkProvider>コンポーネントで他のコンポーネントをラップする必要があります。次のように記述します。

こうすることで、<NetworkProvider>内のすべてのコンポーネントからcontextを利用できるようになります。

最後のステップは、コンポーネント内でcontextを使うことです。ここでは例として<ExampleComponent>を使用します。

これでコンポーネントがContext APIを使えるようになり、this.context.isConnectedを利用できるようになりました。

これで、<ExampleComponent>内で、ユーザーのインターネット接続がオンラインかオフラインかに応じてメッセージを表示できます。

以前のバージョンのReactでは、contextはrenderメソッドの外では利用できませんでした。React 16.6.0以降は、上の例のようにstatic contextTypeを使うことで、renderメソッド外でもアクセス可能になっています。この書き方により、コンポーネント内のどこでcontextを使うかについて、より高い柔軟性が得られます。

まとめ

このユースケースにおいて、Context APIはグローバルな値の設定と利用に最適であることが分かりました。接続ステータスはアプリ全体で参照できるべき重要な情報であり、アクティブなインターネット接続を必要とする操作が失敗しそうなときに、ユーザーへ通知できるようにするためです。

同じことはReduxでも実現できますが、はるかに多くのコードが必要になります。依存関係を抑えるためにも、可能な限りReactネイティブのAPIを活用しましょう！

完全なGistは筆者のGitHubで公開しています。

読んでいただきありがとうございます！

私はMediumを長年利用してきましたが、主に他の人の記事を読んで学ぶ側でした。こうしたチュートリアルのおかげで、長年にわたり多くの助けを得てきました。だからこそ、自分で記事を書くことは、この素晴らしい開発者コミュニティへの恩返しなのです！

このチュートリアルは役に立ちましたか？コメントでお知らせください ?

記事改善のためのフィードバックがあればぜひお聞かせください。より多くの知識を共有できるよう努めていきます。

無料でプログラミングを学べます。freeCodeCampのオープンソースカリキュラムは、40,000人以上の方々の開発者就職を支援してきました。今すぐ始めましょう。