JavaScriptのオブジェクトの基礎部分については、以下の記事で解説をしています。
オブジェクトにメソッドを定義
JavaScriptのオブジェクトには、変数だけではなく、関数も定義することが可能です。
以下は、オブジェクトの初期化時にメソッドを定義する構文になります。
ちなみにオブジェクトに保持される関数は「メソッド」と呼びます。
let オブジェクト = {
キー: function( 引数 ) { 関数の処理 }
}メソッドの呼び出しは、以下の通りです。
オブジェクト.キー(引数) // ドット記法
オブジェクト['キー'](引数) // ブラケット記法オブジェクトの定義時に引数無しの場合は、()のみでOKです。
実際のコード例を紹介します。
let javaScript = {
name: 'JavaScript',
description: 'オブジェクト解説',
run: function() { console.log(`${this.name}:${this.description}`) }
}
javaScript.run()
// JavaScript:オブジェクト解説余談：シンボル（Symbol）
使うことは中々ないですが、知識としてはあったほうが良いので簡単に解説します。
シンボルはES6で追加された特殊な型になります。
使用タイミングは、オブジェクトのキーに設定するためのユニークな値を作成する時です。
シンボルの定義は以下の通りです。
let 変数名 = Symbol('目印')実際に使用したコード例はこちらです。
let symbol1 = Symbol()
let symbol2 = Symbol()
let obj = {
[symbol1]: 'value',
[symbol2]: function() { console.log('Symbol2') }
}
obj[symbol2]() // Symbol2オブジェクトのキーにシンボルを使う場合は、ブラケット記法じゃないとアクセスできないので、そこは注意してください。
コード紹介
少し話が逸れましたが、オブジェクトにメソッドを定義するコードを紹介します。
かなり無理やり感はありますが、以下のコードを参考に色々アレンジしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<div>
<label for="name">名前: </label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="age">年齢: </label>
<input type="number" name="number" id="age">
</div>
<div>
<input type="submit" value="定年CHECK!" onclick=getCheckHandler()>
</div>
</body>
<script>
function getCheckHandler() {
const name = document.getElementById('name').value
const age = document.getElementById('age').value
let empObj = {
name: name,
age: age,
calc: function () {
alert(`${this.name}さんの定年退職まであと${60 - this.age}年です。`)
}
}
if (name !== '' && age !== '') {
empObj.calc()
} else {
alert('情報を入力してください。')
}
}
</script>
</html>練習問題
さて、問題です。
上記のプログラムには不備があります。
38行目から42行目でif文を使用していますが、まだ条件が足りません。
年齢がマイナスの値にならないように制御してみてください。
まとめ
ここまで、オブジェクトにメソッドを定義する方法とメソッドの使い方を紹介しました。
オブジェクトを自由自在に扱えるようになれば、実現できるプログラムの幅もかなり広がるので、サンプルコードなどを改造して、様々な挙動を確かめてみてください。
最後の練習問題にも是非チャレンジしてみてください！！
ここまで読んでいただき、ありがとうございます。
