「フック（hook）」と「API」

「フック（hook）」と「API」はプログラミングでよく出てくる用語ですが、
似ているようで役割や使われ方に違いがあります。

フックは、処理の途中に外部のコードを差し込める
“仕組み”です。
たとえばあるアプリやライブラリが、
特定のイベント（例：保存前、ログイン後など）のときに
カスタムコードを実行できる場所（フックポイント）を提供する場合、
それが「フック」です。

🧠 例:

js

// ReactのuseEffect（副作用のフック）
useEffect(() => {
  console.log('コンポーネントがマウントされた');
}, []);

APIは、あるソフトウェアやサービスが他のコードとやり取りするための
“インターフェース”です。
関数、メソッド、エンドポイントなどを通じて、特定の機能やデータにアクセスできます。

🧠 例:

js

// JavaScriptのfetch API
fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data));

項目	フック（仕組み）	API（インターフェース）
主体	呼び出される（受動的）	呼び出す（能動的）
目的	処理の一部を差し替え・拡張する	機能を提供する
使用タイミング	特定のイベントやタイミングで自動実行	任意のタイミングで開発者が実行する
例	ReactのuseEffect、WordPressのadd_action	fetch API、Google Maps APIなど

たとえば、あるAPIが用意されていて、それに対して拡張用のフックが提供されている、
というケースもあります（例：WordPressやNode.jsのExpressミドルウェアなど）。

フックは、一連のプログラムの流れで、フックポイントが提供され、そこまでの処理結果
を変更したり、追加の処理を記述できる事を可能とする

”仕組み”

ではReactのフックは？

Reactコンポーネントのライフサイクルや状態管理を扱うための”仕組み”です。

Reactのフックは、
関数コンポーネントの中で状態やライフサイクルの処理を使えるようにする関数
たちです。

つまり関数です。
自分で作る事も可能だし、用意されているものもあります。
記述を呼び出す場所がフックポイントになります。

昔のReactでは、クラスコンポーネントを使わないとstateやcomponentDidMountみたいな
ライフサイクルの操作ができなかったんですよ。
でも、フックを導入したことで
関数コンポーネントでも強力な機能が使えるようになったんです。

ブラウザのイベントと関連して使う事が多いけれど、それだけではない。

例えば：

これは「コンポーネントのマウント（表示）・更新・アンマウント（削除）」に対して
処理を差し込めるフックです。
これは裏ではブラウザのDOM描画と関係しますが、
直接ブラウザのAPIにフックしてるわけじゃないです。

js

useEffect(() => {
  console.log("マウントされたよ");
  return () => {
    console.log("アンマウントされるよ");
  };
}, []);

Reactが内部的に管理してる状態管理の仕組みです。
これは全くブラウザの機能とは関係なく、
Reactが状態を記憶・更新するためのものです。

js

const [count, setCount] = useState(0);

たとえばuseEffectの中でwindow.addEventListenerやfetchなど、
ブラウザの機能（DOM APIやWeb API）を使うケースはよくあります。
でも、それはあくまで「フックの中で開発者が使ってる」だけです。

つまり：

Reactのフックは「ブラウザの機能をフックするための仕組み」ではなく、
Reactのライフサイクルや状態に“フックするための仕組み”です。

ブラウザのイベントに関連付けて、Reactのコードでフックを使う事が多いけれど、
フックはあくまでもReactのイベントに関連付ける”仕組み”となります。