TIL2025-02-15-プログラミング基礎

Java の super(); 自動呼び出しが特殊なのかも

class Parent {
    Parent() {
        System.out.println("Parent のコンストラクタが実行されました");
    }
}

class Child extends Parent {
    Child() {
        /​/ 実際には super(); が自動的に呼ばれる
        System.out.println("Child のコンストラクタが実行されました");
    }
}

public class Main {
    public static void main(String[] args) {
        Child child = new Child();
    }
}

• これが普通だと思っていたけど、PHP, Ruby では違うっぽい

具体的に this はどこで決まる？

const obj = {
    name: "Alice",
    showThis: function() {
        console.log(this.name);
    }
};

obj.showThis(); /​/ "Alice"

• 関数を変数に渡す（this が変わる！）

const obj = {
    name: "Alice",
    showThis: function() {
        console.log(this.name);
    }
};

const fn = obj.showThis; 
fn(); /​/ ❌ `undefined` またはエラー（strict mode）

class MyClass {
    constructor() {
        this.name = "MyClassInstance";
    }

    handleClick() {
        console.log(this.name);
    }
}

const obj = new MyClass();
obj.handleClick(); /​/ ✅ this は obj

• 関数の実行時に決まる

アロー関数のthisは？

document.getElementById("btn").addEventListener("click", () => obj.handleClick());

どう動作するか？

クリックされたとき

• () => obj.handleClick() の アロー関数が実行される。
• その中で obj.handleClick() が その時点の obj の handleClick を呼び出す。
• this は obj のまま維持される（アロー関数の this は定義時の this を保持するため）。

バンドルツールとは？

バンドルツールは、JS/CSS などを 1 つにまとめて最適化するツール

代表的なバンドルツール

scroll イベントで要素の表示を検知する実装

document.addEventListener("scroll", () => {
  const target = document.getElementById("triggerElement");
  const rect = target.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  if (rect.top < windowHeight && rect.bottom > 0) {
    console.log("要素が表示領域に入った！");
  }
});

• getBoundingClientRect() で 要素の座標を取得
  • .top → 要素の上端の Y 座標（ビューポートの上からの距離）
  • .bottom → 要素の下端の Y 座標（ビューポートの上からの距離）
• window.innerHeight は ビューポートの高さ
• rect.top < windowHeight で 要素の上端が画面内に入ったら発火
• rect.bottom > 0 で 要素の下端が画面内にあるか確認（完全に消えてないか）

Enum と Struct

まぁ覚えるの大変です。エンジニア 1 年生って困難です。