axiosを使えば誰でもできるHTTP通信

React
とんぺい
とんぺい

今日は久しぶりの休日だブゥ!

師匠のところに行って、プログラミングを教えてもらおっと!

師匠こんにちは!

師匠
師匠

とんぺいくん。こんにちは。

前回は、簡単な掲示板を作り終えたところだね。

では今回は、axiosを使ったHTTP通信を勉強しよう。

とんぺい
とんぺい

わかったブゥ!

よろしくお願いします!

師匠
師匠

では早速HTTP通信の説明から入ろう。

HTTP通信

師匠
師匠

HTTP通信とは、HTTPという通信プロトコルに沿って行われる通信のことを指すんだ。

とんぺい
とんぺい

ほうほう…

でも、HTTP通信プロトコルって単語がわからないブゥ…

その2つの単語について説明して欲しいブゥ…

師匠
師匠

わかった。ではまずは通信プロトコルについて説明をしよう。

通信プロトコルとは「通信をするときにこの約束に基づいて通信をしよう」という約束事のことを言うんだ。

とんぺい
とんぺい

なるほど…

これから通信を行うときに、このルールで通信をしようってことを前もって決めてるってことブゥね!

師匠
師匠

そうだね。

スポーツを行う際にも、種目によってそれぞれルールが決まっていて、それを事前に共有していることでスムーズに競技が進行するよね。

それと同じことを通信でもしているんだ。

とんぺい
とんぺい

うんうん。

通信プロトコルについて理解ができたブゥ!

次は、HTTPについてお願いしますだブゥ!

師匠
師匠

HTTPというのはHyperText Transfer Protocol(ハイパーテキスト・トランスファー・プロトコル)の略称だよ。

これは通信プロトコルの一種で「ホームページなどのファイルを受け渡しをするときに使う約束事」のことを指すよ。

とんぺい
とんぺい

ふ〜ん…

HTTP通信プロトコルの一種で、僕たちがインターネットサーフィンをしている時の通信の約束事をいうブゥね!

師匠
師匠

その通り。

インターネット通信をしている際、データを受け取る側をクライアント、データを送る側をサーバと言うんだが、それらが通信を行う際にはHTTPという約束事を共有しているんだ。

とんぺい
とんぺい

なるほど!

HTTPと通信プロトコルを理解することで、HTTP通信がどういったものか理解できたブゥ!

師匠
師匠

よし!

では、HTTP通信について理解できたところで、どのようにコードを書けばHTTP通信を行えるのか、実際に見てみよう!

アプリケーションの作成

前回のアプリケーションの確認

師匠
師匠

では今回は、前回作った掲示板(仮)のアプリケーションを少し変更してHTTP通信を実現してみせよう。

まずは前回作成したアプリケーションを開こう。

とんぺい
とんぺい

はい!

terminalを用いて、アプリケーションのディレクトリに移動して

yarn start

でアプリケーションが立ち上がるブゥ!

師匠
師匠

うん。いい感じだ。

では、コードエディタを開いて、早速作業を初めて行こう。

今回はaxiosを用いて、HTTP通信を実現させるよ。

axiosの導入

とんぺい
とんぺい

師匠!

axiosってなんだブゥ?

実装する前に簡単に教えて欲しいブゥ!

師匠
師匠

おっと説明を忘れていたね。

axiosとは、HTTP通信を簡単に扱えることができるJavaScriptライブラリのことをいうんだ。

HTTPリクエストを送ったり、JSONを取得したりするのがより簡単になるので愛用者が多いんだよ。

とんぺい
とんぺい

なるほど!

簡単にHTTP通信を行うためのライブラリaxiosなんだブゥね!

実際にどうやって導入するんだブゥ?

師匠
師匠

では一旦localhostを止めよう。

そして、yarnを使ってaxiosをアプリケーションに追加しよう。

「yarn add axios」で追加ができるはずだ。

とんぺい
とんぺい

「control + c」でlocalhostを止めて

「yarn add axios」でアプリケーションに追加っと…

できたブゥ!

ディレクトリ構成

師匠
師匠

よし!

では、まずはディレクトリ構成を整理しよう。

今回はこのようなディレクトリ構成になるから、足りないフォルダやファイルがあったら作成しておこう。

コードの修正

とんぺい
とんぺい

師匠!

必要なフォルダとファイルを全部揃えたよ!

師匠
師匠

よし。

それでは前回のアプリから変更のあるファイルを、一気に修正していくよ。

ソースコードをpigboardにも載せているので、ぜひ参考にしてくれ。

src/api/jsonplaceholder.js

src/components/App.js

src/components/ApprovalCard.js

src/index.js

src/styles/App.css

とんぺい
とんぺい

