はじめに
随分とおせっかいな煽りタイトルですが プロゲートやドットインストールなどでJavaScriptの基礎を学ぶだけではReactやVueなどのライブラリ・フレームワークなどの学習で躓いてしまうことでしょう。これからReactやVueを学ぶ方向けにJavaScriptの基礎を確認できる問題を用意しました。
解答は一番下にまとめてあります！
ターゲット
- 「JavaScriptの基礎を一通り学んだからReactやVueの勉強に移るか！」と考えている方
- React,Vueなどの勉強をしているが、「ReactやVueではなくJavaScriptが分かってないよ」と言われてしまった方
問題編
レベル1
1-1
下のコードを実行すると何が表示されるか？
let name = "TBSten" ;
if(name === "TBSten"){
console.log("ok");
}else{
console.log("no");
}
1-2
下のコードを実行すると何が表示されるか？
for(let i = 0;i < 10;i+=2){
console.log(i);
}
1-3
下のコードを実行すると何が表示されるか？
const user = {
name:"TBSten",
old:30,
} ;
if(user >= 18){
console.log("成人");
}else{
console.log("子供");
}
1-4
下のコードを実行すると何が表示されるか？
try{
const x = 100 / 0 ;
console.log(x);
}catch(e){
console.log(e);
}
レベル2
2-1
下のコードを実行すると何が表示されるか？
<html>
<head></head>
<body>
<div id="test">
TEST-1
</div>
TEST-2
</body>
<script src="index.js"></script>
</html>
const $test = document.getElementById("test");
console.log( $test.innerHTML ) ;
2-2
下のコードを実行すると何が起こるか？
<html>
<head></head>
<body>
<div id="test">
TEST-1
</div>
TEST-2
<button id="btn">PUSH</button>
</body>
<script src="index.js"></script>
</html>
const $btn = document.getElementById("btn");
const $test = document.getElementById("test");
$btn.addEventListener("click",(e)=>{
console.log(e.target.innerHTML);
});
2-3
下のコードを実行すると何が起こるか？
<html>
<head></head>
<body>
<div id="test">
TEST-1
</div>
TEST-2
<button id="btn">PUSH</button>
</body>
<script src="index.js"></script>
</html>
const $btn = document.getElementById("btn");
const $test = document.getElementById("test");
$btn.addEventListener("click",(e)=>{
$test.innerHTML = "CLICKED!" ;
e.target.disabled = false ;
console.log("clicked");
});
レベル3
3-1
下のコードを実行すると何が表示されるか？
const arr = ["a","b","c"] ;
console.log(arr[1]);
console.log(arr[2]);
3-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
const arr = ["a","b","c"] ;
arr.forEach(e=>{
console.log("element :"+e);
})
3-3
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
const arr = ["a","b","c"] ;
console.log(
arr.map((e,i)=>{
console.log(`arr[${i}] = ${e}`);
return e ;
})
);
3-4
下のコードを実行して以下のように表示したい。
（1）～（4）に当てはまるものを答えよ。
"a"
"b"
"c"
"d"
"e"
(適宜メソッドなどを調べてもいい)
const arr = ["a","b","c"] ;
arr.（1）("d")
arr.（2）("e")
arr.（3）((e)=>{
console.log( （4） );
});
3-5
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
const arr1 = ["a","b","c"] ;
const arr2 = [1,2] ;
const arr3 = [...arr1,arr2];
console.log(arr3);
レベル4
4-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
const ob1 = {
name:"TBS",
} ;
const ob2 = {
name:"TBS",
} ;
console.log(ob1 == ob2);
console.log(ob1 === ob2);
4-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
class User{
constructor(name,old){
this.name = name ;
this.old = old ;
}
greet(){
console.log(`my name is ${ this.name } . `);
console.log(`i am ${ this.old } years old . `);
}
}
const tbsten = new User("TBSten",300) ;
console.log(tbsten);
console.log(tbsten.firstname);
tbsten.greet();
4-3
下のコードを実行すると何が表示されるか？
const ob1 = {
name:"てすと",
old:60,
} ;
const ob2 = {
name:"TBSten",
point:300,
};
const ob3 = {
...ob1,
...ob2
};
console.log(ob3);
レベル5
5-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
function add(a,b){
console.log(a,"+",b);
return a + b ;
}
console.log( add ) ;
console.log( add(1,2) ) ;
console.log( add(10+20,30+40) ) ;
5-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
function input(name){
name = "TBSten" ;
}
let name = "" ;
input(name);
console.log(name);
5-3
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
console.log( Math.floor(Math.random()*100)+10 );
5-4
コード1をコード2,3に書き換えたい。（1）～（5）に当てはまるものを答えよ。
function test1(a,b){
return a+b;
}
console.log( test1(10,20) );
const test1 = (a,b)=>{
（1）
}
console.log( （2） );
const test1 = function( （3） ){
（4）
}
console.log( （5） );
5-5
下のコードを実行すると何が起こるか？
(適宜メソッドなどを調べてもいい)
setInterval(()=>{
function test(){
console.log("test");
}
test();
},3000);
5-6
(a)~(e)を実行される順に並べかえよ。
(適宜メソッドなどを調べてもいい)
(a)
setInterval(()=>{
(b)
function test(){
(c)
}
(d)
},3000);
(e)
5-7
下のコードを実行すると何が表示されるか？
function f1(v){
console.log("f1",v);
return v+1;
}
function f2(v){
console.log("f2",v);
return v*2;
}
function f3(v){
console.log("f3",v);
return v-10;
}
console.log("ans " , f1( f2( f3(30) ) ) );
レベル6
6-1
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
async function test1(){
return "OK" ;
}
console.log(test1());
6-2
下のコードを実行すると何が表示されるか？
(適宜メソッドなどを調べてもいい)
async function test1(){
return "OK" ;
}
test1.then((res)=>{
console.log(res)
})
6-3
下のコードを実行すると何がおこるか予測しなさい。
(適宜メソッドなどを調べてもいい)
(async function(){
//ユーザー情報をデータベースから取得
const res = await getUserData();
console.log(res.name);
})();
6-4
下のコード中のgetUserData関数の処理内容を推測せよ。
function getUserData(){
return new Promise((res,rej)=>{
try{
const res = await fetch("https://test.com/api");
const json = await res.json();
res(json);
}catch(e){
rej(e);
}
});
}
解答編
1-1
ok
1-2
0
2
4
6
8
1-3
エラーが発生する。
（5行目で オブジェクト と 数字 を比較演算子で比較しているため）
1-4
エラーが表示される。
（2行目で0で割り算しようとしているから）
2-1
TEST-1
2-2
ボタンが押されたときに"PUSH"が表示される。
2-3
ボタンが押されたとき、以下の処理が起こる。
- idが"test"の要素の中が"CLICKED"に書き換わる
- ボタンがクリックできなくなる
- "clicked"と表示される
3-1
b
c
3-2
element :a
element :b
element :c
3-3
arr[0] = a
arr[0] = b
arr[0] = c
["a","b","c"]
3-4
（1） : push
（2） : push
（3） : forEach
（4） : e
3-5
["a","b","c", [1,2] ]
4-1
false
false
4-2
{ name:"TBSten", old:300 }
undefined
my name is TBSten .
i am 300 years old .
4-3
{ name:"TBSten", old:60, point:300 }
5-1
add f(){}
1+2
3
30+70
100
※1行目はブラウザによって差異がありますが関数自体が表示されることがポイントです。
5-2
(空白文字)
※何も表示されません
5-3
10以上110未満の整数
5-4
（1） : return a+b ;
（2） : test1(10,20)
（3） : a,b
（4） : return a+b ;
（5） : test1(10,20)
5-5
3秒に1回"test"と表示される
5-6
a, e, b, d
(cは実行されない)
5-7
f3 30
f2 20
f1 40
ans 41
6-1
Promiseオブジェクト
6-2
OK
6-3
データベースからユーザ情報を取得してユーザ名を表示する
6-4
"https://test.com/api" からデータをJSON形式で取得する。
終わりに
全問解けたあなた・・・こんな記事見てないでもっと勉強することがあるはずです。
半分くらい解けたあなた・・・この調子でいろいろなライブラリ・フレームワークに触れてみてください！
何も解けなかったあなた・・・察してください