【JavaScript入門】関数とは

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

関数とは

　関数とは、ある処理をひとまとまりにまとめておき、好きなときに呼び出せるようにしたものです。入力（引数）を受け取り、内部で処理を行って、最終的な結果（戻り値）を返す仕組みを備えています。関数そのものはオブジェクトの一種であり、JavaScript では「関数オブジェクト」と呼ばれます。そのため、他のオブジェクト同様に変数へ代入したり、引数として渡したり、配列に格納したりできます。ここでは、関数の役割や形態などを簡単に紹介します。

１．関数の基本的なイメージ

入力（引数）
   ↓
［関数］---〔処理〕---> 出力（戻り値）

引数：関数に渡す入力データ
戻り値：関数が処理を終えた後に返す結果

２．関数の呼び出し

　多くの場合、関数を呼び出すときは「関数名(引数)」という形をとり、引数がない場合は丸括弧に何も書きません。引数が複数ある場合はカンマ区切りで並べます。式の中に関数を書くと、その部分は戻り値に置き換わります。

構文

関数名(引数1, 引数2, ...)

例：

console.log(3 + parseInt("5")); 
// parseInt("5") が 5 になり、結果は 8

３．関数はオブジェクト

　JavaScript では、typeof 演算子で関数を調べると "function" が返ってきます。関数は以下のような形で定義・利用されます。

グローバル関数： JavaScript 言語仕様として用意されている関数（例： parseInt() など）
組み込みオブジェクトのメソッド：標準ビルトインオブジェクト（Array, String など）が持つメソッド
ユーザー定義関数：開発者が独自に定義する関数
・名前をつけない無名関数（匿名関数）として書く場合もあり、引数に渡すときは「コールバック関数」と呼ぶ。
・オブジェクトのプロパティに関数を割り当てると、それは「メソッド」と呼ばれる。

４．グローバル関数の例： `parseInt()`

　parseInt は、文字列を整数として解釈し、その結果を返すグローバル関数です。第2引数を指定することで、何進数で解釈するかを指定できます。省略した場合は10進数と解釈されやすいですが、一部の値で予期しない結果を防ぐため、進数を明示するのがおすすめです。

parseInt("45", 10);  // => 45 (10進数)
parseInt("1010", 2); // => 10 (2進数として解釈)

　文字列の先頭に空白や改行があっても無視されますが、整数として解釈できない部分に到達すると計算をやめ、結果を返します。全く解釈ができない場合は NaN となります。

５．サンプルHTMLコード

　次の例を「myFunctionIntro.html」というファイル名で保存し、ブラウザで開いて開発者ツール（コンソール）を確認してください。

ファイル名： myFunctionIntro.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myFunctionIntro.html</title>
</head>
<body>
  <h1>関数とは（概要サンプル）</h1>
  <p>ブラウザの開発者ツールを開き、コンソール出力をチェックしてください。</p>

  <script>
    // 1. グローバル関数 parseInt の利用例
    console.log('parseInt("123"):', parseInt("123"));          // => 123
    console.log('parseInt("1a"):', parseInt("1a"));            // => 1 (文字'a'の前まで数値として解釈)
    console.log('parseInt("zzz", 36):', parseInt("zzz", 36));  // => 46655 (36進数解釈)
    console.log('parseInt("hello"):', parseInt("hello"));      // => NaN

    // 2. ユーザー定義関数の簡単な例
    function greet(name) {
      return name + "さん、ようこそ！";
    }
    console.log('greet("太田"):', greet("太田"));

    // 3. 関数はオブジェクト（typeof で判定すると "function"）
    console.log('typeof greet:', typeof greet);

    // 4. 無名関数を変数に入れる
    const getDouble = function(x) {
      return x * 2;
    };
    console.log('getDouble(6):', getDouble(6));

    // 5. オブジェクトのメソッドとして関数を定義
    const myObject = {
      food: "パスタ",
      showFood: function() {
        return "今日のご飯は " + this.food;
      }
    };
    console.log('myObject.showFood():', myObject.showFood());
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

parseInt("123"): 123
parseInt("1a"): 1
parseInt("zzz", 36): 46655
parseInt("hello"): NaN
greet("太田"): 太田さん、ようこそ！
typeof greet: function
getDouble(6): 12
myObject.showFood(): 今日のご飯は パスタ

まとめ

関数は複数の処理をまとめて、任意の引数を受け取り、実行後に戻り値を返す仕組み。
JavaScript では、関数は関数オブジェクト（特別なオブジェクト）として扱われ、さまざまな形で利用できる。
グローバル関数（例： parseInt）、標準ビルトインオブジェクトのメソッド、ユーザーが独自に定義する関数など、用途に応じて使われる関数は多岐にわたる。
名前をつけずに定義する無名関数や、オブジェクトに属するメソッド、関数をコールバックとして他の関数に渡す方法など、JavaScript 独自の多彩な形態がある。

　こうした柔軟性が、JavaScript における関数の大きな特徴です。次に関数の定義や使い方の詳細を学べば、より効率的なコードを書くための第一歩となるでしょう。

【JavaScript入門】関数とは