【無料】初心者向けのJavaScriptの練習問題【解説有】

2023年3月16日2024年4月19日

こんにちは！

この記事ではJavaScriptの基礎を理解した方向けに、実際に手を動かして学べる練習問題をいくつか紹介します。
JavaScriptはWeb開発に欠かせないプログラミング言語であり、基礎的な知識から応用的なテクニックまで幅広く学ぶことができます。

解説もしていますが、まずは自分で考えて手を動かしてみてください！

変数の宣言と代入

変数はJavaScriptで最も基本的な概念の1つです。変数の宣言には、var、let、constのいずれかを使用します。

それぞれの違いについては後ほど説明します。以下の問題に挑戦してみましょう。

練習問題

問題1: 以下のプログラムを実行した場合、どのような結果が得られるでしょうか？

JavaScript

let x = 5;
console.log(x);

問題2: 変数xに10を代入し、その後変数yに変数xの値を代入し、変数yの値を表示するプログラムを作成してください。

問題3: letを使用して変数zを宣言し、値を代入した後に再度代入してみてください。宣言時に初期値を設定しない場合はどうなるでしょうか？

解説

問題1では、変数xに5を代入し、console.logで変数xの値を表示します。
そのため、コンソールには「5」という文字列が表示されます。

問題2では、まず変数xに10を代入し、その後変数yに変数xの値を代入します。
最後にconsole.logで変数yの値を表示します。よってコンソールには「10」という文字列が表示されます。

JavaScript

let x = 10;
let y = x;
console.log(y);

問題3では、letを使用して変数zを宣言し、値を代入した後に再度代入します。
再代入をすることができますが、初期値を設定しない場合、変数zの値はundefinedになります。

JavaScript

let z;
console.log(z);    //undefined
z = 10;
console.log(z);    //10が出力

この問題は少し難しかったかもしれません。一度自分でコードを書いて実行してみるのがおすすめです。

頭の中で考えるだけよりも実際に自分の手で実行すると理解度が全く違います！

条件分岐

条件分岐は、ある条件が成立した場合に実行されるプログラムを指定するための構文です。

JavaScriptでは、if、else if、elseのいずれかを使用します。以下の問題に挑戦してみましょう。

練習問題

問題1: 変数xに10を代入し、もし変数xが5以下であれば「xは5以下です」と表示し、それ以外の場合は「xは5より大きいです」と表示するプログラムを作成してください。

解説

条件分岐の問題では、if文を使用して、条件に応じた分岐を行います。

問題1では、まず変数xに10を代入します。

その後if文を使用して、xが5以下の場合とそれ以外の場合に分けて処理を行います。以下が一例です。

JavaScript

let x = 10;

if (x <= 5) {
  console.log("xは5以下です");
} else {
  console.log("xは5より大きいです");
}

このプログラムでは、変数xが5以下ではないため、「xは5より大きいです」と表示されます。

xに代入する数字を変えて試してみてください。

ループ処理

ループ処理は、ある条件が満たされる限り同じ処理を繰り返すための構文です。

JavaScriptでは、for文、while文、do while文のいずれかを使用します。以下の問題に挑戦してみましょう。

練習問題

問題1: 1から10までの数値を順番に表示するプログラムを作成してください。

問題2: 1から10までの数値のうち、偶数のみを表示するプログラムを作成してください。

問題3: 1から10までの数値を合計した結果を表示するプログラムを作成してください。

解説

ループ処理の問題では、for文やwhile文を使用して、繰り返し処理を行います。

問題1では、for文を使用して1から10までの数値を順番に表示します。以下がプログラムの例です。

JavaScript

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

このプログラムでは、1から10までの数値が順番に表示されます。

問題2では、同様にfor文を使用して、1から10までの数値のうち偶数のみを表示します。以下がプログラム例です。

JavaScript

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

このプログラムでは、2、4、6、8、10という偶数のみが表示されます。

問題3では、for文を使用して1から10までの数値を合計します。以下がプログラムの例です。

JavaScript

var sum = 0;

for (let i = 1; i <= 10; i++) {
  sum += i;
}

console.log(sum);

このプログラムでは、1から10までの数値を合計した結果である55が表示されます。

関数

関数は、複数の処理をまとめてひとつの処理として扱うための機能です。

JavaScriptでは、functionキーワードを使用して関数を定義します。以下の問題に挑戦してみましょう。

練習問題

問題1: 引数として渡された2つの数値の和を計算して、結果を返す関数addを定義してください。

問題2: 引数として渡された文字列を逆順に並べ替えた文字列を返す関数reverseを定義してください。

解説

関数の問題では、functionキーワードを使用して関数を定義します。

問題1では、2つの数値を受け取って和を計算して返す関数addを定義します。以下がプログラム例です。

JavaScript

function add(num1, num2) {
  return num1 + num2;
}

console.log(add(3, 5)); // 8

このプログラムでは、add関数に引数として3と5を渡して呼び出します。
add関数内でnum1とnum2の和を計算して返します。その結果である8が表示されます。

問題2では、引数として渡された文字列を逆順に並べ替えた文字列を返す関数reverseを定義します。
以下がプログラムの例です。

JavaScript

function reverse(str) {
  return str.split("").reverse().join("");
}

console.log(reverse("hello")); // "olleh"

このプログラムでは、reverse関数に引数として”hello”を渡して呼び出します。reverse関数内でまずsplitメソッドを使用して文字列を分割し、reverseメソッドを使用して配列を逆順に並べ替えます。
そして、joinメソッドを使用して配列を文字列に変換して返します。その結果である”olleh”が表示されます。

オブジェクト

オブジェクトは、複数の値や関数をひとつにまとめたデータ型です。
JavaScriptでは、波括弧{}を使用してオブジェクトを定義します。以下の問題に挑戦してみましょう。

この単元は少し難しいですが考えて見ましょう！

練習問題

問題1: プロパティnameに「John」という値を持ち、メソッドsayHelloを持つオブジェクトpersonを定義してください。sayHelloメソッドは、「Hello, John!」という文字列を表示します。

問題2: プロパティnameに「Mary」という値を持ち、プロパティageに25という値を持つオブジェクトpersonを定義してください。また、メソッドbirthdayを定義して、ageプロパティの値を1増やすようにしてください。

解説

問題1では、波括弧を使用してオブジェクトpersonを定義し、プロパティnameに「John」という値を設定します。
またメソッドsayHelloを定義して「Hello, John!」という文字列を表示します。以下がプログラムの例です。

JavaScript

const person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

person.sayHello(); // "Hello, John!"

このプログラムでは、オブジェクトpersonを定義し、nameプロパティに「John」という値を設定します。
また、sayHelloメソッドを定義し、thisキーワードを使用してnameプロパティの値を取得することで
「Hello, John!」という文字列を表示します。
そして、personオブジェクトのsayHelloメソッドを呼び出すことで文字列が表示されます。

問題2では、プロパティnameに「Mary」という値を持ち、プロパティageに25という値を持つオブジェクトpersonを定義します。また、メソッドbirthdayを定義して、ageプロパティの値を1増やすようにします。
以下がプログラムの例です。

JavaScript

const person = {
  name: "Mary",
  age: 25,
  birthday: function() {
    this.age++;
  }
};

console.log(person.age); // 25
person.birthday();
console.log(person.age); // 26