JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数を呼び出す方法とは？定義と呼び出しの基本をわかりやすく解説

JavaScriptにおける関数とは

関数（function）とは、プログラム内のどこからでも呼び出すことができる、再利用可能なコードの集まりです。同じ処理を何度も書く必要がなくなるため、コードの重複を防ぎ、プログラマーがモジュール化された読みやすいコードを書くうえで大きな助けとなります。

JavaScriptでの関数の定義方法

JavaScriptで関数を定義する最も一般的な方法は、functionキーワードを使うことです。functionキーワードの後に、一意な関数名、パラメータのリスト（空でも可）、そして波括弧 { } で囲まれたステートメントブロックを続けて記述します。

以下に基本的な例を示します。

<script>
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

この例では、「sayHello」という名前の関数を定義しています。この関数が呼び出されると、アラートダイアログに「Hello there」というメッセージが表示されます。

関数の呼び出し方

スクリプトの後半で関数を呼び出したい場合は、次のコードのように、単に関数名を記述するだけです。

サンプルコード

以下は、JavaScriptで関数を呼び出す方法を示した実行例です。

<html>
   <head>
      <script>
         function sayHello() {
         document.write("Hello there!");
         }
      </script>
   </head>

   <body>
      <p>次のボタンをクリックすると、関数が呼び出されます</p>
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>
      <p>writeメソッドの中のテキストを変えて、いろいろ試してみてください...</p>
   </body>
</html>

コードの解説

この例では、HTMLのボタン要素にonclickイベントハンドラーを設定し、ボタンがクリックされたタイミングでsayHello()関数が実行されるようにしています。ボタンをクリックすると、document.write()によって「Hello there!」というテキストが画面に出力されます。

補足：スクリプト内から直接呼び出す方法

イベントハンドラー経由だけでなく、スクリプト内で関数名と丸括弧を記述することで、任意の場所から直接関数を呼び出すこともできます。

sayHello();

このように関数を部品として使い回すことで、コードの保守性と再利用性が大きく向上します。

  1. JavaScriptのコールバック関数とは？基本の仕組みと実装例をわかりやすく解説

    JavaScriptでは、関数もオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡すことが可能です。このように渡された関数は、受け取った側の関数の中で呼び出すことができ、これをコールバック関数（callback function）と呼びます。 コールバックは、非同期処理やイベントハンドリングなど、現代のJavaScript開発において欠かせない重要な概念です。ここでは、基本的なコールバックの仕組みをサンプルコードとともに解説します。 コールバック関数のサンプルコード 以下は、2つの数値を加算し、その結果をコールバック関数で処理するシンプルな例です。 <!DOCTYPE

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