JavaScriptオブジェクトの基本
オブジェクトとは
JavaScriptにおけるオブジェクトは、プロパティとメソッドを持つデータ構造です。キーと値のペアで構成され、関連データを整理・管理します。オブジェクトはデータストレージとして機能し、名前空間を提供し、コンストラクタとして新しいインスタンスを生成します。
オブジェクトプロパティ
const vehicle = {
brand: "Toyota",
model: "Prius",
year: 2020,
color: "silver"
};オブジェクトは基本データ型以外の値を保持します。次の例では変数が基本型を保持します：
let fruit = "apple"; // 基本データ型プロパティへのアクセス方法：
console.log(vehicle.brand); // ドット記法
console.log(vehicle["model"]); // ブラケット記法オブジェクトメソッド
メソッドはオブジェクトに紐付いた関数です：
const calculator = {
add: function(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(10, 4)); // 6thisキーワード
thisは現在のオブジェクトコンテキストを参照します：
const user = {
name: "Alice",
greet() {
return `こんにちは、${this.name}さん！`;
}
};
console.log(user.greet()); // こんにちは、Aliceさん！JavaScriptゲーム開発実践
数当てゲームの実装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数当てゲーム</title>
<style>
.game-container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ccc;
}
input { padding: 8px; margin: 10px; }
</style>
</head>
<body>
<div class="game-container">
<h1>数当てゲーム</h1>
<p id="feedback">1から100までの数字を入力してください</p>
<input type="number" id="guessInput" min="1" max="100">
<button onclick="validateGuess()">確認</button>
</div>
<script>
let targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function validateGuess() {
const userInput = document.getElementById('guessInput');
const feedback = document.getElementById('feedback');
const userValue = parseInt(userInput.value);
if (isNaN(userValue)) {
feedback.textContent = "有効な数字を入力してください";
return;
}
attempts++;
if (userValue === targetNumber) {
feedback.textContent = `正解！${attempts}回で当たりました`;
disableInput();
} else if (userValue < targetNumber) {
feedback.textContent = "もっと大きいです";
} else {
feedback.textContent = "もっと小さいです";
}
userInput.value = "";
}
function disableInput() {
document.querySelector('button').disabled = true;
document.getElementById('guessInput').disabled = true;
}
</script>
</body>
</html>