JavaScript(続き)
作業ディレクトリは前回のものを使用してください。
オブジェクト
オブジェクトとは、関係するデータや機能をまとめたものです。オブジェクトは、{}で囲まれた中にいくつかの変数や関数などを持つことができ、それぞれの変数や関数をプロパティと呼びます。
オブジェクトの作成
まずは、中身が空のオブジェクトを作ってみましょう。
const person = {};
そして
console.log(person);
を実行すると
[[Prototype]]: Object
と表示されます。これは、personがオブジェクトであることを示しています。
オブジェクトにプロパティを追加して表示してみましょう。
person.name = "Alice";
person.age = 20;
console.log(person); // { name: 'Alice', age: 20 }
もっとプロパティを追加してみましょう。
const student = {
name: 'John',
age: 20,
isMale: true,
favoriteFoods: ['sushi', 'pizza'],
address: {
country: 'Japan',
city: 'Tokyo',
},
};
console.log(student.name); // John
console.log(student.age); // 20
console.log(student.isMale); // true
console.log(student.favoriteFoods); // ['sushi', 'pizza']
console.log(student.favoriteFoods[0]); // sushi
console.log(student.address); // { country: 'Japan', city: 'Tokyo' }
console.log(student.address.country); // Japan
このように、プロパティには文字列や数値、真偽値、配列、オブジェクトなどを代入することができます。
オブジェクトのプロパティにアクセスするには、ドット記法(object.name)やブラケット記法(object['name'])を使います。上のコードでは、ドット記法を使っています。
ブラケット記法を使ってみましょう。特にドット記法 . でアクセスできない場合に使います。
const object = {
"1": "aaa",
"with-hyphen": "bbb",
"with space": "ccc"
};
console.log(object.1); // SyntaxError: Unexpected number
console.log(object.with-hyphen); // SyntaxError: Unexpected token -
console.log(object.with space); // SyntaxError: Unexpected identifier
console.log(object["1"]); // aaa
console.log(object["with-hyphen"]); // bbb
console.log(object["with space"]); // ccc
Unexpected number, Unexpected token -, Unexpected identifier というエラーが出るのは、プロパティ名が数字やハイフン、スペースで始まっているためです。このような場合は、ブラケット記法を使ってアクセスします。
オブジェクトのプロパティの追加・削除
オブジェクトにプロパティを追加するには、ドット記法やブラケット記法を使って新しいプロパティを代入します。
objectはconstで宣言されていますが、プロパティの追加や削除は可能です。
constで宣言されたものは変更を禁止するのではなく、宣言されたもの自体への再代入を禁止しているだけです。
ちなみに、Object.freezeやObject.sealを使うことで、オブジェクトの変更を禁止することができます。
const object = {
name: 'John',
age: 20,
};
object.isMale = true;
object['favoriteFoods'] = ['sushi', 'pizza'];
console.log(object)
// {
// name: 'John',
// age: 20,
// isMale: true,
// favoriteFoods: ['sushi', 'pizza'],
// }
プロパティを削除するには、delete演算子を使います。
const object = {
name: 'John',
age: 20,
};
delete object.age;
console.log(object); // { name: 'John' }
オブジェクトのプロパティの存在確認
オブジェクトに特定のプロパティが存在するかどうかを確認するには、in演算子を使います。
const object = {
name: 'John',
age: 20,
};
console.log('name' in object); // true
console.log('isMale' in object); // false
イベント
イベント とは、サイト上でユーザーが行った操作（クリック、キーボード入力、マウス移動など）のことを指します。
例えば
| イベント | 説明 |
|---|---|
| クリックイベント | ユーザーがマウスで要素をクリックしたとき |
| キーダウンイベント | ユーザーがキーボードでキーを押したとき |
| マウスオーバーイベント | ユーザーがマウスで要素に乗ったとき |
| フォーム送信イベント | ユーザーがフォームを送信したとき |
| 入力イベント | ユーザーがフォームに入力したとき |
| リサイズイベント | ユーザーがブラウザのウィンドウサイズを変更したとき |
などがあります。
イベントリスナー
イベントリスナーは、特定のイベントが発生したときに実行される関数です。イベントリスナーを使うことで、ユーザーの操作に応じて特定の処理を行うことができます。
例えば、ボタンがクリックされたときにテキストの色を変える関数を作ってみましょう。
[要素].styleにはcssをjsから操作できるインターフェースがあります。
[要素].style.[プロパティ名]で任意のスタイルを取得したり更新したりすることができます。
// 色を変更する関数
function changeColor() {
var color = document.getElementById('text');
color.style.color = 'red';
}
// ボタンがクリックされたときに呼び出される
function onLoaded() {
const button = document.getElementById('button');
button.addEventListener('click', changeColor);
}
// ページの読み込みが完了したときに呼び出される
document.addEventListener('DOMContentLoaded', onLoaded);
functionをインラインで書く場合
// ページの読み込みが完了したときに呼び出される
document.addEventListener('DOMContentLoaded', function() {
// ボタン要素を取得
const button = document.getElementById('button');
// ボタンがクリックされたときにテキストの色を変更する
button.addEventListener('click', function() {
const text = document.getElementById('text');
text.style.color = 'red';
});
});
アロー関数を使う場合
アロー関数を使うとインラインでさらに簡潔に書くことができます。
// ページの読み込みが完了したときに呼び出される
document.addEventListener('DOMContentLoaded', () => {
// ボタン要素を取得
const button = document.getElementById('button');
// ボタンがクリックされたときにテキストの色を変更する
button.addEventListener('click', () => {
const text = document.getElementById('text');
text.style.color = 'red';
});
});
<!DOCTYPE html>
<html>
<head>
<script src="./script.js"></script>
</head>
<body>
<p id="text">色が変わるよ</p>
<button id="button">色を変えるよ</button>
</body>
</html>
これでindex.htmlを開いて、ボタンをクリックするとテキストの色が赤に変わることを確認できます。
なぜDOMContentLoadedイベントを使うのか
DOMContentLoaded イベントは、HTMLドキュメントの読み込みが完了したときに発生します。
イベントが発生するまで、addEventListener 内に記述したJavaScriptの処理は実行されません。
ブラウザはダウンロードしてきたHTMLを上から順に処理していくため、scriptが<head>で読み込まれていると、<body>の描画を処理する前にscriptが起動してしまうことになります。
このとき、処理をそのまま行うと、まだ描画の処理がされていない要素を参照してしまうことになり、正しい処理ができません。
そのため、ページの読み込みが完了する前にこういったJavaScriptの処理が実行されることを防ぐことで、正しく要素への操作が行われるようにしています。
アプリを作ってみよう
JavaScriptを使って、簡単な計算機を作ってみましょう。 ベースとなるHTMLを用意したので、それにJavaScriptを追加してください。 3つのレベルがありますので、それぞれ挑戦してみてください。
本日の作業ディレクトリlec-03を作成し、その中にindex.htmlとscript.jsを作成してください。
maximum
└── webken
└── lec-03
└── index.html
└── script.js
初級
サンプルHTMLコード
見た目：
<!DOCTYPE html>
<html>
<head>
<title>計算機・初級</title>
</head>
<body>
<input type="number" id="num1">
<input type="number" id="num2">
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">*</button>
<button id="divide">/</button>
<button id="clear">C</button>
<p>結果：</p>
<p id="result"></p>
<script src="./script.js"></script>
</body>
</html>
中級
サンプルHTMLコード
見た目：
<!DOCTYPE html>
<html>
<head>
<title>計算機・中級</title>
</head>
<body>
<input type="number" id="num1">
<select id="operator">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="number" id="num2">
<button id="calculate">=</button>
<p id="result"></p>
<script src="./script.js"></script>
</body>
</html>
上級
サンプルHTMLコード
見た目：
<!DOCTYPE html>
<html>
<head>
<title>計算機・上級</title>
</head>
<body>
<input type="text" id="output">
<div>
<button id="calc-button">7</button>
<button id="calc-button">8</button>
<button id="calc-button">9</button>
<button id="calc-button">/</button>
<button id="calc-button">%</button>
</div>
<div>
<button id="calc-button">4</button>
<button id="calc-button">5</button>
<button id="calc-button">6</button>
<button id="calc-button">*</button>
<button id="calc-button">√</button>
</div>
<div>
<button id="calc-button">1</button>
<button id="calc-button">2</button>
<button id="calc-button">3</button>
<button id="calc-button">-</button>
<button id="calc-button">C</button>
</div>
<div>
<button id="calc-button">0</button>
<button id="calc-button">.</button>
<button id="calc-button">=</button>
<button id="calc-button">+</button>
<button id="calc-button">AC</button>
</div>
<script src="./script.js"></script>
</body>
</html>
アドバイス
- 最初は足し算だけ実装してみましょう。
- 慣れないうちはアロー関数を使わずに書いてみましょう
document.getElementById('id')で要素を取得できます。addEventListenerでイベントリスナーを追加できます。element.valueで入力された値を取得できます。element.textContentで要素のテキストを取得・設定できます。
もっと機能を追加してみよう
- デザインを変更する
- 小数点の計算に対応させる
- キーボード入力に対応させる
- エラーハンドリングを追加する (例えば、0で割るときのエラー処理)
- サイトをデプロイして世界中に公開してみる（発展編）
などなど...
もし実装できたものがあったら自分のtimesで自慢しよう！
まとめ
今回習得したことを用いて、計算機だけではなく様々なアプリケーションを作ってみましょう。 次回は、GitHubの使い方や共同開発について学びます。