2020/01/29SHAREツイートシェアはてブLINEPocketはじめにこの記事ではアプリ開発におけるテスト工程についてのハンズオンと解説を行います。テストって何をすればいいの?適当に文字数字をいろんなパターンで入力を試せばいいだけじゃないの?やることはなんとなく分かるけどどうやるの?という方は多いのではないでしょうか?アプリのテストは自分で適当にデータを放り込むよりも、ある程度形式に沿ったランダムなデータを入れるほうが様々なパターンに対応できるため”良し”とされています。今回はダミーデータを生成するJSONPlaceholderというAPIを使って、自作アプリ(React.jsで開発)のテストを行う方法を紹介していきたいと思います。この記事では更にAPIとの接続方法についても解説しているため、ぜひご自身のアプリ開発に役立ててみて下さい。本記事ではReact.jsやライフサイクルメソッドを使用します。「何それ?よく分からないよ」という方は、以下の記事を先に読むと理解が深まるためオススメしています。Reactの環境構築や基本的な文法等を紹介しています。使用バージョンJSONPlaceholderとは今回使用するReactアプリケーションダミーデータをレンダリングするダミーデータを制御するまとめ参考URL使用バージョンES6以降の構文(アロー関数、クラス等)を使用します。様々なシチュエーションを想定したデータが既に用意されています。...このAPIでは特定のURLにアクセスすることでJSON形式のデータを返してくれます。JSON)の特徴を知ろう今回はその中でも記事の投稿を想定したpostsの100件のダミーデータを使用します。https://jsonplaceholder.typicode.com/postsにアクセスすると元となるデータがたくさんあることが確認できると思います。今回はこのデータをReactアプリケーションで受け取り表示させるというテストをしてみたいと思います。JSONPlaceholderではposts以外にも全部で6種類のデータが用意されています。興味がある方は公式ページをご確認下さい。users今回使用するReactアプリケーションまずはテストを行うために簡単なアプリケーションを使用します。react-create-appでアプリケーションの立ち上げを行った後、srcの以下のファイルを定義します。serviceWorker.js以下のファイルを編集します。auto;}このアプリでは以下のように画面が表示されます。この画面にPostデータをもっとたくさん入れて表示がどうなるか確認したいことがあると思います。そのままデータを増やすためには、データベースを定義したり、stateにたくさんサンプルを書いたりする必要があるので少し厄介です。JSONPlaceholderでは簡単にたくさんのPostデータを入れて表示を確認できます。次で実際にデータにアクセスしたいと思います。ダミーデータをレンダリングするAPIにアクセスするために準備JSONPlaceholderを使うためには、axiosというライブラリが便利です。axiosとはブラウザやnode.jsで動くPromiseベースのHTTPクライアントです。axios自体はJavaScriptで書かれているので、簡単にReactアプリにも組み込むことができます。詳しくは以下の記事が有用です。興味があれば読んでみると良いと思います。導入と簡単な使い方まずはnpmでインストールしましょう。axiosこれで準備完了です。データを受け取るデータを受け取るにはaxiosのgetメソッドを使って簡単に受け取れます。コンポーネントがレンダリングされた後にネットワークへのリクエストに使用するcomponentDidMount()を使います。Blog;axiosのgetメソッドでURLを指定しresponseとして受け取り、そのデータをコンソール上に出力してみます。responseにはHTTPメソッドやURLの情報が入っているconfigやステータスコードが入っているrequestなど様々なものがあります。その中のdataにはArray型でuserIdやtitleなど画面上に表示させたいものが入っています。このdataの中身を画面に表示させてみましょう。このデータを画面に表示させるには、setState()を用いてresponse.dataをstateのpostsに更新します。}...これでデータをしっかり表示できました。ダミーデータを制御するこのダミーデータは必ずしもそのまま受け取るだけではなく、制御することもできます。具体的に受け取る数を制御したり、受け取ったデータを書き換える方法をご紹介します。受け取るデータ数を制御する受け取るデータ数を制御するためには、slice()メソッドを使用します。slice()メソッドはArray型のデータを切り抜く事ができるので、自分の欲しいデータを指定し受け取る事ができます。}...これで指定した4つのデータだけが表示されます。受け取るデータに項目を追加する今回受け取ったデータにはbody、id、title、userIdしか項目がありません。他にも追加したい場合はどのようにすれば良いでしょうか。追加するにはmap()メソッドを使用します。map()メソッドは与えられた関数を配列の全ての要素に適応し、その結果から新たな配列を生成します。このメソッドを使用し、dataにauthorを追加できます。}...これですべての要素にauthorが追加されました。エラーを受け取るこのAPIを使っていると予期せぬエラーと遭遇する可能性があります。そのエラーを捕まえるにはcatchメソッドを使用します。エラーを捕まえておくとログに残したり、ユーザーの画面を変更したりすることができます。以下はエラーを受け取った際に画面を変更するためのコードです。...これでAPIにエラーが生じた場合、ユーザーに画面上で知らせる事ができます。URLを変更してエラーを起こしてみます。wrong!と表示されます。catchメソッドでエラーを捕まえて、stateがtrueに更新されました。コンソール上には以下のメッセージが書かれています。(xhr.js:60)詳細は割愛しますが、一番上にステータスコードが404になっています。これは非常に有名なコードで該当のURLにページが存在しない時に返されます。以前に書いたステータスコード等の通信にまつわる記事があります。興味があれば読んでみて下さい。【WEBプログラミング初心者必読】意外と知らないWEBの仕組みこのようにエラーを受け取り、結果をログに残したり表示する画面を変えたりすることもできます。まとめ今回はJSONPlaceholderを用いてテストを行う方法を紹介しました。自分でデータを作らずにテストを行え、APIとの接続方法も学べるため勉強には非常に優良なツールです。皆さんも一度手を動かして実践してみてください。【React特集】アプリ開発オススメ記事まとめ!言語・FWの知識から開発・運用までReactでのアプリ開発を学ぶならCodeShipでは、現状プログラミングスクールでも取り扱いの少ない「React.js」でのアプリ開発を修得する学習カリキュラムを設置。どこよりも早く目をつけ長らく指導実績を積んできたCodeShipだからこそ可能な、ニーズにあったモダンなアプリ開発の指導とサポートがあります。CodeShip卒業生のReact作品を見るhttps://haruharuharukichi.github.io/勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発と実戦経験豊富な現役エンジニア、キャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。ご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。キャリア選択の実現”を目指す、池袋のオフラインプログラミングスクール。活かす・趣味など、プログラミングを学習する全てのを目的達成を応援するため、技術やプログラミング、キャリアについての情報発信をしています。日々プログラミング学習を進める皆さんの支えや気づきになるよう、CodeShipの授業内での技術・プログラミング・キャリアに関する質疑応答や、卒業生のインタビューなども公開していきます。【Q&A】MySQLのユーザー機能って必要なの?NEW【Q&A】効率よくコードから文章を探す方法を教えてください。