YMLib - HTML - コールバック関数

コールバック関数

2026/01/20

コールバック関数を使ってみます。

◆環境

OS	Windows 11 Home 25H2
Browser	Google Chrome 143.0.7499.193

index.htmlではscriptタグでmain.jsを指定します。

index.html

1:
2:
3:
4:
5:
6:
7:
8:
9:

<!doctype html>
<head>
<meta charset="utf-8">
<title>コールバック関数</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>

main.jsではコールバック関数を定義して使ってみます。

main.js

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

function fnCallBack(cb) {
    let number = prompt('Please input number');
    const result = cb(number);
    console.log(result);
}

function fn(n) {
  return n * 2;
}

fnCallBack(fn);

index.htmlを右クリックしOpen with Live Serverをクリックします。

入力するようポップアップ表示されたので3と入力しOKをクリックします。。

F12でdeveloper toolsを開くと6と表示されました。期待通りに動いているようです。

相変わらずfavicon.icoでエラーが出ています。

調べたところ、空ファイルでもよいからfavicon.icoというファイルがあればよいようなので同じディレクトリにfavicon.icoファイルを作ります。

エラーがなくなりました！

期待通りに動作しました。

関連項目