カテゴリ: JavaScript 更新日: 2025/09/09

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

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

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptの関数で、引数とか戻り値ってよく聞くけど、何のことかわかりません。教えてもらえますか?」

先生

「もちろんです!引数と戻り値は関数の大切な仕組みなので、わかりやすく説明しますね。」

生徒

「お願いします。なるべく簡単に理解したいです。」

先生

「では、まず引数から説明して、次に戻り値についてお話しします!」

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

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

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

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

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


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

greet("太郎");

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

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

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

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

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

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

例を見てみましょう。


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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

sayHello();

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

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

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

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


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

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

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

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

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

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

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

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New2
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
New3
JavaScript
JavaScriptの正規表現で任意の1文字(.)や文字クラスを使う方法
New4
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの配列の要素にアクセスする方法(インデックス番号の使い方)
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)