MUI (Material-UI) で簡単なクイズアプリを作った話

概要

React の学習を兼ねて，新しくなった MUI (Material-UI) を用いたクイズアプリを作成した．作成したクイズアプリは GitHub Pages で公開している．また，ソースコードは GitHub にある．

詳細

具体的な実装については，GitHub にあるソースコードを見ていただくことにし，本記事ではプログラムの構成や役割について述べる．

プログラムの構成

GitHub リポジトリの src ディレクトリ内にあるプログラムのうち，クイズアプリを実現する本質的なものは以下の5つである．

│  quiz.js
│
└─components
        qbcheckboxlist.js
        qbradiolist.js
        qbtextfield.js
        quizboard.js

以下，この5つのプログラムの役割を説明する．

プログラムの役割

quiz.js

アプリに表示する問題を記述するプログラムである．以下にその一例を示す．

quiz.js

const quiz = [
    {
        id: 1,
        statement: '10000000の100000倍は1(　　)である。括弧にあてはまる漢字1字を答えよ。',
        type: 'text',
        answer: '兆',
    },
    {
        id: 2,
        statement: '4と6の最小公倍数はいくつか。',
        type: 'number',
        answer: '12',
    },
];

上記のように，アプリに表示する問題をオブジェクトの配列 quiz として記述する．オブジェクトの各プロパティの意味は次の通りである．

• id : 問題番号
• statement : 問題文
• type : 回答欄の種類
• answer : 正答

プロパティ type には text，number，radio，checkbox の4種類が用意されている．radio，checkbox を指定した場合，上記4つのプロパティに加えて

• choices : 選択肢

が必要である．choice には，選択肢をオブジェクトの配列で次のように指定する．

choices: [
    {
        value: 'choice1',
        label: '偶数と偶数の和は奇数である。',
    },
    {
        value: 'choice2',
        label: '偶数と奇数の和は偶数である。',
    },
    {
        value: 'choice3',
        label: '奇数と偶数の和は奇数である。',
    },
    {
        value: 'choice4',
        label: '奇数と奇数の和は奇数である。',
    },
]

プロパティ value には，各選択肢を表す一意的なIDを指定する．value に指定された値は，前述のプロパティ answer で正答を指定するのに用いる．また，プロパティ label には，クイズアプリに表示される選択肢の文言を指定する．

さらに，プロパティ type に checkbox を指定した場合，プロパティ answer には正答を配列で指定する．以下にその一例を示す．

{
    id: 4,
    statement: '次のうち、素数であるものをすべて選べ。',
    type: 'checkbox',
    choices: [
        {
            value: 'choice1',
            label: '1',
        },
        {
            value: 'choice2',
            label: '2',
        },
        {
            value: 'choice3',
            label: '3',
        },
        {
            value: 'choice4',
            label: '4',
        },
    ],
    answer: [
        'choice2',
        'choice3',
    ],
}

quizboard.js

quiz.js に記述された各オブジェクトを基に，クイズを画面に表示するコンポーネントである．quiz.js の記述に問題がある場合は，エラーを表示する．

エラーが表示される例

• プロパティ type に radio を指定しているが，プロパティ choice が配列で指定されていない

qbtextfield.js

quizboard.js の子コンポーネントであり，回答欄にテキストボックスを表示する．quiz.js において，プロパティ type に text，number が指定された場合に使用される．

qbradiolist.js

quizboard.js の子コンポーネントであり，回答欄にラジオボタンリストを表示する．quiz.js において，プロパティ type に radio が指定された場合に使用される．

qbcheckboxlist.js

quizboard.js の子コンポーネントであり，回答欄にチェックボックスリストを表示する．quiz.js において，プロパティ type に checkbox が指定された場合に使用される．

参考

• MUI: The React component library you always wanted