ReactでHTTP通信する方法

ここでは、ReactでバックエンドのシステムとHTTP通信する機能の実装方法について説明します。今回、実現するシステム全体の概要は、こちらに書いています。

今回のベースとなるReactのプロジェクトの初期生成方法についてはこちらに書いています。

HTTP通信について

例えば、次のような機能を実装する機会は多くあります。

「ユーザがボタンをクリックした時に、サーバからデータを取得し、取得したデータを使って表示を変える」

これら一連の処理をするためには、次の4つの処理を実行する必要があります。

No 処理のきっかけ 入力情報 処理内容 出力情報
1 ユーザがボタンをクリック クリックしたボタン 決められた関数を呼び出す 呼び出す関数
2 関数が呼び出される 呼び出された関数 サーバからデータを取得する 取得したデータ
3 サーバからデータの取得が完了する 取得したデータ システム内に記憶する 記憶したデータ
4 データの記憶が完了する 記憶したデータ Viewの表示を変更する 変更後のView

この一連の手順を実装していきます。

1. ユーザがボタンをクリックした時に決められた関数を呼び出す方法

この段階では、まだReduxは必要ありません。まず、前回のコードのsrc/App.jsの不要な部分を削除し、今回、必要なモノだけにします。

この変更により、次のようにボタンだけが表示されるようになります。

この段階では、ボタンを押しても何も反応しません。次にボタンをクリックした時に呼び出す関数を作成し、ボタンにその関数を呼び出すように記述します。

ボタンをクリックした際にdev toolのコンソール画面に、handleClick is calledと表示されれば、正しく関数が呼び出されています。

2. サーバからデータを取得する方法

次にサーバにアクセスする機能を実装します。Reactでは、よくfetch apiとaxiosが利用されますが、ここではaxiosを利用します。

また、今回はアクセスするサーバに前回作成したこちらのサーバを利用します。パブリックなサーバにアクセスする場合、「No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.」というようなエラーが発生しアクセスできません。

これは悪意のあるサイトによって、ユーザが想定しないサーバにアクセスすることを防ぐブラウザのセキュリティ機能です。しかし、Reactではサーバと通信しながらViewを変更することが必要になるため、この問題は必ず発生します。この問題を解決するためには、サーバ側でReactのURLからのアクセスを許可することが必要です。それについては、こちらに書いています。

まず、ターミナルでpackage.jsonがある階層のディレクトリに移動し、次のコマンドを実行してaxiosをインストールします。

次にsrc/App.jsを次のように変更します。

ここで、ブラウザで表示し、「Get Data」ボタンを押した時に、development toolsのconsoleに次のようにdata: “success”と表示されると、正しく実装できています。

3. 取得したデータを記憶する方法

Reactには、propsと呼ばれる記憶領域とstateと呼ばれる記憶領域があります。これらの違いは、前者propsはコンポーネント(クラス)にまたがって利用できる記憶領域であり、stateはコンポーネント内でのみ利用可能な記憶領域です。今回は、stateを利用します。

先ほどのsrc/App.jsを次のように変更します。

実行してボタンをクリックした結果、DevToolsに次のように表示されると正しく処理ができています。

4. 記憶した情報を使ってViewを書き換える方法

Viewの表示を担っているのは、renderの関数です。src/App.js のAppクラスにあるrender関数を次のように書き換えることで、ボタンを押して結果を取得すると、表示を書き換えることができます。

ここでは、まず、statusと呼ばれる変数の状態によって、書き換える内容をresultという変数に格納しました。3項演算子を用いて、statusがtrueになった場合はresultの内容を表示します。そうでない場合は、Not Yetと表示します。

ボタンが押される前は次のように表示されます。

そして、ボタンを押すと次のように表示が変わります。

まとめ

今回は、HTTP通信でサーバからデータを取得し、取得したデータに応じてViewの表示を変える機能を実現しました。

ここで実施した内容は、ここにアップロードしてあります。また、ここで利用したサーバのソースコードはこちらにアップロードしてあります。

スポンサーリンク
スポンサーサイト
スポンサーサイト

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーサイト