ここでは、ReactでバックエンドのシステムとHTTP通信する機能の実装方法について説明します。今回、実現するシステム全体の概要は、こちらに書いています。
今回のベースとしたReactのプロジェクトの初期生成方法についてはこちらに書いています。
目次
HTTP通信について
例えば、次のような機能を実装する機会は多くあります。
「ユーザがボタンをクリックした時に、サーバからデータを取得し、取得したデータを使って表示を変える」
これら一連の処理をするためには、次の4つの処理を実行する必要があります。
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の表示を変える機能を実現しました。
ここで実施した内容は、ここにアップロードしてあります。また、ここで利用したサーバのソースコードはこちらにアップロードしてあります。
