JavaScript | 関数の基本的な定義方法と使い方

主な内容の要点

JavaScriptで関数を使うには、まず「定義」してから「呼び出す」必要があります。関数は「入力（引数）」を受け取り、「処理」を行い、「出力（戻り値）」を返す仕組みです。

関数の基本

• 定義の書き方

function 関数名(引数1, 引数2, ...) {
  // 実行したい処理
  return 戻り値; // 必要な場合だけ
}

function 関数名(引数1, 引数2, ...) {
  // 実行したい処理
  return 戻り値; // 必要な場合だけ
}

• 関数名は変数名と同じルールで付ける
• 引数はカッコ内に書く（複数ある場合はカンマで区切る）
• 処理内容は { } の中に書く
• 戻り値を返したいときは return を使う（なければ省略可）

関数の呼び出し

• 書き方：

関数名(実際の値1, 実際の値2, ...);

関数名(実際の値1, 実際の値2, ...);

• 引数を渡すと、関数内の処理にその値が使われる
• 戻り値がある場合は変数に代入できる let result = 関数名(3, 4);

サンプル

• 引数あり・戻り値なし

function dispMessage(msg) {
  console.log(msg);
}
dispMessage("Hello!");
// → Hello! と表示

function dispMessage(msg) {
  console.log(msg);
}
dispMessage("Hello!");
// → Hello! と表示

• 引数なし・戻り値なし

function dispHello() {
  console.log("Hello");
  console.log("JavaScript");
}
dispHello();
// → Hello / JavaScript と表示

function dispHello() {
  console.log("Hello");
  console.log("JavaScript");
}
dispHello();
// → Hello / JavaScript と表示

• 引数あり・戻り値あり

function dispTotal(x, y) {
  let sum = x + y;
  return sum;
}
let result = dispTotal(3, 4);
console.log(result); // → 7

function dispTotal(x, y) {
  let sum = x + y;
  return sum;
}
let result = dispTotal(3, 4);
console.log(result); // → 7

ポイント

• 関数は一度定義すれば何度でも使える
• 同じ処理を繰り返すときに便利
• コードが読みやすく整理される

関数を使うメリット

• 再利用性：同じ処理を何度も書かずに済む
• 可読性：処理を名前付きでまとめることで、コードが読みやすくなる
• 保守性：処理内容を変更する際に、関数内だけを修正すればよい

他の定義方法（紹介だけ）

• Function コンストラクタ
• 関数リテラル（無名関数を変数に代入）
• アロー関数（=> を使う簡潔な書き方）

👉 まとめると、関数は「処理をまとめて名前を付け、必要なときに呼び出せる仕組み」です。初心者はまず function キーワードを使った基本的な定義と呼び出しから練習すると理解しやすいです。

関数は、プログラムを効率的に書くための基本的な構造です。最初は難しく感じるかもしれませんが、実際に手を動かしてコードを書いてみることで、理解が深まります。