Java Script 関数

2025.12.31

関数とは

関数（function）とは、プログラムの中で行いたい処理をひとまとまりにした仕組みのこと。 必要に応じて呼び出すことで、そのまとまった処理を実行できるようになる。

多くの場合、関数は

  • 外部から値（入力）を受け取り
  • その値を使って決められた処理を行い
  • 結果（出力）を返す

という流れで動作する。

関数の定義
  function 関数名(引数, 引数, ・・・){
      処理
      return 値;
  }

関数の主な機能（役割）

関数には、次のような基本的な機能がある。

① 必要なときに呼び出して実行できる

関数は定義しただけでは動かず、呼び出されたときに初めて処理が実行される。 これにより、同じ処理を何度でも再利用できる。

② 引数を受け取って処理に利用できる

関数は、外部から値（引数）を受け取り、その値を使って処理を行うことができる。 これにより、同じ関数でも入力を変えることで柔軟に動作させられる。

③ 処理結果を返すことができる

関数は、内部で行った処理の結果を「戻り値」として返すことができる。 返された値は、他の計算や表示などに利用できる。

関数の巻き上げ
  • JavaScript の関数は、基本的に「呼び出す前に宣言しておく」必要がある。 プログラムは上から順に実行されるので、まだ存在しない関数を呼び出すとエラーになる。
  • ただし、例外があり、JavaScript には「巻き上げ」という仕組みがあり、 関数宣言だけは定義より前でも呼び出せる。
greet(); // ここで呼んでも動く

function greet() {
  console.log("hello");
}
  • すべての関数が巻き上がるわけではなく、関数式やアロー関数は「変数だけ」巻き上げられ、関数本体は巻き上げの対象にならないため、必ず宣言後に呼び出す。
greet(); // エラー

const greet = () => {
  console.log("hello");
};

アロー関数

  • 関数を 短く書くための構文
  • function キーワードを使わない
  • 主に コールバック関数 で使われる
JavaScript
// 従来
function add(a, b) {
  return a + b;
}

// アロー関数
const add = (a, b) => {
  return a + b;
}
基本構文
①基本形
JavaScript
const func = (a, b) => {
  return a + b;
};
②処理が1行の場合（return省略）
JavaScript
const func = (a, b) => a + b;
  • {} を省略すると return も省略される
  • 暗黙的 return（implicit return）
  • 処理が複数行になる場合は、{ }も return も省略できない
    • return がない関数は{ }は省略できない
③引数が1つの場合
JavaScript
const func = a => a * 2;
  • () 省略可（ただし可読性次第）
④引数なし
JavaScript
const func = () => 10;

アロー関数の特徴（重要）

① this を持たない
  • アロー関数自身の this を持たない
  • 定義時のスコープの this をそのまま使う
JavaScript
const obj = {
  value: 10,
  func: () => {
    console.log(this.value); //undefined
  }
};

※ this は obj を指さない

  • 比較：通常の関数
JavaScript
const obj = {
  value: 10,
  func() {
    console.log(this.value); //10
  }
};

👉 メソッドにはアロー関数を使わない

② arguments を持たない
JavaScript
const func = () => {
  console.log(arguments); // エラー
};


//必要なら 残余引数（rest） を使う
const func = (...args) => {
  console.log(args);
};
③ new できない
JavaScript
const Func = () => {};
new Func(); // TypeError
  • コンストラクタ用途不可

function とアロー関数の違いまとめ

項目functionアロー関数
this呼び出し元で決まる外側の this
argumentsありなし
new可能不可
prototypeありなし
記述量多い少ない

最低限の指針

  • コールバック → アロー関数
  • メソッド → function
  • this を使うならアロー関数は避ける
  • 短く書けるが、無理に省略しない

コメント