JSXとコンポーネント

中級
80
8時間

JSXの書き方、関数コンポーネントの作成、Propsでのデータ受け渡し、イベントハンドリング

Reactコースの一部として、JSXとコンポーネントに関する実践的な練習問題を80問用意しています。 基礎から応用まで段階的に学習できるよう構成されています。

学習を開始する準備ができました

下記の練習問題から始めて、段階的にスキルアップしていきましょう

react icon

練習問題一覧 (80問)

問題 1

JSXとは何の略称ですか?

問題 2

JSXでHTMLのclass属性を指定する場合、どのように記述しますか?

問題 3

JSXで自己終了タグ(<img>や<br>など)を記述する際の正しい書き方はどれですか?

問題 4

JSXでJavaScriptの変数や式を埋め込むために使用する記号は何ですか?

問題 5

以下のJSXコードの実行結果はどうなりますか? jsx const isLoggedIn =...

問題 6

配列をJSXで表示する際に使用するメソッドは何ですか?

問題 7

配列の各要素をJSXで表示する際に必ず指定する必要があるプロパティは何ですか?

問題 8

以下のJSXコードで条件が偽の場合、何が表示されますか? jsx const...

問題 9

JSXでは複数の要素を返す際に必要な条件は何ですか?

問題 10

以下のJSXコードの実行結果はどうなりますか? jsx const price = 1000;...

問題 11

JSXで関数を呼び出して結果を表示する正しい方法はどれですか?

問題 12

以下のコードでusers配列が空の場合、何が表示されますか? jsx const users =...

問題 13

JSXで複数の条件を組み合わせた三項演算子の正しい書き方はどれですか?

問題 14

以下のコードでTailwind CSSのクラスが正しく適用されるのはどれですか?

問題 15

配列のmapメソッドでJSX要素を生成する際、keyプロパティに最も適切な値はどれですか?

問題 16

JSXで波括弧内に記述できないものはどれですか?

問題 17

Reactの関数コンポーネントで必ず守らなければならない命名規則は何ですか?

問題 18

関数コンポーネントが必ず返さなければならないものは何ですか?

問題 19

以下のコンポーネント定義で不足している重要な要素は何ですか? jsx import React...

問題 20

他のファイルからコンポーネントを使用するために必要な記述は何ですか?

問題 21

以下のコードでコンポーネントを使用する正しい記述はどれですか? jsx import...

問題 22

コンポーネントを分離することの主なメリットとして最も重要でないものはどれですか?

問題 23

同じコンポーネントを複数回使用する際の記述方法として正しいものはどれですか?

問題 24

関数コンポーネントの定義方法として、以下のうち間違っているものはどれですか?

問題 25

関数コンポーネントの先頭で必ず記述する必要があるimport文は何ですか?

問題 26

以下のファイル構成で、App.jsx から Header.jsx...

問題 27

JSXで複数の要素を返す際に、必ず行わなければならないことは何ですか?

問題 28

以下のコードで、コンポーネントが正しく動作しない理由は何ですか? jsx import...

問題 29

コンポーネントファイルの拡張子として、Reactプロジェクトで一般的に使用されるものはどれですか?

問題 30

以下のApp.jsx で複数のコンポーネントを組み合わせる際の正しい記述はどれですか?

問題 31

React コンポーネントをより小さな部品に分割することで得られる効果として、最も重要でないものはど...

問題 32

以下のコンポーネント使用例で、同じコンポーネントを3回使用している記述として正しいものはどれですか?

問題 33

以下のコードで、UserProfileコンポーネントにagepropsが渡されなかった場合の表示結果...

問題 34

propsとして関数を渡す場合の正しい書き方はどれですか?

問題 35

以下のコードで、ProductListコンポーネントのchildrenにはどのような内容が渡されます...

問題 36

propsに配列データを渡して表示する場合の正しいコードはどれですか?

問題 37

コンポーネントにオブジェクト型のpropsを渡す正しい方法はどれですか?

問題 38

以下のModalコンポーネントで、childrenと通常のpropsを組み合わせる利点は何ですか?...

問題 39

propsの命名規則として推奨されるものはどれですか?

問題 40

