JavaScript 関数の呼び出し

Volardev 編集部 April 17, 2026

1. 関数の呼び出し (Calling a Function)

JavaScript の関数は、呼び出された（Called） 時に初めて実行されます。
関数を呼び出すには、関数名に続けて かっこ（parentheses） を付け、名前() のように記述します。

1.1 関数のインボケーション (Function Invocation)

関数内のコードは、関数が 定義（Defined） された時点では 実行されません。
関数内のコードは、何かがその関数を インボーク（Invokes / 呼び出し） した時に実行されます。

JavaScript コードから直接呼び出された時
イベントが発生した時（ユーザーがボタンをクリックした時など）
自動的に実行された時（自己呼び出し関数など）

エンジニアの間では「呼び出す（Call）」だけでなく「インボーク（Invoke）」という言葉がよく使われます。これは、明示的にコードから呼ばなくても、関数が特定のタイミングで起動することがあるためです。

現場では以下のような表現も一般的です：

関数をコールする
関数を呼び出す
関数を起動（スタート）させる
関数を実行（Execute）する

1.2 呼び出しの例

以下の関数はテキスト "Hello World" を返しますが、呼び出すまでは何もしません。

function 挨拶する() {
  return "こんにちは世界";
}

以下のコードは関数を呼び出していますが、その実行結果（戻り値）をどこにも利用していません。

function 挨拶する() {
  return "こんにちは世界";
}

// 関数を呼び出す（実行されるが、結果は表示されない）
挨拶する();

実行結果を利用するには、変数に保存するか、ブラウザの画面やコンソールに表示させる必要があります。

2. 戻り値の利用

関数が値を返す場合、その値を変数に代入して後で使うことができます。

function 挨拶する() {
  return "こんにちは世界";
}

// 戻り値を変数に保存
let 挨拶メッセージ = 挨拶する();

2.1 結果の表示

戻り値を表示する方法はたくさんあります。例えば、console.log() を使ってデバッグしたり、HTML 要素に直接出力したりします。

function 挨拶する() {
  return "こんにちは世界";
}

// コンソールに表示
console.log(挨拶する());

<p id="demo"></p>

<script>
function 挨拶する() {
  return "こんにちは世界";
}

// HTML要素の内容を関数の結果で書き換える
document.getElementById("demo").innerHTML = 挨拶する();
</script>

3. 関数を何度も呼び出す

関数の最大のメリットは再利用性です。同じ関数を、必要な時に何度でも呼び出すことができます。

function 挨拶する() {
  return "こんにちは世界";
}

let a = 挨拶する();
let b = 挨拶する();
let c = 挨拶する();

4. `()` 演算子による実行

() 演算子は、関数を「インボーク（実行）」するためのスイッチのようなものです。

// 華氏（Fahrenheit）を摂氏（Celsius）に変換する関数
function 摂氏に変換(華氏) {
  return (5/9) * (華氏 - 32);
}

// 摂氏に変換関数を呼び出す
let 結果 = 摂氏に変換(77);

かっこ () を付けずに関数名だけにアクセスすると、その計算結果ではなく 関数そのものの定義 が返されます。

function 摂氏に変換(華氏) {
  return (5/9) * (華氏 - 32);
}

// かっこを付けない場合
let 値 = 摂氏に変換;

上記の例では、以下の違いが生じます：

摂氏に変換 は、関数オブジェクト自体を参照します。
摂氏に変換(77) は、その関数を実行した結果（戻り値）を参照します。

4.1 呼び出し vs 参照

ここは初心者がよく混乱する、非常に重要なポイントです。

挨拶する：関数そのものを参照します。実行はされません。
挨拶する()：関数の結果を参照します。中身のコードが実行されます。

function 挨拶する() {
  return "こんにちは世界";
}

let テキスト = 挨拶する; // 関数定義そのものが代入される

この場合、変数 テキスト の中身を確認すると、以下のような関数定義の文字列がそのまま返ってきます：
function 挨拶する() { return "こんにちは世界"; }

5. 関数はどこからでも呼び出せる

関数は、他の関数の中から呼び出したり、イベント（クリックなど）から呼び出したり、あらゆるコードブロック内で利用可能です。

function 挨拶する() {
  return "こんにちは世界";
}

function 挨拶を表示() {
  // 別の関数を呼び出し、その結果をHTMLにセットする
  document.getElementById("demo").innerHTML = 挨拶する();
}

HTML のボタンと組み合わせる例：

<p id="demo"></p>
<button onclick="挨拶を表示()">クリックして挨拶を表示</button>

<script>
function 挨拶する() {
  return "こんにちは世界";
}

function 挨拶を表示() {
  document.getElementById("demo").innerHTML = 挨拶する();
}
</script>