【JavaScript】変数・関数・引数・戻り値について

2025年4月26日

JavaScriptを学ぶにあたって一番最初に「？？？」となりやすい「変数」「関数」「引数」「戻り値」について詳しくわかりやすいように説明していこうと思います！

変数とは？？？

変数はデータに名前を付ける箱だと思ってください！
イメージ：リンゴを入れる箱に「くだもの」という名前を付ける
という感じ！

//JavaScript

let fruit = "りんご";

・let → 箱を作るよ
・fruit → 箱の名前
・”りんご” → 箱の中身

なんでわざわざ名前を付けるの？？
あとで使いたい時に fruit って呼ぶだけで「りんご」って出てくる！！

//JavaScript

console.log(fruit); //りんご

変数にできることまとめ

・中身をあとで変えられる
・何度でも使いまわせる
・データを綺麗に整理できる

関数とは？？？

関数は一連の作業をまとめたセットと思ってください！
イメージ：「料理レシピ」みたいなもの
例えば「カレーを作るレシピ」みたいに、やることを順番にまとめて、それに名前を付けるという感じ！

//JavaScript

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

・function → 関数を作るよ
・sayHello → レシピ（関数）の名前
・{ } → この中に「やることリスト」を書く

関数の使い方

関数を作っただけでは動きません！
呼び出してあげましょう。

//JavaScript

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

関数にデータを渡すこともできる

//JavaScript

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

greet("さくら");　//こんにちは！さくらさん！
greet("太郎");　　//こんにちは！太郎さん！

・name が「誰にあいさつするか」を受け取る場所
・呼び出すときに”さくら”とか”太郎”を渡している

引数とは？？？

引数とは「関数に渡す材料」のことと思ってください！
イメージ：「カレー作って！」と言うときに「じゃがいもとにんじんも渡す」
カレーを作るレシピ（関数）があって、そこに材料（引数）を渡すと、ちゃんと料理（結果）ができる。という感じです。

//JavaScript

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

greet("さくら");　//こんにちは！さくらさん！

・name が引数
・呼び出すときに”さくら”を渡している

//JavaScript

function greet(ここに材料が入る) {
  console.log("こんにちは、" + ここで材料を使う + "さん！");
}

greet("さくら");

→関数に材料を渡してその材料を使って中の処理をする！！

戻り値とは？？？

戻り値は「関数が作った完成品を外に渡す」ことです！
イメージ：「カレーができたから、はいどうぞ！！」
という感じで出来上がったもの（結果）を関数の外に渡してあげるという感じです。

//JavaScript

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

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

・a と b が引数（材料）
・a + b が計算されて、return で結果（完成品）を返している

//JavaScript

function add(材料A, 材料B) {
  完成品 = 材料A + 材料B;
  return 完成品;
}

関数が何かしら作って、外に渡すという感じです。

まとめ