目次
今回はフロントエンドフレームワークの一つであるReactで開発環境を構築し、 APIのリクエストまで行えるようにしてみます。 昨今のWebアプリケーションの開発ではフロントエンド技術の発達により、今までのHTML,CSS,JavaScript(JavaScriptであれば主にjQuery)が使用されてきましたが、JavaScriptのフレームワークの到来により保守性が高く、効率的な開発が行えるようになりました。 現在の主要なフロントエンドフレームワークは主に3つReact,Angular,Vueがありますが、今回は世界的に最もnpm trendsのダウンロード数が高いReactを解説していきます。
Reactの環境構築
Reactの開発は非常に簡単で以下の3つのコマンドを叩くだけですぐに環境を構築し、ブラウザに環境を表示することができます。
```コマンドを打つとこのようなReactの画面が表示され、2枚目の画像のような構成でディレクトリとファイルが生成されます。 このディレクトリの中には今表示されているReactアプリに必要なコードが書かれています。 新しくアプリを開発する際は、すでにあるコードを削除して始めていきます。
FormコンポーネントとResultコンポーネントを作成する
既存で存在するsrcディレクトリの中にcomponentsディレクトリを作成し、 Form.jsとResult.jsを作成します。
各ファイルにはconstで定義し、表示させるものを記述します。 Return内部の記法はHTMLとほぼ同じなので非常に簡単でわかりやすいです。 ただし、classについてはclassNameと記述する必要があります。 最後にexport default Formとすることで外部ファイルで出力できるようになります。
Form.js
Results.js
出力できるようにしたコンポーネントはApp.jsファイルにて importし、表示することができます。
Axiosを用いてAPIへリクエストする
Reactをなどのフレームワークを用いる際、アーキテクチャとしてバックエンドはAPIのみにしてフロントから直接リクエストするSPA（シングルページアプリケーション）が採用されることがあります。 SPAのメリットとして動作性が向上し、より幅広いUIを実装することができます。 今回はリクエスト先をフリーで提供されているWeather APIを使用してみます。 （使用する際は、ユーザー登録が必要です。） https://www.weatherapi.com/ まずはaxiosを利用するためにaxiosのパッケージをインストールします。
```
ファイルの上部でaxiosをインポートし、getWeatherと定義したfunctionの中に Axios.get({url})とすることで、リクエストすることができます。 リクエストして結果のレスポンスは今回は.then()で受け取ることができます。 結果をconsole.logで表示してみるとブラウザ上でデータが返ってきていることがわかります。
まとめ
今回はReactでオープンソースで提供されているAPIにリクエストできるようにしてみました。 WEB開発においてフロントエンド技術は今後更に需要が高まり必要になってくる技術であり、最新のトレンドを常にキャッチアップしていくことが求められています。 今回はキャッチアップしやすいところではありますが、より複雑なこともできるのでとても面白い技術だと思います。
