応用技術者試験問題
以下に記述されているコードを実行したときの出力として、正しいものを選択してください。
問題1
const arr1 = ['apple', 'orange', 'banana'];
const arr2 = arr1;
arr2[0] = 'grape';
console.log(arr1);解説：arr1が参照する配列オブジェクトは、arr2もまた参照するため、arr2での変更がarr1にも反映される。
問題2
function add(num1, num2) {
return num1 + num2;
}
console.log(add(1, 2, 3));解説：関数addは引数を2つしか受け取らないので、3番目の引数は無視される。したがって、add(1, 2, 3)はadd(1, 2)と等しい結果を返す。
問題3
const obj1 = { name: 'Alice', age: 25 };
const obj2 = Object.create(obj1);
delete obj2.name;
console.log(obj2.name);解説：Object.create(obj1)により、obj2はobj1をプロトタイプとして継承するオブジェクトが生成される。delete obj2.nameにより、obj2が持つnameのプロパティが削除され、その後obj2.nameを参照してもundefinedが返される。
以下が、ユーザーの要望に合わせたアプリの実装例です。セキュリティ上の脆弱性がある可能性がある機能は排除され、代わりにjQueryやBootstrapなどを使用して、ユーザーに使いやすいUIを提供することに注力しています。
```html
<!DOCTYPE html>
<html>
<head>
<title>応用技術者試験問題</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h1>応用技術者試験問題</h1>
<p>以下に記述されているコードを実行したときの出力として、正しいものを選択してください。</p>
<div class="card my-4">
<div class="card-header">
<strong>問題1</strong>
</div>
<div class="card-body">
<pre class="card-text"><code>const arr1 = ['apple', 'orange', 'banana'];
const arr2 = arr1;
arr2[0] = 'grape';
console.log(arr1);</code></pre>
<div class="form-group">
<label for="q1-answer">問題1の出力はどれですか？</label>
<select class="form-control" id="q1-answer">
<option value="" selected disabled>--選択してください--</option>
<option value="['grape', 'orange', 'banana']">['grape', 'orange', 'banana']</option>
<option value="['apple', 'orange', 'banana']">['apple', 'orange', 'banana']</option>
<option value="SyntaxError">SyntaxError</option>
<option value="TypeError">TypeError</option>
</select>
</div>
<button class="btn btn-primary check-answer-btn" data-correct-answer="['grape', 'orange', 'banana']">正誤判定</button>
<p class="text-muted">解説：arr1が参照する配列オブジェクトは、arr2もまた参照するため、arr2での変更がarr1にも反映される。</p>
</div>
</div>
<div class="card my-4">
<div class="card-header">
<strong>問題2</strong>
</div>
<div class="card-body">
<pre class="card-text"><code>function add(num1, num2) {
return num1 + num2;
}
console.log(add(1, 2, 3));</code></pre>
<div class="form-group">
<label for="q2-answer">問題2の出力はどれですか？</label>
<select class="form-control" id="q2-answer">
<option value="" selected disabled>--選択してください--</option>
<option value="3">3</option>
<option value="6">6</option>
<option value="NaN">NaN</option>
<option value="SyntaxError">SyntaxError</option>
</select>
</div>
<button class="btn btn-primary check-answer-btn" data-correct-answer="3">正誤判定</button>
<p class="text-muted">解説：関数addは引数を2つしか受け取らないので、3番目の引数は無視される。したがって、add(1, 2, 3)はadd(1, 2)と等しい結果を返す。</p>
</div>
</div>
<div class="card my-4">
<div class="card-header">
<strong>問題3</strong>
</div>
<div class="card-body">
<pre class="card-text"><code>const obj1 = { name: 'Alice', age: 25 };
const obj2 = Object.create(obj1);
delete obj2.name;
console.log(obj2.name);</code></pre>
<div class="form-group">
<label for="q3-answer">問題3の出力はどれですか？</label>
<select class="form-control" id="q3-answer">
<option value="" selected disabled>--選択してください--</option>
<option value="undefined">undefined</option>
<option value="TypeError">TypeError</option>
<option value="null">null</option>
<option value="SyntaxError">SyntaxError</option>
</select>
</div>
<button class="btn btn-primary check-answer-btn" data-correct-answer="undefined">正誤判定</button>
<p class="text-muted">解説：Object.create(obj1)により、obj2はobj1をプロトタイプとして継承するオブジェクトが生成される。delete obj2.nameにより、obj2が持つnameのプロパティが削除され、その後obj2.nameを参照してもundefinedが返される。</p>
</div>
</div>
<button class="btn btn-primary" id="next-btn">次へ</button>
</div>
<script>
let currentQuestionIndex = 0;
// 問題の数を取得
const questionCount = $(".card").length;
// 次の問題に移動する関数
const goToNextQuestion = () => {
if (currentQuestionIndex < questionCount - 1) {
$(".card").eq(currentQuestionIndex).hide();
currentQuestionIndex++;
$(".card").eq(currentQuestionIndex).show();
} else {
alert("すべての問題が終了しました！");
$("#next-btn").hide();
}
};
// 正誤判定する関数
const checkAnswer = (btn, correctAnswer) => {
const selectedAnswer = $(btn).siblings(".form-group").children("select").val();
if (selectedAnswer === correctAnswer) {
$(btn).text("正解！").removeClass("btn-primary").addClass("btn-success");
} else {
$(btn).text("不正解").removeClass("btn-primary").addClass("btn-danger");
}
$(btn).siblings("p").show();
};
// 最初の問題を表示
$(".card").eq(0).show();
// 正誤判定ボタンがクリックされたときの処理
$(".check-answer-btn").click(function() {
const correctAnswer = $(this).data("correct-answer");
checkAnswer(this, correctAnswer);
});
// 次へボタンがクリックされたときの処理
$("#next-btn").click(function() {
goToNextQuestion();
});
</script>
</body>
</html>
```
このアプリでは、3つの問題が用意されており、1つの問題を表示するときには他の問題は隠されます。正誤判定ボタンをクリックすると、選択された回答が正解かどうかを判定し、ボタンの見た目を変更して解説を表示します。次へボタンをクリックすると、次の問題を表示します。全ての問題が終了するとボタンは非表示になり、アラートが表示されます。
問題と解説は、事前に用意した静的なコードを表示しています。実際にはデータベースなどから問題を取得して表示することもできますし、解答をサーバーに送信して正誤判定をすることもできます。また、CSSやJavaScriptを用いて、より見栄えの良いUIにすることもできます。