師匠できたブゥ〜!

カードの数が100個もあるブゥ!

師匠
師匠

うまくいっているね!

それでは、今回のポイントを解説していこう。

ポイント解説

axiosでデータを取得する方法

師匠
師匠

今回はaxiosを使ってJSONPlaceholderから提供されているデータを取得しているよ。

JSONPlaceholderを開くと「posts、comment」などサンプルデータが用意されていることがわかるね。

今回は「/posts」のデータを100個取得して、取得したデータをコメントに反映させているよ。

とんぺい
とんぺい

JSONPlaceholderは会員登録も要らなそうだし、手軽に使えて中々便利そうだブゥ!

師匠、jsonplaceholder.jsで「baseURL」というのを使って「axios.create」をexportしているけど、これはどういうことブゥ?

師匠
師匠

おっ、いいところに気づいたね。

これはaxiosを用いてHTTP通信をする際に、共通するURLをまとめているんだ。

JSONPlaceholderには「/posts」以外にも/todosなどのデータがあり、これらは「https://jsonplaceholder.typicode.com」までは同じだが、最後の「/posts」「/todos」によって取得されるデータが変わるという仕組みなんだ。

とんぺい
とんぺい

なるほど…

確かに毎回同じURLを書くのはめんどくさいブゥ…

共通しているところをbaseURLにまとめて、それ以降はexport先で取得する方がコードもスッキリしていいと思うブゥ!

師匠
師匠

そうだね。

今回はexport先のApp.jsにてgetメソッドの引数を「/posts」としてあげることでサーバーからデータを受け取っているね。

とんぺい
とんぺい

うん。

axiosについては理解できたブゥ!

師匠
師匠

よし。

では次はcomponentDidMountの説明に入ろう。

componentDidMountとは?

師匠
師匠

componentDidMountとはReactのライフサイクルメソッドの一つで「コンポーネントがマウント(配置)された直前に呼び出されるメソッド」のことを指すよ。

今回はcomponentDidMount内にgetPosts関数を設置することで、renderメソッド実行後に1度だけpostsのデータを取得することができるんだ。

とんぺい
とんぺい

ほうほう。

つまりこのcomponentDidMountを使っているおかげで、クライアント側からボタンを押すなどのイベントを起こさなくても、axiosを使ったHTTP通信が自動でできているということブゥね!

師匠
師匠

そういうことだね。

それでは最後に、axiosによって取得した大量のデータを展開するために使用するmapメソッドについて説明をしよう。

 

mapメソッドでデータを展開する

師匠
師匠

大量のデータを取得した際に、そのデータの個数分コンポーネントを用意してpropsにデータを流し込む、なんて途方も無いことはしたくも無いだろう?そこで役立つのがこのmapメソッドなんだ。

とんぺい
とんぺい

確かに!!

今回の場合は100個のデータを受け取っているけど、このデータを流し込むためにコンポーネントを100個も作っていたら日が暮れてしまいそうだブゥ!?

師匠
師匠

mapメソッドは与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成するんだ。

とんぺい
とんぺい

んん…?

ちょっと理解できなかったブゥ…

師匠
師匠

実際にリンク先のサンプルを見てみよう。

これはarray1という配列に対して、配列の各要素を2倍にするというmapメソッドを適用して、map1という新しい配列を作成しているんだ。

このようにmapメソッドを使えば、複数のデータに対して1行で繰り返しの処理を行うことが可能になるよ。

とんぺい
とんぺい

なるほど。

今回は

{this.state.posts.map(post => (
     <ApprovalCard key={post.id}>
   ・
   ・
     </ApprovalCard>
))}
とすることで、繰り返しコンポーネントを書かなくても100個のデータを表示できるブゥね!
師匠
師匠

その通り。

また、Reactでmapを使う際には、コンポーネントにkeyを渡すことを忘れないでくれよ。

このkeyを渡すことで、繰り返し処理を行なっても、特定の番号と関連づいたコンポーネントを得ることができるんだ。

とんぺい
とんぺい

わかったブゥ。

ふぅ…今日は覚えることがたくさんだブゥ…

師匠ありがとう!また勉強したくなったら、遊びに来るブゥ!

師匠
師匠

うん。

今日は長い時間お疲れ様。

それでは最後にまとめをして今回は終わりにしよう。

まとめ

HTTP通信とは、HTTPという通信プロトコルに沿って行われる通信のこと。

axiosを使うことで簡単にHTTP通信を行うことができる。

componentDidMountはコンポーネントが配置された直後に一度だけ発火するライフサイクルメソッドの一種である。

mapメソッドを使うことで、大量の配列データを処理することができる。

コメント

タイトルとURLをコピーしました