🎓JavaScript初心者がつまずかない！超基本の5ステップ問題を解説付きで完全マスター

プロコム開発チーム

プログラミング初心者がJavaScriptを学び始めると、「if文って何？」「forっていつ使うの？」「関数の形が覚えられない…」など、小さなつまずきが積み重なりがち。

この記事では、そんなビギナー向けに実際に手を動かせる5つの練習問題とその丁寧な解説を用意しました。
すべて「初めてJavaScriptを書く人」でも安心して読めるように構成しています。

✍️1. if文で条件分岐しよう！

🔽問題：

let age = 18;

// ここに条件分岐を書く
// 年齢が20歳以上なら「大人です」、未満なら「未成年です」と表示する処理をif文で書いてください。

✅解答例：

if (age >= 20) {
  console.log("大人です");
} else {
  console.log("未成年です");
}

🧠解説：

JavaScriptでは、if (条件) { 実行するコード } という形で条件分岐ができます。

age >= 20 は「ageが20以上なら」という意味
else は「それ以外のとき」

ポイント：

>= は「以上」
== は「等しい」、!= は「等しくない」

これができれば、アンケートやフォームなどで「未成年判定」や「割引の適用」などが実装できるようになります。

✍️2. 配列×for文で繰り返し処理！

🔽問題：

let names = ["Procom", "Taro", "Hanako"];

// ここにループ処理を書く
// すべての名前を1行ずつ console.log() で表示しましょう。

✅解答例：

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

🧠解説：

for 文は「繰り返し処理」をするときに使います。
i はインデックス番号で、0から始まる。
names.length は配列の要素数。

つまり「0から始めてnamesの数だけ繰り返し、毎回names[i]を表示してね」という意味です。

補足：
最近では以下のような書き方もよく使われます：

for (const name of names) {
  console.log(name);
}

✍️3. 関数を作ってみよう！

🔽問題：

// 関数 addNumbers をここに定義

let result = addNumbers(3, 5);
console.log(result); // 結果 → 8

✅解答例：

function addNumbers(a, b) {
  return a + b;
}

🧠解説：

function 関数名(引数) { 処理 } の形で関数を定義します。
return は「関数の外に結果を渡す」命令。

この例では a と b を受け取って、その合計 a + b を返しています。

ポイント：

関数は何度でも再利用できます！
console.log(addNumbers(10, 20)); → 30 が出力されます。

✍️4. オブジェクトでデータを管理！

🔽問題：

// オブジェクトを定義
// 名前を表示

// 名前: "ProcomUser"
// 年齢: 28
// SNS: "Instagram"

✅解答例：

let user = {
  name: "ProcomUser",
  age: 28,
  sns: "Instagram"
};

console.log(user.name);

🧠解説：

オブジェクトは「関連するデータをまとめる」ための箱です。

{ name: "〜" } のように キー: 値 のペアで管理します。
user.name のように「ドット記法」でデータを取り出せます。

活用例：

console.log(`${user.name}さんは${user.age}歳で、${user.sns}を使っています`);

これで「ProcomUserさんは28歳で、Instagramを使っています」と表示されます。

✍️5. ボタンを押したら「こんにちは！」

🔽問題：

<!-- HTML -->
<button id="helloBtn">クリックしてね</button>

<script>
// JavaScript をここに書く
</script>

✅解答例：

<button id="helloBtn">クリックしてね</button>

<script>
document.getElementById("helloBtn").addEventListener("click", function() {
  alert("こんにちは！");
});
</script>

🧠解説：

getElementById() で HTMLのボタン要素を取得します。
addEventListener("click", 関数) でクリック時の処理を設定。
alert() でポップアップ表示します。

超重要ポイント：

この仕組みはイベントハンドラーと呼ばれます。
ユーザーの操作に応じたインタラクティブなUIを作る基礎中の基礎です。

📌まとめ：この5問がマスターできれば脱・初心者！

テーマ	学べること
if文	条件に応じて処理を分ける
配列＋for文	繰り返し処理でデータを扱う
関数	処理をまとめて再利用する
オブジェクト	関連する情報を1つにまとめる
イベント処理	ユーザーの操作に反応する