PR JavaScript

JavaScriptの関数とは？基本・使い方・アロー関数まで解説

この記事でわかること

  • JavaScriptの関数とは何か
  • 関数の基本的な作り方・使い方
  • 引数・戻り値の仕組み
  • function とアロー関数の違い
  • 初心者がつまずきやすいポイント

JavaScriptの関数とは？

関数（function）とは、
👉 複数の処理をひとまとめにして、必要なときに呼び出せる仕組みです。

イメージ

入力（引数） → 関数 → 出力（戻り値）

なぜ関数を使うの？

  • 同じコードを何度も書かなくて済む
  • 処理の内容が分かりやすくなる
  • 修正・管理がしやすくなる

関数の基本的な書き方（function）

基本構文

function 関数名() {
  // 実行したい処理
}

例：メッセージを表示する関数

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

greet(); // 関数の呼び出し

引数（ひきすう）とは？

引数とは、
👉 関数に渡す値（材料）のことです。

例：名前を受け取る関数

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

greet("太郎");
greet("花子");

🖥 出力

こんにちは、太郎さん！
こんにちは、花子さん！

戻り値（return）とは？

return は、関数の処理結果を外に返すためのキーワードです。

例：計算結果を返す関数

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

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

🖥 出力

8

returnのポイント

  • return が実行されると、関数はそこで終了
  • return がない関数は undefined を返す

関数式（変数に代入する関数）

関数は変数に代入することもできます。

例：関数式

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

greet("太郎");

アロー関数（=>）【超重要】

アロー関数は、
コードを短く・読みやすく書ける現代的な書き方です。

基本構文

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

例：アロー関数

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

さらに短く書く

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

functionとアロー関数の違い

比較項目functionアロー関数
書き方やや長い短く書ける
this呼び出し元で変わる親スコープを引き継ぐ
初心者向け◎◎

💡 基本はアロー関数を使えばOK
（thisを使う場面は後から理解すれば大丈夫）

コールバック関数とは？

他の関数の引数として渡される関数のことです。

例：ボタンイベントでのコールバック

button.addEventListener("click", () => {
  console.log("クリックされました");
});

この () => {} が コールバック関数 です。

初心者がつまずきやすいポイント

ミス原因対策
関数を呼び忘れる() がないgreet() のように書く
returnを忘れる値が返らないreturnを意識
引数の順番ミス意図と違う結果呼び出し順を確認

まとめ

  • 関数は処理をまとめて再利用する仕組み
  • 引数で値を受け取れる
  • returnで結果を返せる
  • アロー関数で簡潔に書ける
  • JavaScriptでは関数が超重要

関数を理解すると、
JavaScriptで「できること」が一気に増えます。

-JavaScript