Reactクイズ（初心者向け）
チュートリアルの次に

公開日：2025.01.11　更新日：2025.01.11

廣瀬製紙株式会社稼働率向上PJチームのA.Mです。

今回は、Reactの初心者向けクイズを10問用意しました！
対象は、公式ドキュメント「チュートリアル：三目並べ」の内容を学び終えた方のほか、入門書を一冊読んだ方、Reactを始めたてで知識を確認したい、という方です。
特にチュートリアルで学び始めたとき、「はやくおもしろい開発を始めたい！」と、ついつい気がはやってしまい先へと読み飛ばしがちになりませんか？。
ですがスキルアップのために、公式ドキュメントを徹底的に読み込むということはとても大事なことですよね。

このクイズを通して「あ、この部分理解が足りてないかも……」と気づくきっかけになれば嬉しいです。
もちろん「チュートリアル：三目並べ」を行ってない方も知識の確認で取り組んでいただけます。
それでは、クイズにチャレンジしてみましょう。制限時間はありませんので、じっくり考えてくださいね。がんばって全問正解を目指しましょう！

さっそくクイズにチャレンジ！

Reactコンポーネントの命名規則

Q1. Reactのカスタムコンポーネントの名前は、どのように命名するべきでしょうか？

A. 小文字で始める
B. 大文字で始める
C. 数字で始める

正解を見る

B. 大文字で始める

カスタムコンポーネントは大文字で始める必要があります。小文字で始める名前はReactでHTMLタグとして扱われます。

JSXの役割

Q2. JSXとは何でしょうか？

A. React専用のCSSスタイリングツール
B. JavaScriptとHTMLを組み合わせてUIを記述する構文
C. 状態管理のための特別なライブラリ

正解を見る

B. JavaScriptとHTMLを組み合わせてUIを記述する構文

JSXはHTMLライクな構文を使ってReactコンポーネントを記述するための方法です。

Propsの利用

Q3. propsはどの方向にデータを流すために使われますか？

A. 子コンポーネントから親コンポーネントへ
B. 親コンポーネントから子コンポーネントへ
C. 同じコンポーネント内でデータを管理するため

正解を見る

B. 親コンポーネントから子コンポーネントへ

propsは親から子へデータを渡すために使用されます。一方向のデータフローがReactの特徴です。

状態管理

Q4. コンポーネント内で状態を管理するために使用されるReactフックはどれですか？

A. useEffect
B. useState
C. useContext

正解を見る

B. useState

useStateはReactでコンポーネントの状態を管理するためのフックです。状態管理が複雑になった場合は、他の方法（例: useReducerや状態管理ライブラリ）を検討することもあります。

要素の動的なレンダリング

Q5. Reactで要素を動的にレンダリングする際に必要なものは何ですか？

A. 各要素に一意のkeyを設定する
B. 各要素にclassNameを設定する
C. 各要素にpropsを設定する

正解を見る

A. 各要素に一意のkeyを設定する

keyはReactが要素を一意に識別し、並び順の変更や要素の追加・削除を効率的に処理するために必要です。これにより、仮想DOMの差分計算が最適化され、無駄な再レンダリングを防ぎます。

イベントハンドリング

Q6. Reactでボタンがクリックされたときに関数を実行するにはどうしますか？

A. <button click={handleClick}>
B. <button onClick={handleClick}>
C. <button addEventListener={handleClick}>

正解を見る

B. <button onClick={handleClick}>

onClickプロパティを使用してイベントハンドラーを設定します。

イミュータビリティ（不変性）

Q7. Reactで配列を更新する際の推奨される方法はどれですか？

A. 配列を直接変更する
B. 配列のコピーを作成して変更する
C. 配列の最初の要素だけを変更する

正解を見る

B. 配列のコピーを作成して変更する

イミュータビリティを保つために配列のコピーを作成してから変更するのが推奨されます。

状態のリフトアップ

Q8. 複数の子コンポーネントが同じデータを必要とする場合、状態はどこに配置すべきですか？

A. 親コンポーネント
B. 最初の子コンポーネント
C. すべての子コンポーネント

正解を見る

A. 親コンポーネント

状態を親コンポーネントに配置することで、すべての子コンポーネントがその状態を共有できます。

コンポーネントの再レンダリング

Q9. 親コンポーネントが再レンダリングされる時、子コンポーネントはどのような挙動をしますか？

A. 子コンポーネントは再レンダリングされる
B. 親コンポーネントだけが再レンダリングされる
C. 状態が変更されない限りレンダリングはスキップされる

正解を見る

A. 子コンポーネントを再レンダリングする

親コンポーネントが再レンダリングされると子コンポーネントも再レンダリングされます。
※メモ化（React.memo など）を使用し、かつ props が変更されない場合は再レンダリングをスキップします。

イミュータビリティが必要な理由

Q10. Reactで配列やオブジェクトを直接変更しない（不変性を保つ）理由は何ですか？

A. JavaScriptでの計算速度を上げるため
B. Reactが状態の変化を検知できなくなる可能性があるため
C. DOM要素を直接操作する必要があるため

正解を見る

B. Reactが状態の変化を検知できなくなる可能性があるため

直接変更すると状態の差分が検出できず、UIが正しく更新されない可能性があります。

おわりに

いかがでしたか？10の問題を通じて、Reactの基礎知識を振り返ることができたのではないでしょうか。
全問正解できた方は、チュートリアルの内容をしっかりと理解できているということですね。素晴らしいです！
もし間違えてしまった問題があった方も、自分の理解が不十分な部分を発見できたことはとても良いことです。ぜひもう一度チュートリアルに戻って、該当の部分をじっくりと読み直してみてください。

このクイズを通じて、皆さんの知識の整理につながれば幸いです。「わかった気になっていた」部分と「本当に理解できている」部分の違いに気づくことも、プログラミング学習では大切なステップですよね。
次回は、もう少し難易度の高い問題や、実践的な内容のクイズも作成していければと思っています。Reactの学習でお悩みの方は、ぜひまた当ブログに遊びに来てくださいね。皆さんの学習のお手伝いができることを楽しみにしています！
Happy Coding!