【JavaScript】ホイスト（巻き上げ）を解説します

JavaScript

2026.04.20

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、15年目エンジニアです。

この記事では、 JavaScriptで特有な仕組みであるホイスト（巻き上げ）について

ホイスト（巻き上げ）とは
サンプルプログラム
解説

と、丁寧に解説していきます。

前提条件：実行環境について
ホイスト（巻き上げ）とは
ホイスト（巻き上げ）を解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
解説
まとめ：ホイスト（巻き上げ）を使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows11

ホイスト（巻き上げ）とは

ホイスト（巻き上げ）とは、変数や関数の宣言部分がスコープの先頭に移動、つまり巻き上げる仕組みのことです。
文だけでは伝わらないと思いますので、実際のプログラムで確認していきます。

ホイスト（巻き上げ）を解説するプログラムの概要

replaceメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

フォルダ構成は以下のようになっています。
Javascriptのホイスト（巻き上げ）を解説

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>ホイスト（巻き上げ）サンプルプログラム</title>
        <script src="js/sample.js"></script>
    </head>
    <body>
        <div id="hoist1"></div>
        <div id="hoist2"></div>
        <script>
            countryDisplay();
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ホイスト（巻き上げ）サンプルプログラム</title>

</head>

<body>

countryDisplay();

</script>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

function countryDisplay() {
    var hoist1 = document.getElementById('hoist1');
    hoist1.innerHTML = "変数宣言なしの表示：" + country;

	var country = "America";
	var hoist2 = document.getElementById('hoist2');
    hoist2.innerHTML = "変数宣言ありの表示：" + country;
}

function countryDisplay() {

var hoist1 = document.getElementById('hoist1');

hoist1.innerHTML = "変数宣言なしの表示：" + country;

var country = "America";

var hoist2 = document.getElementById('hoist2');

hoist2.innerHTML = "変数宣言ありの表示：" + country;

}

実行結果

作成したHTMLをブラウザで開きます。
Javascriptのホイスト（巻き上げ）を解説

こんな感じで、ホイスト（巻き上げ）は「country」を変数宣言していないにもかかわらずエラーにならず、動作することです。

次の章で解説します。

解説

Javascriptの仕様で変数がスコープの先頭で宣言されています。
先程の関数の変数宣言はホイスト（巻き上げ）されたあとだと

function countryDisplay() {
    var country;
    var hoist1 = document.getElementById('hoist1');
    hoist1.innerHTML = "変数宣言なしの表示：" + country;

	country = "America";
	var hoist2 = document.getElementById('hoist2');
    hoist2.innerHTML = "変数宣言ありの表示：" + country;
}

function countryDisplay() {

var country;

var hoist1 = document.getElementById('hoist1');

hoist1.innerHTML = "変数宣言なしの表示：" + country;

country = "America";

var hoist2 = document.getElementById('hoist2');

hoist2.innerHTML = "変数宣言ありの表示：" + country;

}

こんな感じで変数の宣言だけが先頭でされて、値の代入は元の位置のまま実行されます。
なので、変数宣言していなくても、エラーとならず「undefined」と表示されていました。

まとめ：ホイスト（巻き上げ）を使ってみよう

以上がJavaScriptのホイスト（巻き上げ）についての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