JavaScriptの関数とは？基本構文と仕組みを初心者向けに解説

1. JavaScriptの関数とは？

1. JavaScriptの関数とは？

関数とは、プログラムの中で繰り返し使いたい処理をまとめたものです。関数を作っておくと、その名前を呼ぶだけでまとめた処理を実行できます。たとえば、料理のレシピのように、一連の作業手順を名前で呼び出すイメージです。

2. 関数の基本的な作り方（関数宣言）

2. 関数の基本的な作り方（関数宣言）

JavaScriptで関数を作る一番基本的な方法は「関数宣言」と呼ばれる書き方です。次のように書きます。

function greet() {
  console.log("こんにちは！");
}

このコードでは、greetという名前の関数を作りました。中の console.log は画面に文字を表示する命令です。

この関数を使いたいときは、下のように「呼び出す（実行する）」ことで中の処理が動きます。

greet();  // 「こんにちは！」と表示される

3. 引数（ひきすう）とは？関数に渡すデータ

3. 引数（ひきすう）とは？関数に渡すデータ

関数は必要に応じて、外からデータを受け取ることができます。この受け取る値のことを「引数（ひきすう）」と言います。たとえば名前を受け取って挨拶する関数を作ってみましょう。

function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

greet("太郎");  // こんにちは、太郎さん！
greet("花子");  // こんにちは、花子さん！

このように関数に名前を渡すと、その名前を使って挨拶してくれます。

4. 戻り値（もどりち）とは？関数の結果を受け取る

4. 戻り値（もどりち）とは？関数の結果を受け取る

関数は計算などをして結果を返すこともできます。返された結果のことを「戻り値（もどりち）」と呼びます。戻り値を受け取るには return を使います。

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

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

この関数は2つの数字を受け取って足し算をし、計算結果を返します。返された値は変数に保存できます。

5. 関数の呼び出し（実行）方法

5. 関数の呼び出し（実行）方法

関数を呼び出すには、関数名のあとに丸括弧 () をつけます。必要な引数があれば、丸括弧の中に渡します。

greet("太郎");  // 引数を渡して関数を実行
let sum = add(10, 20);
console.log(sum);

丸括弧を忘れると関数は実行されないので注意しましょう。

6. 関数式とアロー関数の紹介

6. 関数式とアロー関数の紹介

JavaScriptには他にも関数を作る方法があります。ここでは簡単に2つだけ紹介します。

まずは「関数式」と呼ばれる書き方です。関数を変数に代入します。

const greet = function(name) {
  console.log("こんにちは、" + name + "さん！");
};

greet("太郎");

もう一つは「アロー関数」と呼ばれ、より短く書けます。

const greet = (name) => {
  console.log("こんにちは、" + name + "さん！");
};

greet("花子");

どちらも関数を作る方法ですが、初めは「関数宣言」で十分理解できます。

7. まとめて覚えたい関数のポイント

7. まとめて覚えたい関数のポイント

• 関数は処理をまとめて名前をつけたもの。
• 引数は関数に渡すデータ。
• 戻り値は関数から返される結果。
• 関数は名前＋丸括弧で呼び出す。
• 基本の関数宣言は function 関数名() { } の形。

まとめ

まとめ

ここまでJavaScriptの関数の基本について詳しく解説してきましたが、いかがでしたでしょうか。プログラミングを学び始めたばかりの頃は、「なぜわざわざ処理を関数にまとめる必要があるのか」と疑問に思うこともあるかもしれません。しかし、開発が進んでコードの量が増えてくると、関数のありがたみが身に染みてわかるようになります。

関数の再利用性と保守性の向上

関数の最大のメリットは、一度定義してしまえば、どこからでも何度でも呼び出せるという点にあります。例えば、消費税の計算を行う処理をプログラムのあちこちに書いていると、税率が変わったときに全ての箇所を修正しなければなりません。しかし、計算処理を一つの関数にまとめておけば、その関数の中身を一行修正するだけで、システム全体の計算ロジックを一気に更新できるのです。これが「保守性が高い」という状態です。

実践的な関数の活用例

実際の開発現場では、引数や戻り値を巧みに組み合わせて複雑なロジックを組み立てていきます。ここでは、学んだ「関数宣言」「引数」「戻り値」をフル活用した少し実用的なサンプルを見てみましょう。

// 商品の合計金額を計算し、書式を整えて返す関数
function formatPrice(price, taxRate) {
  const tax = 1.1; // 消費税10%
  const total = Math.floor(price * tax); // 小数点以下切り捨て
  return "税込価格は " + total + " 円です。";
}

// 関数の実行と結果の表示
const message = formatPrice(1200);
console.log(message);

上記のコードでは、数値を受け取って計算を行い、文字列として結果を返しています。このように、数値だけでなく、加工した文字列を戻り値にすることも一般的です。実行結果は以下のようになります。

税込価格は 1320 円です。

スコープを意識した変数管理

JavaScriptを学ぶ上で避けて通れないのが「スコープ」という概念です。関数の中で定義した変数は、基本的にはその関数の中でしか使えません。これを「ローカル変数」と呼びます。この仕組みがあるおかげで、別の場所で使っている変数名とたまたま名前が被ってしまっても、プログラムが壊れることなく安全に動作します。大規模な開発になるほど、この「影響範囲を限定する」という考え方が重要になります。

さらなるステップ：アロー関数とモダンな記述

最近のJavaScript（ES6以降）では、記事の最後でも触れた「アロー関数」が主流となっています。特に、配列のデータを処理するメソッドなどと一緒に使われることが非常に多いです。

// 配列の各要素を2倍にする処理（アロー関数の例）
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled);

実行結果：

[2, 4, 6, 8, 10]

このように、関数は単独で使うだけでなく、他の機能と組み合わせることで真価を発揮します。まずは基本の function 文を完璧に使いこなせるように練習し、慣れてきたらアロー関数にも挑戦してみてください。一歩ずつ理解を深めていけば、自由自在にプログラムを操れるようになるはずです。