【超初心者向け】JavaScriptの関数(function)とは？使い方・書き方を徹底解説！

JavaScriptを学び始めると最初につまずきやすいのが 関数（function） の概念です。この記事では、JavaScriptの関数について「超基礎」から「応用」まで、初心者にもわかりやすく丁寧に解説していきます。

---

🔶 関数とは何か？

関数とは、ある処理をまとめて再利用できるようにしたものです。たとえば「挨拶する処理」を関数にまとめると以下のようになります。

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

このように関数は、名前をつけて何度でも呼び出せる便利な機能です。

---

🔶 関数の基本構文と使い方

function 関数名(引数1, 引数2) {
  // 処理
  return 戻り値;
}

✅ 例：

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

console.log(add(3, 5)); // → 8

---

🔶 returnの役割とは？

returnは関数の「結果」を返すためのものです。
また、returnの時点で関数は終了します。

function sayHi() {
  return "やあ！";
  console.log("これは表示されない"); // 実行されない
}

---

🔶 引数と戻り値とは？

• 引数（パラメータ）：関数に渡すデータ
• 戻り値（リターン値）：関数が返す結果

function multiply(x, y) {
  return x * y;
}

let result = multiply(3, 4); // 12

---

🔶 無名関数とは？

関数に名前をつけず、変数に代入して使う方法です。

const greeting = function(name) {
  return "Hello, " + name;
};

console.log(greeting("Taro")); // Hello, Taro

---

🔶 アロー関数（=>）の使い方

ES6から導入された新しい関数の書き方で、短く記述できます。

基本の形：

const 関数名 = (引数) => {
  return 処理;
};

短縮形：

const add = (a, b) => a + b;

引数が1つだけならカッコ省略OK：

const square = x => x * x;

---

🔶 関数の種類まとめ

種類	書き方例	特徴
通常の関数	function fn() {}	最も基本的な関数の書き方
無名関数	const fn = function() {}	一時的に使いたい関数
アロー関数	const fn = () => {}	短くてthisの挙動が違う

---

🔶 thisの違い：functionとアロー関数

const obj = {
  name: "Hanako",
  normalFunc: function() {
    console.log(this.name); // Hanako
  },
  arrowFunc: () => {
    console.log(this.name); // undefined
  }
};

obj.normalFunc();
obj.arrowFunc();

---

🔶 コールバック関数とは？

関数を「引数として渡す」ことで、あとで実行する方法です。

function doSomething(callback) {
  console.log("最初の処理");
  callback();
}

doSomething(function() {
  console.log("あとで実行される処理");
});

---

🔶 ネストされた関数（関数の中の関数）

function outer() {
  function inner() {
    console.log("内側の処理");
  }
  inner();
}

---

🔶 関数は「第一級オブジェクト」

関数は「値」として扱えるので、以下のようなことが可能です：

• 変数に代入
• 引数に渡す
• 戻り値として返す

function greet(name) {
  return function() {
    console.log("Hello, " + name);
  };
}

const sayHi = greet("Satoshi");
sayHi(); // Hello, Satoshi

---

✅ まとめ：関数を使うメリット

• 処理の再利用ができる
• コードが整理される
• 意味のまとまりが明確になる
• 柔軟な設計が可能（関数を値として扱える）

---

🔽 関数を理解する3つの視点

視点	内容
① 定義	関数を宣言して作る
② 呼び出し	関数名() で呼び出す
③ 結果	returnで値を返す

---

🔎 関連キーワード（SEO対策）

• JavaScript 関数 わかりやすい
• functionの使い方 JavaScript
• アロー関数 違い
• 無名関数とは
• JavaScript 初心者 脱出

ぜひこの記事を参考に、JavaScriptの関数をマスターしていきましょう！