JavaScriptの引数・戻り値の使い方をマスターしよう！

1. 引数とは？関数に渡す「材料」のようなもの

1. 引数とは？関数に渡す「材料」のようなもの

引数（ひきすう）とは、関数に渡す値のことです。関数が「何か作業をするときに使う材料」のようなものと考えるとわかりやすいです。

例えば、関数に数字を渡して、その数字を使って計算したり、文字を渡して画面に表示したりします。

引数は関数の丸カッコの中に書きます。具体例を見てみましょう。

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

greet("太郎");

この例では、name が引数です。関数を呼ぶときに "太郎" を渡しています。

その結果、画面に「こんにちは、太郎さん！」と表示されます。

2. 戻り値とは？関数が結果を「返す」仕組み

2. 戻り値とは？関数が結果を「返す」仕組み

戻り値（もどりち）とは、関数が処理を終えた後に返す値のことです。たとえば、関数に材料を渡して何か計算した結果を返すイメージです。

戻り値は関数の中で return キーワードを使って指定します。

例を見てみましょう。

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

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

ここでは、add 関数が 2つの数字 a と b を受け取り、足し算した結果を return で返しています。

戻り値を変数 result に受け取り、それを画面に表示すると「8」となります。

3. 引数と戻り値を使うと、関数がもっと便利になる！

3. 引数と戻り値を使うと、関数がもっと便利になる！

引数を使うことで、関数に色々なデータを渡して柔軟に動かせます。戻り値を使うと、関数から結果をもらって他の処理に使えます。

例えば、次のように書くと、好きな名前で挨拶して、その長さも教えてくれます。

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

const len = greetAndCount("花子");
console.log("名前の文字数は " + len + " です。");

このコードは、画面に「こんにちは、花子さん！」と表示し、名前の文字数を戻り値で返して、続けて表示しています。

4. 引数や戻り値がない関数もある

4. 引数や戻り値がない関数もある

関数によっては引数や戻り値がない場合もあります。例えば、画面にただメッセージを表示するだけの関数は引数や戻り値が不要です。

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

sayHello();

この関数は決まったメッセージを表示するだけで、引数や戻り値はありません。

5. 引数は複数使えて、戻り値はひとつだけ

5. 引数は複数使えて、戻り値はひとつだけ

関数には複数の引数を渡せます。カンマ（,）で区切って複数指定します。

function multiply(a, b) {
  return a * b;
}

console.log(multiply(4, 6));

戻り値は基本的にひとつだけ返せますが、オブジェクトや配列を使えば複数の値をまとめて返すことも可能です。

6. まとめないけど最後に注意点

6. まとめないけど最後に注意点

引数や戻り値は関数を使いこなす上で重要な基本です。プログラムの柔軟性や再利用性がぐっと高まります。

最初は「関数は材料を受け取って、結果を返す」と覚えておくと理解しやすいです。

まとめ

まとめ

今回の記事では、JavaScriptプログラミングの基礎中の基礎でありながら、もっとも重要な要素である「引数」と「戻り値」について詳しく解説してきました。関数は単なる命令の塊ではなく、外部からデータを受け取り、それを加工して新たな結果を返すという「データの橋渡し」の役割を担っています。この仕組みを理解することで、コードの再利用性が飛躍的に向上し、複雑なロジックもシンプルに整理できるようになります。

引数の役割と柔軟な設計

引数は、関数という「装置」を動かすための「材料」です。同じ関数であっても、渡す引数を変えるだけで結果を変化させることができます。これは、プログラムに柔軟性を持たせるために不可欠な考え方です。

例えば、商品の価格と消費税率を引数として受け取る関数を考えてみましょう。税率が変わったとしても、関数を呼び出す側の引数を調整するだけで対応が可能になります。また、デフォルト引数（引数が渡されなかった時の初期値）を設定することで、よりエラーに強い堅牢なコードを書くこともできます。

戻り値による処理の連鎖

戻り値は、関数が計算したり処理したりした「成果物」を呼び出し元に返却する仕組みです。return文によって返された値は、そのまま変数に代入したり、別の関数の引数として直接渡したりすることができます。

この「値を返す」という動作があるおかげで、私たちは「計算する関数」「文字列を加工する関数」「データを保存する関数」といった具合に、役割を細かく分担させた「小さな関数」を組み合わせて大きなプログラムを構築できるようになるのです。

JavaScriptでの実践的なサンプルコード

ここで、これまでに学んだ引数と戻り値を活用した、もう少し実践的なプログラムを見てみましょう。複数の数値を受け取ってその平均値を計算し、結果によってメッセージを出し分ける処理です。

// 合計値を計算して戻り値として返す関数
function calculateTotal(scores) {
    let total = 0;
    for (let i = 0; i < scores.length; i++) {
        total += scores[i];
    }
    return total;
}

// 平均値を計算し、評価メッセージを返す関数
function getEvaluation(scores) {
    const total = calculateTotal(scores);
    const average = total / scores.length;

    if (average >= 80) {
        return "素晴らしい！合格圏内です。";
    } else {
        return "もう少し頑張りましょう。";
    }
}

const myScores = [85, 90, 75];
const resultMessage = getEvaluation(myScores);
console.log("今回の評価: " + resultMessage);

実行結果は以下のようになります。

今回の評価: 素晴らしい！合格圏内です。

このように、関数の中で別の関数（calculateTotal）を呼び出し、その戻り値を利用してさらに計算を進めるといった流れは、実際の開発現場でも非常によく使われるパターンです。

TypeScriptでの型定義の重要性

現代の開発では、JavaScriptに「型」の概念を追加したTypeScriptが主流になっています。引数にどのような種類のデータを入れるべきか、戻り値として何が返ってくるかを明示することで、開発効率と安全性が劇的に高まります。

/**
 * 商品名と価格、数量を受け取り、フォーマットされた文字列を返す関数
 * @param productName 商品名（string）
 * @param price 単価（number）
 * @param quantity 数量（number）
 * @returns 合計金額を含む紹介文
 */
function getProductSummary(productName: string, price: number, quantity: number): string {
    const totalPrice: number = price * quantity;
    return productName + "の合計金額は" + totalPrice + "円です。";
}

const summary: string = getProductSummary("ノートパソコン", 120000, 2);
console.log(summary);

TypeScriptを使うと、もし引数に間違えて「数値」ではなく「文字列」を渡してしまった場合に、プログラムを実行する前にエディタがエラーを教えてくれます。これにより、大規模なシステム開発でもバグの混入を防ぐことができるのです。

これからの学習に向けて

引数と戻り値を使いこなせるようになると、プログラミングの世界がぐっと広がります。最初は「何を書けばいいんだろう？」と迷うこともあるかもしれませんが、まずは身近な計算や文字列の結合などを関数化することから始めてみてください。

「この処理は他の場所でも使いそうだな」と思ったら、それを引数と戻り値を持つ関数に切り出してみる。その繰り返しが、美しくメンテナンスしやすいコードを書くための一番の近道です。焦らず一歩ずつ、コードを書きながら感覚を掴んでいきましょう。