JavaScript復習の疑問解決チャンネル（自己用）

前回同様雑な疑問点を解決していこうのコーナー

もう一回、関数って！？

function add(a, b) {
  return a + b;
}

console.log(add(3, 5)); // 8

• function …「関数を作るよ」という合図
• add …その関数の名前（呼び出すときに使う）
• (a, b) …この関数が受け取る材料（入力）
• { return a + b; } …この関数の中身

• a + b を計算して
• return で呼び出し元に結果を返す

アロー関数って？使うんか？

上の関数をアロー関数にすると

const add = (a, b) => {
  return a + b;
};

console.log(add(3, 5)); // 8

メリット

• 短く掛ける
• 普通のfunctionのように使える

thisの扱い方が違う

thisとは

• 誰がこのコードを動かしているかによって違う=今誰が喋っているのか

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice"));

• 引数として外からnameが与えられた

const user = {
  name: "太郎",
  sayHello: function() {
    console.log("こんにちは、" + this.name); 
  }
};

user.sayHello();

• オブジェクトの中に保存されているnameを呼び出したい

function introduce() {
  console.log("私は " + this.name + " です");
}

const user1 = { name: "太郎", intro: introduce };
const user2 = { name: "花子", intro: introduce };

user1.intro(); 
user2.intro(); 

• こういう1つの関数で呼び出すオブジェクトが変わるとthisを使わないと訳わかんなくなる
• thisを書くことでコードの中まで見に行ってくれると解釈
• thisでは引数で入れられた関数の中だけで使える変数＝今作ってる人
• this.nameは関数を持っているオブジェクトの中にあるものを呼び出す＝この人の名前

またまた分からん constructorとは？

• オブジェクト指向（「モノ」に注目した考え方）なプログラミング言語で出てくる用語のひとつでありインスタンス（オブジェクト指向の話で出てくる概念のひとつでクラスを具現化した実体）を作ったタイミングで実行されるメソッド（「オブジェクトの操作を定義したもの」だけど、動きとしては関数と同じ）のこと。
• もう少し身も蓋もない言い方をするとクラス（オブジェクト指向の話で出てくる概念のひとつで「設計図」っぽいやつ）をnew（インスタンスを作る行為）した瞬間に実行される関数（処理のまとまり）のこと
  わかりやすいね！

DOM編

DOM要素、はっきり言って書きにくいし覚えにくい

• getElementById：IDを指定して要素を取得

let header = document.getElementById('header');
console.log(header); // <h1 id="header">Hello, World!</h1>

• getElementsByClassName：クラス名を指定して要素を取得

let paragraphs = document.getElementsByClassName('myClass');
console.log(paragraphs); // 'myClass'のクラスを持つ全ての要素

- getElementsByTagName：タグ名を指定して要素を取得
- ```js
let links = document.getElementsByTagName('a');
console.log(links); // aタグの全ての要素

• querySelector：CSSセレクタを使って要素を取得

let header = document.querySelector('#header');
console.log(header); //

Hello, World!

後で見るリスト
https://wa3.i-3-i.info/word13646.html