以下のコードの実行結果として正しいものはどれですか? jsx const Price = ({...

問題 41

Reactにおけるpropsの主な役割は何ですか?

問題 42

以下のコンポーネントでpropsを受け取る方法として、最も推奨される書き方はどれですか?

問題 43

propsにデフォルト値を設定する正しい方法はどれですか?

問題 44

Reactの特別なプロパティchildrenについて正しい説明はどれですか?

問題 45

以下のコードで、ProductCardコンポーネントに渡されているpropsの型として正しいものはど...

問題 46

以下のコードで<Card>コンポーネントを呼び出したとき、childrenには何が渡されますか? ...

問題 47

propsの受け渡しに関する説明として正しくないものはどれですか?

問題 48

コンポーネントの再利用性を高めるpropsの活用方法として最も適切なものはどれですか?

問題 49

Reactでボタンがクリックされた時に処理を実行するために使用するプロパティは何ですか?

問題 50

以下のコードで正しいイベントハンドラーの書き方はどれですか? jsx const...

問題 51

入力フィールドでユーザーが文字を入力するたびに処理を実行したい場合、使用するイベントは何ですか?

問題 52

以下のコードで、入力された値を取得するために使用する記述はどれですか? jsx const...

問題 53

preventDefault()メソッドの主な用途は何ですか?

問題 54

以下のフォームで、送信時にページがリロードされるのを防ぐための正しいコードはどれですか? jsx...

問題 55

以下のコードで、Enterキーが押された時のみ処理を実行したい場合の条件文はどれですか? jsx...

問題 56

以下のようにアロー関数を使ってイベントハンドラーに引数を渡す理由は何ですか? jsx...

問題 57

複数のイベントハンドラーを同じ要素に設定したい場合、正しい書き方はどれですか?

問題 58

以下のコードで、フォーカスが当たった時とフォーカスが外れた時の処理を設定するイベントプロパティの組み...

問題 59

イベントハンドラー内でthisキーワードを使いたい場合、推奨される関数の書き方はどれですか?

問題 60

以下のコードで、マウスがボタンの上に乗った時と離れた時にスタイルを変更したい場合、使用するイベントの...

問題 61

キーボードイベントで、キーが押し続けられている間に連続して処理を実行したい場合、最適なイベントはどれ...

問題 62

以下のようなセレクトボックスで、選択された値を取得するために使用するイベントと取得方法の組み合わせは...

問題 63

以下のコードで、チェックボックスがチェックされているかどうかを判定するための正しい記述はどれですか?...

問題 64

イベントハンドラー内でコンポーネントの再レンダリングを避けるために、関数定義で推奨される方法はどれで...

問題 65

複数のイベントハンドラーを同じ要素に設定したい場合、正しい書き方はどれですか?

問題 66

以下のコードで、フォーカスが当たった時とフォーカスが外れた時の処理を設定するイベントプロパティの組み...

問題 67

イベントハンドラー内でthisキーワードを使いたい場合、推奨される関数の書き方はどれですか?

問題 68

以下のコードで、マウスがボタンの上に乗った時と離れた時にスタイルを変更したい場合、使用するイベントの...

問題 69

キーボードイベントで、キーが押し続けられている間に連続して処理を実行したい場合、最適なイベントはどれ...

問題 70

以下のようなセレクトボックスで、選択された値を取得するために使用するイベントと取得方法の組み合わせは...

問題 71

以下のコードで、チェックボックスがチェックされているかどうかを判定するための正しい記述はどれですか?...

問題 72

イベントハンドラー内でコンポーネントの再レンダリングを避けるために、関数定義で推奨される方法はどれで...

問題 73

Reactでボタンがクリックされた時に処理を実行するために使用するプロパティは何ですか?

問題 74

以下のコードで正しいイベントハンドラーの書き方はどれですか? jsx const...

問題 75

入力フィールドでユーザーが文字を入力するたびに処理を実行したい場合、使用するイベントは何ですか?

問題 76

以下のコードで、入力された値を取得するために使用する記述はどれですか? jsx const...

問題 77

preventDefault()メソッドの主な用途は何ですか?

問題 78

以下のフォームで、送信時にページがリロードされるのを防ぐための正しいコードはどれですか? jsx...

問題 79

以下のコードで、Enterキーが押された時のみ処理を実行したい場合の条件文はどれですか? jsx...

問題 80

以下のようにアロー関数を使ってイベントハンドラーに引数を渡す理由は何ですか? jsx...

💡 学習のコツ

  • • 順番に取り組むことで、段階的に理解を深めることができます
  • • 間違えた問題は解説をしっかり読んで理解しましょう
  • • 全問題完了後、もう一度チャレンジして定着を確認しましょう

📚 学習の進め方

1

問題を順番に解く

基礎から応用へと段階的に構成されているため、順番に取り組むことをお勧めします

2

解説をしっかり読む

正解・不正解に関わらず、解説を読んで理解を深めましょう

3

復習で定着させる

間違えた問題は後日再チャレンジして、知識の定着を確認しましょう

前のトピック

Reactの基本概念

次のトピック

StateとHooks

さらに効果的な学習を

プレミアムプランでは、進捗管理、間違えた問題の自動復習リスト、詳細な解説動画など、 より充実した学習体験をご利用いただけます。