廣瀬製紙株式会社

Employees' Blog 社員ブログ

Reactクイズ2(初心者向け)

公開日:2025.01.17 更新日:2025.01.27
Reactのイラスト

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

前回に引き続き、Reactの初心者向けクイズを10問用意しました!
今回も、公式ドキュメント「REACTを学ぶ」を学んだ方の補足的なクイズとして作成しております。
それでは、クイズにチャレンジしてみましょう。制限時間はありませんので、じっくり考えてくださいね。がんばって全問正解を目指しましょう!

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

useState

Q1. 以下の説明のうち、useStateに関する正しい説明を1つ選んでください。

  • A. useStateはReactの関数コンポーネントやクラスコンポーネントで状態管理を可能にする仕組みである。
  • B. useStateに初期値を設定しないとエラーになる。
  • C. useStateはReactの組み込みフックのひとつである。
正解を見る

C. useStateはReactの組み込みフックのひとつである。

※ 1が不正解の理由: useStateフックはReactの関数コンポーネントでのみ使用可能で、クラスコンポーネントではstateプロパティやsetStateメソッドを使用します。
※ 2が不正解の理由: 初期値を設定しない場合でもエラーにはなりませんが、状態の初期値はundefinedになります。

イベントハンドラの渡し方

Q2. Reactでイベントハンドラをコンポーネントに渡す方法はどれですか?

  • A. props(プロパティ)として渡す
  • B. デフォルト引数として渡す
  • C. 子コンポーネント内で直接定義する
正解を見る

A. props(プロパティ)として渡す

名前付きエクスポートの記述

Q3. 以下のどの構文が、名前付きエクスポートを利用したインポート文として正しいですか?

  • A. import { ComponentName } from ‘./Component’;
  • B. import ComponentName from ‘./Component’;
  • C. import ‘./Component’;
正解を見る

A. import { ComponentName } from ‘./Component’;

名前付きエクスポートを利用したインポート文としては、Aが正しいです。

JSXの注意点

Q4. JSX で複数の要素を返すときに必要なことは?

  • A. 複数の <div> タグでそれぞれラップする必要がある
  • B. 単一の親タグやフラグメント <> でラップする必要がある
  • C. 要素を分割して別々のコンポーネントに分ける必要がある
正解を見る

B. 単一の親タグやフラグメント <> でラップする必要がある

JSX では複数の要素を単一のルート要素またはフラグメントでラップする必要があります。

JSXの属性

Q5. JSX における属性の記述方法で正しいものはどれ?

  • A. HTML と同じく全て小文字で記述する(例: class=”example”)
  • B. JavaScript に準拠してキャメルケースを使用する(例: className=”example”)
  • C. 属性はすべて省略可能
正解を見る

B. JavaScript に準拠してキャメルケースを使用する

JSX の属性は JavaScript オブジェクトのキーになるため、`className` のようにキャメルケースで記述します。

JSXでのimgタグ

Q6. JSX で <img /> タグを正しく書くにはどうすれば良い?

  • A. HTML と同じく <img /> のままで良い
  • B. 明示的に閉じる必要があるため <img /> と記述する
  • C. <image /> に書き換える必要がある
正解を見る

B. 明示的に閉じる必要があるため と記述する

JSX では全てのタグを明示的に閉じる必要があるため、自己終了タグは <img /> のように記述します。

Japascriptの記述方法

Q7. JSX内でJavaScriptの変数や式を使いたい場合、どうすれば良いですか?

  • A. ダブルクオートで囲む
  • B. 波括弧 {} を使う
  • C. セミコロン ; を使う
正解を見る

B. 波括弧 {} を使う

インラインスタイル

Q8. インラインスタイルをReactで適用する場合、以下のどの記述が正しいでしょうか?

  • A. <div style=”background-color: black;”>Hello</div>
  • B. <div style={{background-color: ‘black’}}>Hello</div>
  • C. <div style={{backgroundColor: ‘black’}}>Hello</div>
正解を見る

C. <div style={{backgroundColor: ‘black’}}>Hello</div>

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

コードエラーの原因

Q9. 以下のコードがエラーになる理由として正しいものはどれでしょう?

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    

{person}'s Todos

); }
  • A. JSXではオブジェクトを直接出力できないため
  • B. personという変数名が予約語のため
  • C. return文の中で波括弧を使っていないため
正解を見る

A. JSXではオブジェクトを直接出力できないため

デフォルト値

Q10. 以下のコードで指定されているデフォルト値が利用されるのはどのような場合ですか?

function Avatar({ size = 100 }) {
  return ;
}

  • A. sizeが渡されない場合やundefinedが渡された場合
  • B. sizeにnullや0が渡された場合
  • C. sizeが常に指定されている場合
正解を見る

A. sizeが渡されない場合やundefinedが渡された場合

おわりに

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

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