【エクササイズ】API経由で取得したデータをリスト表示させる

課題
  • Reactコンポーネントのstate・setStateを使う
  • Reactコンポーネントのライフサイクルメソッドの1つ「componentDidMount」を使う
  • 条件に応じて、Reactコンポーネントの表示を切り替える
  • Reactでリスト表示させる
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_exercise_for_react_5

今回作成する課題の完成形のイメージは以下のとおりです。

今回の課題の完成形今回の課題の完成形

課題解決するために参考になる資料

【React】コンポーネントのstateの使い方を理解する

あわせて読みたい
【React】コンポーネントのstateの使い方を理解する今回はReactコンポーネントの「state」の使い方について解説しました。以前解説した「props」が読み取り専用の値だったのに対して、「state」は値の更新を行うことが出来ます。propsとstateを組み合わせて使うことでコンポーネントの表現の幅が広がります。...

Reactコンポーネントの「state」「setStateメソッド」の使い方は上記記事で解説しました。

【React】コンポーネントのライフサイクルを理解する【ライフサイクル図付き】

あわせて読みたい
【React】コンポーネントのライフサイクルを理解する【ライフサイクル図付き】今回はReactの「ライフサイクル」について解説しました。Reactで少し複雑なアプリケーションを実装する際にはReactの「ライフサイクル」の理解が重要となります。コンポーネントの状態に応じて自動で「ライフサイクルメソッド」というものが実行されます。...

Reactコンポーネントはstateやpropsが更新されると、「render」メソッドを再度実行します。

どのような流れでrenderメソッドが再実行されるかわからない方は、上記記事で「コンポーネントのライフサイクル図」使って説明しているのでそちらを参考にしていただけたらと思います。

【React】コンポーネントにクリックイベントを実装する

あわせて読みたい
【React】コンポーネントにクリックイベントを実装する今回はReactのコンポーネントに「クリックイベント」を実装する方法について解説しました。また、Reactでイベント処理を実装する際には「this」の扱いに気をつける必要があり、「this」問題の代表的な解決法を今回3つ説明しました。...

Reactコンポーネントのクリックイベントの実装方法は上記記事で解説しました。

Reactコンポーネントでイベントを実装する際には「this」の扱いに注意が必要です。

この「this」問題の解決方法についても上記記事で説明しているので、「this」でつまづいた場合は、そちらを参考にしていただけたらと思います。

【React】条件に応じてコンポーネントの表示を切り替える方法

あわせて読みたい
【React】条件に応じてコンポーネントの表示を切り替える方法今回は条件に応じたReactコンポーネントの表示の切り替え方法について解説しました。また、ログイン時・非ログイン時の状態に応じて表示を切り替えるサンプルコードも用意したので、実装イメージがつかない方にとっても参考になる内容となっています。...

今回の課題ではAPIを使って外部からデータを取得する機能を実装します。

その際に、「APIを実行しているか、実行していないか」「データの取得を取得したか、していないか」に応じて表示を切り替える必要があります。

条件に応じた表示の切り替え方法」は上記記事で解説しているので、もし切り替え方法がわからない場合はこちらの記事を参考にしていただけたらと思います。

【React】配列のmapメソッドを活用してリストを作成する方法

あわせて読みたい
【React】配列のmapメソッドを活用してリストを作成する方法今回はReactで「リスト」を作成する方法について解説します。リストを作成するとき、一般的に配列に格納されたデータを使って作成します。この時、配列のmapメソッドを活用することでリストの各要素のJSXを簡単に作成することができます。また、Reactでリストを作成するときは「key」の扱いにも注意する必要があります。...

今回の課題の内容は、前回の課題である「【エクササイズ】API経由のデータ取得前後で表示を切り替える」とほとんど同じですが、

前回実装した「クイズデータ1件の表示する」ではなく、「取得したクイズデータの問題文を全てリスト表示する」実装が必要になります。

Reactでリスト表示させる方法は上記記事で解説しているので、わからない場合はこちらの記事を参考にしていただけたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る