🟡
【Javascript】基礎編：オブジェクト/メソッド/イベント/パラメータ/引数/イベントハンドラーとは
Javascript
【javascript】とは
動的なWebページを作成する事のできるプログラミング言語
javascriptの基本構文
オブジェクト
オブジェクトの種類
主に以下4つのオブジェクトに対して、指示を出すことで動的なページを作成できる。
| 項目 | 内容 | 例 |
|---|---|---|
| ブラウザオブジェクト | ブラウザ環境に特有のオブジェクトで、ウェブページやブラウザそのものを操作するためのもの | window/Navigatorなど |
| 言語定義オブジェクト | javascriptで定義した関数、変数、定数など | Function/let/constなど |
| 標準定義オブジェクト | JavaScriptの標準ライブラリとして提供されるオブジェクト | JSON/Promise/Errorなど |
| カスタムオブジェクト | 開発者が独自に定義するオブジェクト | class ~など |
【オブジェクト】についての参考資料
参考
プロパティ
メソッドとイベント
メソッドの種類
thisキーワード
メソッド内でthisを使用すると、そのメソッドが所属するオブジェクト(例ではperson)
を参照できるようになる。
thisキーワードなし
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // John Doe
thisキーワードあり（ES6の省略記法）
const person = {
firstName: "John",
lastName: "Doe",
fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.fullName()); // John Doe
イベントの種類
パラメータ・引数
実践
index.htmlファイルまたはRailsではindex.html.erbファイル内にコピペすると以下の画面が出現する。
app/views/javascript/show.html.erb
<h1>Java script学習</h1>
<script>
window.alert('Hello World');
</script>
イベントリスナー・イベントリスナー関数・イベントオブジェクト
イベントリスナー関数の () と (event) の違い
() → 単になにかを実行したい場合
button.addEventListener("click", function() {
console.log("ボタンが押された！");
});
(event) → イベントオブジェクトを用いたい場合
button.addEventListener("click", function(event) {
console.log(event.target);
});
代表的な イベントオブジェクトのプロパティ一覧
プロパティ名 説明
type 発生したイベントの種類（例: "click", "keydown"）
target イベントが発生した要素（DOM要素）
currentTarget イベントリスナーが登録された要素
bubbles イベントがバブリングするかどうか（true/false）
timeStamp イベントが発生した時間（ミリ秒）
isTrusted ユーザー操作によって発生したイベントか、JSで発火されたか（true/false）
イベントオブジェクトのプロパティは自分で定義できる！？
方法 内容 備考
event.xxx = value 一応追加できるが非推奨 バグや混乱の元になることがある
CustomEvent + detail 推奨されるやり方 任意のプロパティを安全に渡せる
イベントオブジェクトのメソッド一覧
preventDefault(): イベントのデフォルトの動作をキャンセル。
stopPropagation(): イベントが伝播するのを防ぐ（バブリングを停止）。
stopImmediatePropagation(): イベントの伝播を停止し、他のリスナーも実行しないようにする。
initEvent(): イベントを初期化する（現代ではあまり使用されない）。
composedPath(): イベントの伝播経路を取得する。
isDefaultPrevented(): preventDefault() が呼び出されたかどうかを確認する。
isTrusted: イベントがユーザー操作で発生したか、スクリプトで発生したかを確認する。
！！ ここまでのまとめ
クラス
？？ クラスの定義の仕方には他にもある！？
・現在は①の記述が主だが、クラスの定義の仕方には複数存在する。
基本構文（②コンストラクタ関数(クラスがなかった時代の記述方法））
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`こんにちは、私は${this.name}です。`);
};
const user2 = new Person("次郎", 25);
基本構文（②オブジェクトリテラル（1回だけ使う用）※厳密にはクラスではない）
const user3 = {
name: "三郎",
age: 20,
greet: function() {
console.log(`こんにちは、私は${this.name}です。`);
}
};
！！ クラスを定義してみよう
Personクラスを定義して、そこにname（名前）,age（年齢）の2つのプロパティを持たせ、コンソールにその結果を出力している
// Person クラスを作成
class Person {
// コンストラクタの記述（詳細は後述）
constructor(name, age) {
this.name = name;
↑ インスタンス変数（プロパティ）
this.age = age;
↑ インスタンス変数（プロパティ）
}
greet() {
console.log(`こんにちは、私は${this.name}、${this.age}歳です。`);
}
}
const user1 = new Person("太郎", 50);
user1.greet(); // こんにちは、私は太郎、50歳です。
？？ クラス変数とインスタンス変数の違いは！？
クラス内でグローバルなのかローカルかの違い！
class Person {
static species = "人間"; // クラス変数（全インスタンスで共通）
constructor(name, age) {
this.name = name; // インスタンス変数（個別に持つ）
this.age = age;
}
}
:::
Discussion