JavaScript 関数：定義、呼び出し、値の返却

はじめに

JavaScript において、関数は基本的な構成要素の一つです。関数は、一度記述すれば何度でも実行できる、再利用可能なコードブロックです。関数を使用することで、コードの整理、可読性の向上、および繰り返しを避けることができます。

この実験 (Lab) では、JavaScript で関数を作成し使用する基本的な方法を学びます。2 つの数値を加算する簡単な関数を作成し、その定義方法、データの渡し方、結果の取得方法、そしてその結果の表示方法を学びます。

このステップでは、最初の関数を定義します。関数は function キーワードに続けて、名前、一対の丸括弧 ()、そして波括弧 {} で囲まれたコードブロック（関数本体）を使用して定義されます。

まず、WebIDE の左側にあるファイルエクスプローラーで script.js ファイルを見つけて開きます。すべての JavaScript コードはこのファイルに記述します。

次に、addNumbers という名前の関数を定義するために、以下のコードを script.js に追加します。

function addNumbers() {
  // Code will go here
}

このコードは空の関数を作成します。まだ何も実行しませんが、有効な関数定義です。addNumbers という名前は、後でこの関数を参照するために使用します。

このステップでは、関数にパラメータを追加します。パラメータは、関数が呼び出されたときに受け取るデータのためのプレースホルダーのようなものです。関数定義内の丸括弧 () の中に、カンマで区切って定義します。

addNumbers 関数を、加算したい 2 つの数値を受け取るように変更しましょう。これらのパラメータを num1 と num2 と名付けます。

script.js ファイルを以下のコードで更新してください。

function addNumbers(num1, num2) {
  // Code will go here
}

これで、addNumbers 関数は 2 つの値を受け取るように設定されました。関数内では、num1 と num2 を、関数に渡された値を保持する変数として使用できます。

このステップでは、関数に処理を実行させ、結果を返すようにします。return ステートメントは、関数が出力すべき値を指定するために使用されます。JavaScript が return ステートメントに到達すると、関数の実行は停止し、指定された値が関数が呼び出された場所に返されます。

関数のロジックを追加して、2 つのパラメータを合計し、その結果を返すようにしましょう。

script.js ファイルを更新してください。関数の波括弧の中に return ステートメントを追加します。

function addNumbers(num1, num2) {
  return num1 + num2;
}

これで、addNumbers 関数が実行されると、num1 と num2 の合計が計算され、その値が返されるようになります。

このステップでは、関数を実行するために呼び出します。関数を定義しただけでは実行されません。関数を実行して結果を得るには、それを「呼び出す」または「実行する」必要があります。関数を呼び出す際には、定義したパラメータに対して、引数と呼ばれる実際の値を渡します。

関数によって返された値は、後で使用するために変数に格納することができます。

script.js ファイルの関数定義の下に、以下の行を追加して、引数 5 と 10 で addNumbers 関数を呼び出してください。

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

このコードでは、addNumbers(5, 10) が関数を呼び出しています。値 5 が num1 パラメータに渡され、値 10 が num2 パラメータに渡されます。関数は 15 を返し、その値が sum 変数に格納されます。

この最終ステップでは、関数呼び出しの結果を表示します。Web 開発で変数の値やコードの出力を確認する一般的な方法は、console.log() を使用することです。この関数は、メッセージをウェブブラウザの開発者コンソールに出力します。

script.js ファイルの末尾に、sum 変数の値をログ出力するために以下の行を追加してください。

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

出力を見るには：

コンソールに数値 15 が表示されるはずです。これは、addNumbers 関数によって返された結果です。

この実験を完了された皆さん、おめでとうございます！JavaScript の関数に関する基本的な概念を学びました。

以下のことを成功させました：

関数は、クリーンで効率的、再利用可能な JavaScript コードを書くための中心的な要素です。これらの概念を練習し続けることで、より慣れ親しむことができるでしょう。