～
ad. 価格範囲を指定して商品を探せます
functionの概要
| 関数の定義と呼び出し JavaScript予約語 | ||
|
function 概要 わかりやすく説明
|
||
|
functionの基本的な使い方
JavaScriptで関数を使うときは、まず function キーワードを使って「こんな処理をする箱ですよ」という定義（登録）を行います。
その後、使いたい場所で関数名にカッコ () を付けて呼び出すことで、初めて中のプログラムが実行されます。
以下は、名前を受け取って挨拶文を作る基本的な関数の例です。
// 基本的な関数の定義（設計図の作成）
// カッコ内の「name」は外からのデータを受け取るための受講皿（引数）です
function greet(name) {
// return を使うと、出来上がった文字列を外に放り出します（戻り値）
return `こんにちは、${name}！`;
}
// 関数の呼び出し（実際に箱を動かす）
// 引数として "Alice" という文字列を渡して実行します
const message1 = greet("Alice");
console.log(message1); // 出力: こんにちは、Alice！
// 何度でも異なるデータを入れて使い回せます
console.log(greet("Bob")); // 出力: こんにちは、Bob！
functionキーワードを使用して、行いたい処理に名前（関数名）を付けて定義します。- 一度定義しておけば、その関数名を使って、必要なときにいつでもその処理を瞬時に呼び出すことができます。
- 必要に応じて引数を渡し、内部の変数にデータを流し込むことで、処理の結果を柔軟にカスタマイズできます。
無名関数と即時実行関数
関数を作るとき、必ずしも function greet() のように名前に付けて定義する必要はありません。
名無しの関数（無名関数）を作って直接変数に代入したり、作ったその瞬間に一度だけ自動で実行させる（即時実行関数）といった、より高度な使い方も可能です。
// 1. 無名関数を変数に代入（関数式）
// 名前を持たない関数を作り、丸ごと add という変数に格納しています
const add = function (a, b) {
return a + b;
};
console.log(add(5, 3)); // 出力: 8（変数名にカッコを付けることで呼び出せます）
// 2. 即時実行関数（IIFE）
// 関数全体をカッコ () で囲み、末尾にさらに () を付けることで、定義と同時にその場で実行します
(function () {
const secretMessage = "スコープ内の秘密のデータ";
console.log("即時実行関数が自動で動きました！");
})(); // 出力: 即時実行関数が自動で動きました！
- 無名関数は、名前を付けずに定義する使い捨ての関数であり、変数に代入して持ち運んだり、別の関数への引数（コールバック）として渡す際に多用されます。
- 即時実行関数は定義と同時に一度きり実行される関数で、内部の変数を外側から書き換えられないように閉じ込める（スコープの限定）のに非常に便利です。
functionの応用例
関数は、複雑な計算アルゴリズムを中に隠蔽したり、他の関数をサポートするための部品（コールバック関数）として渡すことで、JavaScriptの開発をより強力にします。
以下は、自分自身を呼び出す複雑なロジックと、配列の操作関数に無名関数を組み合わせた応用例です。
// フィボナッチ数列（前の2つの数字を足していく数列）を計算する関数
function fibonacci(n) {
if (n <= 1) return n;
// 関数の中で自分自身の関数を再び呼び出す「再帰処理」を行っています
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(5)); // 出力: 5
console.log(fibonacci(10)); // 出力: 55
// 配列の要素を関数を使ってフィルタリング（偶数だけを抽出）する例
function filterEvenNumbers(numbers) {
// filterメソッドの引数の中に、判定用の関数（コールバック関数）を直接渡しています
return numbers.filter(function (num) {
return num % 2 === 0;
});
}
console.log(filterEvenNumbers([1, 2, 3, 4, 5])); // 出力: [2, 4]
- 関数を使うことで、どんなに複雑なロジックであっても「関数を呼び出すだけのシンプルな1行」に綺麗に隠蔽し、再利用可能なコードを作成できます。
- JavaScript標準の便利なメソッド（
filterやmapなど）に対してコールバック関数を渡すことで、高度で柔軟な配列処理を簡単に実現できます。
注意点
- 巻き上げ（hoisting）:
function 関数名()という形式（関数宣言）で書いた場合、JavaScriptはそのコードをプログラムの一番上にあるものとして解釈する「巻き上げ」という性質を持っています。
そのため、関数の定義がコードの下の方にあっても、それより上で呼び出すことができてしまいますが、無名関数を変数に入れた形式（関数式）では巻き上げが起きずエラーになるため、書く順番に注意が必要です。// ⭕ 関数宣言なら巻き上げにより、定義前でも呼び出せます console.log(sayHello()); // 出力: Hello! function sayHello() { return "Hello!"; } // ❌ NGな例：変数に代入する関数式（無名関数）は巻き上がらないため、定義前に呼ぶとエラーになります console.log(sayBye()); // TypeError: sayBye is not a function const sayBye = function() { return "Bye!"; }; - スコープの理解: 関数の内部（波カッコ
{ }の中）でconstやletを使って宣言した変数は「ローカルスコープ」と呼ばれ、その関数の外側からは絶対にアクセスできません。
関数の外側を汚さないための安全な仕組みですが、外で使おうとしてエラーにならないよう意識しましょう。 - 冗長なコードを避ける: 近年のJavaScript開発（ES6以降）では、単純な処理を記述する場合、
functionキーワードを使わずに() => {}という記号を使ってより短く書くことができる「アロー関数」が広く普及しています。
好みに応じて使い分ける、またはコードを簡潔に保つためにアロー関数への書き換えも検討しましょう。
よくある質問
- Q: 関数宣言（普通の関数）と関数式（変数に入れる関数）はどちらを使うべきですか？
- A: 現代のJavaScript開発では、関数式（またはアロー関数）を好んで使う開発者が増えています。
普通の関数宣言はどこからでも呼べる「巻き上げ」のメリットがありますが、裏を返せば「まだ定義されていないはずの関数がなぜか動く」というコードの乱れを許してしまいます。
上から順番に厳格に読み込ませ、名前の重複バグを防ぐためにも、変数に代入するスタイルやアロー関数をベースにするのが実務では一般的です。 - Q: 即時実行関数（IIFE）は、アロー関数（最新の書き方）でも作成できますか？
- A: はい、全く同じように作成できます。
アロー関数を使って即時実行関数を作る場合は、以下のようにfunctionという文字をなくして矢印記号（=>）を使い、全体をカッコで囲むスタイルになります。// アロー関数による即時実行関数（IIFE）の例 (() => { console.log("最新のアロー関数スタイルで即時実行されました！"); })(); - Q: 関数の中で
return文を書き忘れたり、省略するとどうなりますか？ - A: エラーにはなりませんが、その関数は中身の処理だけを終えた後、呼び出し元に対して暗黙的に
undefined（値が未定義であるというデータ）を返します。
「画面に文字を表示するだけ」といった関数ならreturnは不要ですが、計算結果を次のプログラムに回したい場合は、必ずreturnを書き忘れないようにしてください。// ❌ return を忘れた関数 function multiply(a, b) { const result = a * b; // 計算はしていますが、外に出していません } console.log(multiply(3, 3)); // 出力: undefined （値が受け取れません）
まとめ
functionは、JavaScriptのあらゆるプログラムを構築するための最小単位であり、最も頻繁に使用する最も重要なキーワードです。
- バラバラになりがちな処理を関数として1つの箱にまとめることで、コードの可読性を高め、修正やメンテナンスを圧倒的に楽にすることができます。
- 関数宣言における「巻き上げ」の罠や、関数内部で変数が守られる「スコープ」の仕組みを正しくマスターして使いこなしましょう。
- 短い単純な処理では、アロー関数なども積極的に織り交ぜることで、より近代的なスッキリとした読みやすいコードを実現していきましょう。