JavaScript関数入門

はじめに

JavaScript初心者にとって、関数基礎は最初に学ぶべき重要な概念です。関数はコードを整理し、再利用しやすくするための基本単位です。この記事では、functionキーワードから引数、戻り値、return文、関数呼び出し、パラメータの扱い方までを丁寧に解説します。さらに、関数を使った再利用とコード共有のテクニックも紹介します。

関数の定義

JavaScriptで関数を定義する基本的な構文は次のようになります。

function greet() {
  console.log('Hello, world!');
}

上記の例では、greetという名前の関数を定義しています。関数名の後に丸括弧を付け、波括弧で囲まれたブロック内に実行したい処理を書きます。関数は一度定義すれば、何度でも呼び出すことができます。

引数と戻り値

関数に値を渡すために引数を使います。引数は関数のパラメータとして宣言され、呼び出し時に実際の値（引数）を渡します。

function add(a, b) {
  return a + b;
}

ここではaとbがパラメータです。return文を使うことで、関数の実行結果を呼び出し元に返すことができます。戻り値がない場合は、returnを省略しても構いませんが、明示的にreturnを使うとコードの意図がはっきりします。

関数呼び出しとパラメータ

関数を呼び出すには、関数名の後に丸括弧を付け、必要に応じて引数を渡します。

const result = add(5, 3);
console.log(result); // 8

上記の例では、add関数を呼び出し、5と3を引数として渡しています。戻り値はresultに代入され、console.logで表示されます。関数呼び出しは、プログラムの流れを制御する重要な操作です。

再利用とコード共有

関数を使う最大のメリットは、コードの再利用性が高まることです。同じ処理を複数箇所で書く代わりに、関数にまとめておけば、必要なときに呼び出すだけで済みます。さらに、関数をモジュール化して別ファイルに分けることで、複数のプロジェクトでコードを共有できます。

例えば、次のように外部ファイルに関数を定義し、importで読み込むことができます。

// utils.js
export function multiply(x, y) {
  return x * y;
}

// main.js
import { multiply } from './utils.js';
console.log(multiply(4, 7)); // 28

このように、関数をモジュール化しておくと、チーム開発や大規模プロジェクトでもコードの管理が容易になります。JavaScript初心者は、まずは関数基礎をしっかり身につけ、次第にモジュール化や再利用のテクニックへと進んでいくと良いでしょう。

なんでも技術ブログ

このブログを検索