メソッドとプロパティの違い
- メソッド：「メソッド」は、何か“動き”をしてくれる関数のようなものです。「動くボタン」のようなもので、おもにデータを出力したり変換したりするための機能です。使うときは
()（かっこ）をつけます。 - プロパティ：「プロパティ」は、そのものが持っている“情報”です。「情報」や「値」を表しているものになります。()をつけずに使います。
よく使うメソッド一覧
使える型は、Array は配列型、Stringは文字列型、Numberは数値型 を指しています。
| メソッド名 | したいこと | 使い方 | 使える型 |
|---|---|---|---|
| join() | 配列を文字列にする | [‘A’,’B’].join(‘-‘) | Array |
| push() | 配列に追加 | [1,2].push(3) | Array |
| slice() | 部分を切り取る | ‘Hello’.slice(1,3) | String, Array |
| substr() | 部分を抽出 | ‘Hello’.substr(1,3) | String |
| toUpperCase() | 大文字に変換 | ‘abc’.toUpperCase() | String |
| replace() | 一部を置換 | ‘apple’.replace(‘a’, ‘A’) | String |
| replaceAll() | 全て置換 | ‘aabb’.replaceAll(‘a’, ‘A’) | String |
| split() | 文字列を分割 | ‘a,b,c’.split(‘,’) | String |
| toFixed() | 小数点以下を指定 | 3.1415.toFixed(2) | Number |
| toLocaleString() | 地域別表示に変換 | 1234567.89.toLocaleString() | Number |
| addEventListener() | イベントを追加 | btn.addEventListener(‘click’, fn) | HTMLElement |
| querySelector() | 要素を検索 | document.querySelector(‘p’) | Document |
よく使うプロパティ一覧
| プロパティ名 | したいこと | 使い方 |
|---|---|---|
| length | 数を知りたい | ‘abc’.length |
| value | 入力値を取得 | input.value |
| checked | チェック状態 | checkbox.checked |
| textContent | 文字だけを取得 | p.textContent = ‘Hi’ |
| innerHTML | HTMLを取得 | div.innerHTML = ‘Hi‘ |
| className | クラス名 | el.className = ‘active’ |
| style | CSSの操作 | el.style.color = ‘red’ |
| id | ID値を設定 | el.id = ‘main’ |
| type | 入力種類 | input.type = ‘password’ |
| src | 画像ソース | img.src = ‘pic.jpg’ |
型を間違った時は？
メソッドもプロパティも型を間違えるとエラーになります。JavaScriptは型の正しい使い方を覚えておきましょう。
'hello'.push('!'); // エラー: push は文字列に使えない
123.toUpperCase(); // エラー: 数値には使えない
'abc'.length; // OK
[1,2,3].length; // OK
ポイント: 存在しないメソッドを使うと「TypeError」、プロパティは undefined になります
型を調べる方法
変数や値が「どんな型か」を調べたいときは、typeof を使います。
let num = 123.5; console.log(typeof num); // → 'number' let str = 'Hello'; console.log(str); // String //配列のときは注意！ let data = [1, 2, 3]; console.log(typeof data); // 'object'（←配列でもobjectと出る） console.log(Array.isArray(data)); // true（←配列かどうかを確かめる正しい方法）