JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数なども解説｜JavaScript入門講座（7）

JavaScript
2021.08.02
この記事は約21分で読めます。
  1. JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数なども解説｜JavaScript入門講座（7）のPodcast
  2. はじめに
  3. JavaScriptにおける関数の本質と役割
  4. 関数の定義：宣言・式・アロー関数
    1. 関数宣言（Function Declaration）
    2. 関数式（Function Expression）
    3. アロー関数（Arrow Functions）
  5. 命名規則：意味を伝え、可読性を高める
    1. キャメルケースの採用
    2. 動詞＋目的語の原則
  6. 関数の呼び出しと実行メカニズム
    1. 巻き上げと一時的デッドゾーン（TDZ）
    2. 再帰関数：自己呼び出しの魔力
  7. 引数：関数へデータを届けるインターフェース
    1. デフォルト引数（Default Parameters）
    2. 残余引数（Rest Parameters）
    3. 構造分解引数
  8. 戻り値：処理結果の返却とPromise
  9. 関数の中の関数：入れ子とスコープの極意
    1. レキシカルスコープとスコープチェーン
  10. クロージャ：環境を記憶する関数の力
    1. クロージャの仕組み
  11. アロー関数の深層：Lexical thisとコンテキスト
    1. なぜアロー関数が必要なのか
  12. 2024年〜2025年の最新パラダイム：ES2024/ES2025
    1. ES2024：データのグループ化と新しい非同期操作
    2. ES2025：安全なエラー処理と高度な反復
  13. プロフェッショナルな設計指針：クリーンコードの原則
    1. 単一責任の原則（Single Responsibility）
    2. 副作用の最小化と純粋関数
    3. ESLintとPrettierの活用
  14. 結論と展望：次世代のJavaScript開発へ
  15. 参考資料

JavaScriptの関数の書き方、定義、関数名、呼び出し、引数、戻り値、関数の中に関数なども解説｜JavaScript入門講座（7）のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

JavaScriptという言語において、関数は単なる「一連の処理の集まり」以上の意味を持ちます。それは言語の心臓部であり、プログラムを構成する最も基本的な部品です. 現代のJavaScript（ECMAScript）の進化に伴い、関数の書き方やその内部的な挙動は、以前よりもはるかに洗練され、かつ強力なものへと変貌を遂げました。2024年から2025年にかけての最新仕様（ES2024およびES2025）では、非同期処理の安全性向上やデータ操作の効率化を目指した新機能が追加され、関数の役割はさらに拡張されています。本稿では、プログラミング初心者の方でも理解できるよう、基礎から最新の高度な概念までを丁寧に解き明かしていきます。

JavaScriptにおける関数の本質と役割

関数とは、特定の目的を達成するための命令をひとまとめにした「再利用可能なユニット」です。JavaScriptにおいて関数が特異なのは、それが「第一級オブジェクト（First-class object）」として扱われる点にあります 。これは、関数を数値や文字列と同じように変数に代入したり、他の関数への引数として渡したり、あるいは関数から別の関数を戻り値として返したりできることを意味します 。この性質により、JavaScriptは関数型プログラミングのスタイルを取り入れることができ、非常に柔軟なコード設計が可能となっています。関数は単に呼び出されるのを待つだけのコードブロックではなく、データとしてプログラム内を自在に駆け巡る存在なのです。

関数の定義：宣言・式・アロー関数

JavaScriptで関数を定義する方法はいくつか存在し、それぞれに異なる性質と用途があります。適切な定義方法を選択することは、予期せぬバグを防ぎ、読みやすいコードを書くための第一歩です。

関数宣言（Function Declaration）

最も基本的で伝統的な書き方が「関数宣言」です。functionキーワードの後に名前を付け、波括弧の中に処理を記述します。

JavaScript

javascript

function square(number) {
  return number * number;
}

関数宣言の最大の特徴は「巻き上げ（Hoisting）」が完全に適用される点にあります 。JavaScriptエンジンはコードを実行する前に宣言をスキャンするため、関数を定義する前の行でその関数を呼び出しても、エラーなく実行されます 。

関数式（Function Expression）

関数を変数に代入する形で定義するのが「関数式」です。多くの場合、関数名を持たない「無名関数」として記述されます。

JavaScript

javascript

const square = function(number) {
  return number * number;
};

関数式は、代入が行われた後にのみ利用可能となります。そのため、関数宣言とは異なり、定義前に呼び出すことはできません 。現代の開発では、後述する再定義の防止のためにconstを用いた関数式が推奨されています 。

アロー関数（Arrow Functions）

ES2015で導入されたアロー関数は、現代のJavaScript開発におけるデファクトスタンダードとなっています。その構文は極めて簡潔です。

JavaScript

javascript

const square = (number) => number * number;

アロー関数は単なる短縮記法ではなく、内部的なthisの扱いが従来の関数とは決定的に異なります 。独自のthisをバインドせず、定義された周囲のスコープからthisを継承する（レキシカルバインド）という性質を持ちます 。一方で、コンストラクタとして使用できない、argumentsオブジェクトを持たないといった制限も存在するため、すべての場面で従来の関数を置き換えるものではないことを理解しておく必要があります 。

命名規則：意味を伝え、可読性を高める

関数の名前は、その関数が果たす「責任」を端的に表すものであるべきです。JavaScriptのコミュニティでは、特定のルールに従って命名を行うことが、共同作業や将来のメンテナンスにおいて不可欠とされています 。

キャメルケースの採用

JavaScript의 標準的な命名スタイルは「キャメルケース（camelCase）」です。これは、最初の単語を小文字で始め、2語目以降の頭文字を大文字にする形式です 。この名称は、単語の区切りがラクダのコブのように見えることに由来しています 。

命名対象推奨されるスタイル例
関数・変数ローワーキャメルケースcalculateTotalAmount, fetchUserData
クラスパスカルケースUserSession, DataAnalyzer
定数スネークケース（大文字）MAX_RETRY_COUNT, API_ENDPOINT

動詞＋目的語の原則

関数名は「何をするか」を示すため、通常は動詞から始めます。例えばデータを取得するならget、設定するならset、計算するならcalcといった具合です 。また、真偽値を返す関数にはis（〜であるか）、has（〜を持っているか）、can（〜できるか）といった接頭辞を付けることで、コードの意図がより明確になります 。

関数の呼び出しと実行メカニズム

関数を定義しただけでは、その中のコードは実行されません。関数を実行するには、関数名の後ろに丸括弧()を付ける「呼び出し」の操作が必要です。

巻き上げと一時的デッドゾーン（TDZ）

JavaScriptの実行エンジンは、コードを一行ずつ実行する前に、まず宣言をメモリに配置します 。これを「巻き上げ」と言いますが、varで宣言された変数や関数宣言は参照可能になるのに対し、letやconstで宣言された変数（関数式を含む）は「一時的デッドゾーン（Temporal Dead Zone）」と呼ばれる状態に置かれます 。この期間中にアクセスしようとするとReferenceErrorが発生するため、現代のJavaScriptでは「使う前に必ず定義する」という習慣がより強く求められます 。

再帰関数：自己呼び出しの魔力

関数が自分自身を呼び出すことを「再帰（Recursion）」と呼びます 。これは、階層構造を持つデータの探索や、数学的な階乗の計算などで非常に有効です。ただし、終了条件（ベースケース）を正しく設定しなければ、無限ループに陥りスタックオーバーフローを引き起こす危険性もあります 。

引数：関数へデータを届けるインターフェース

引数（パラメータ）は、外部から関数へ情報を渡すための窓口です。JavaScriptでは、この引数の取り扱いが非常に柔軟に設計されています。

デフォルト引数（Default Parameters）

呼び出し側が引数を省略した場合や、undefinedを渡した場合に自動的に適用される初期値を設定できます 。

JavaScript

javascript

function multiply(a, b = 1) {
  return a * b;
}

この機能により、関数の挙動をより安定させ、冗長なエラーチェックを減らすことができます。デフォルト引数は関数が呼び出されるたびに評価されるため、動的な値を設定することも可能です 。

残余引数（Rest Parameters）

引数の数が決まっていない場合、...（スプレッド演算子）を使用することで、渡されたすべての引数を一つの配列として受け取ることができます 。

JavaScript

javascript

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

従来のargumentsオブジェクトとは異なり、残余引数は本物の配列であるため、mapやfilterといった便利な配列メソッドをそのまま利用できる利点があります 。

構造分解引数

オブジェクトや配列を引数として受け取り、その中身を直接変数として展開する手法です。これにより、引数の順序を覚える必要がなくなり、コードの可読性が飛躍的に向上します 。

戻り値：処理結果の返却とPromise

関数は、return文を使用することで処理の結果を呼び出し元に返します。returnが実行されると、その関数の実行は即座に終了します 。現代のJavaScriptでは、戻り値として「Promise」を返すことが一般的です 。これは、非同期処理（データの通信など）の結果を将来受け取ることを約束するオブジェクトです。Promiseを返す関数を定義することで、async/await構文を用いた、同期的で読みやすい非同期コードを記述できるようになります 。

関数の中の関数：入れ子とスコープの極意

JavaScriptでは関数を入れ子（ネスト）にして定義することが可能です。これは単にコードを整理するためだけではなく、スコープを制御し、安全なプログラムを作るための重要な技術です。

レキシカルスコープとスコープチェーン

内側の関数は、外側の関数で宣言された変数にアクセスできます 。この性質を「レキシカルスコープ（静的スコープ）」と呼びます 。複数の関数が入れ子になっている場合、JavaScriptエンジンはまず現在の関数内を探し、見つからなければ外側の関数、さらに外側へと変数を探しに行きます。この連鎖が「スコープチェーン」です 。この仕組みにより、変数の「 ownership（所有権）」を明確にし、プログラムの他の部分から意図せず値を書き換えられることを防ぐことができます 。

クロージャ：環境を記憶する関数の力

「クロージャ（Closure）」は、JavaScriptにおける最も強力で魅力的な概念の一つです。これは、関数とその関数が作成された時点の周囲の状態（レキシカル環境）がセットになったものを指します 。

クロージャの仕組み

通常、関数の実行が終わると、その中のローカル変数はメモリから解放されます。しかし、その関数の内側で定義された別の関数が外側の変数への参照を持ち続けている限り、その変数は生き残り続けます 。

JavaScript

javascript

function createCounter() {
  let count = 0; // この変数は外部から直接触れない
  return function() {
    count++;
    return count;
  };
}
const myCounter = createCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

このように、クロージャを使うことで、特定のデータを関数の中に閉じ込め、外部からの干渉を受けない「プライベートな状態」を作り出すことができます 。これはオブジェクト指向プログラミングにおける「カプセル化」と同様の効果をもたらします 。

アロー関数の深層：Lexical thisとコンテキスト

アロー関数が従来のfunction式と最も異なるのは、thisの決定方法です。従来の関数では、thisは「どのように呼び出されたか」によって動的に決まります。一方、アロー関数では「どこで定義されたか」によって静的に決まります 。

なぜアロー関数が必要なのか

ブラウザのイベントリスナーやsetTimeoutなどのコールバック関数内でthisを使う場合、従来の関数ではthisがグローバルオブジェクトや予期せぬ要素を指してしまうことがよくありました 。アロー関数を使えば、周囲のコンテキストを維持できるため、bind(this)を明示的に呼び出す必要がなくなり、ミスを減らすことができます 。しかし、オブジェクトのメソッドとして定義する場合には、thisがそのオブジェクト自身を指さなくなるため、注意が必要です 。

機能従来の関数 (function)アロー関数 (=>)
this呼び出し方によって変化する定義時のスコープを継承する
arguments利用可能利用不可（残余引数を使用）
コンストラクタnew で実行可能new で実行不可（エラー）
メソッド定義推奨不向き（thisが継承されるため）

2024年〜2025年の最新パラダイム：ES2024/ES2025

JavaScriptの進化は、2025年に向けてさらに加速しています。最新の仕様では、関数の利便性を高める多くの新機能が「Finished（確定）」段階に達しています。

ES2024：データのグループ化と新しい非同期操作

ES2024では、データの整理を劇的に簡単にするメソッドが導入されました 。

Object.groupBy / Map.groupBy: 配列などのデータを特定の基準でグループ化する際、以前は手動でループを回す必要がありましたが、現在は一つの関数呼び出しで実現できます 。

Promise.withResolvers(): Promiseの状態を外部から制御したい場合に、これまで複雑だった記述を大幅に簡略化できる新しいAPIです 。

Temporal API: 長年、開発者を悩ませてきたDateオブジェクトの不備を解消する、新しく正確な日付・時刻操作の標準です 。

ES2025：安全なエラー処理と高度な反復

2025年の最新仕様として注目されているのが、以下の機能です 。

Promise.try: 与えられた関数が同期処理か非同期処理かを問わず、一律にPromiseとして扱うためのラッパーです 。これにより、エラーハンドリングの統一性が高まり、堅牢なコードが書けるようになります。

Iterator Helpers: イテレータ（反復子）に対し、配列のようにmap、filter、take、reduceといったメソッドを直接呼び出せるようになります 。これにより、巨大なデータを配列に変換することなく、効率的に処理できるようになります。

新しいSetメソッド: 集合演算（積集合、和集合、差集合など）を直接行うメソッドが追加され、複雑なデータ比較が容易になります 。

プロフェッショナルな設計指針：クリーンコードの原則

優れた関数を書くためには、単に文法を知っているだけでは不十分です。世界中のプロフェッショナルが実践しているベストプラクティスを意識することが、コードの品質を左右します。

単一責任の原則（Single Responsibility）

一つの関数は、たった一つのことだけを行うべきです 。もし関数が100行を超えたり、複数の役割（データの取得と表示の両方など）を持っていたりする場合は、小さな「ヘルパー関数」へと分割することを検討すべきです 。

副作用の最小化と純粋関数

可能な限り、外部の状態を書き換えない「純粋関数」を目指しましょう。同じ引数に対して常に同じ戻り値を返す関数は、テストが容易であり、バグが混入する隙を減らすことができます 。

ESLintとPrettierの活用

個人の好みではなく、チームやコミュニティの標準的なスタイルに従うことも重要です。ESLintやPrettierといったツールを使用することで、不適切な命名や潜在的なエラーを自動的に検出し、一貫性のある美しいコードを維持することができます 。

結論と展望：次世代のJavaScript開発へ

JavaScriptにおける関数は、基礎的な構文から、クロージャによる高度な隠蔽、および現代的な非同期処理や最新のAPI活用まで、驚くほど広大な世界を形作っています。2025年に向けた進化は、より宣言的（「どうやるか」ではなく「何をしたいか」）にコードを書くことを可能にし、開発者の生産性を飛躍的に高めています。初心者の皆様にとって、最初は複雑に感じるかもしれませんが、関数をマスターすることはJavaScriptそのものをマスターすることに直結します。本稿で紹介した定義、スコープ、クロージャ、および最新のES2024/ES2025の機能を一つずつ実践に取り入れることで、あなたのコードはより確かなものへと進化していくでしょう。プログラミングの旅は、一つの小さな関数を書くことから始まります。その一歩が、世界中のユーザーへ届く素晴らしいウェブアプリケーションの構築へと繋がっているのです。

参考資料

1. MDN Web Docs: JavaScript ガイド 関数, https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

2. JavaScript Best Practices and Techniques, https://www.aalpha.net/articles/javascript-best-practices-techniques/

3. Modern JavaScript Best Practices You Should Follow in 2025, https://ashishmisal.medium.com/modern-javascript-best-practices-you-should-follow-in-2025-74a5a73887db9

4. 9 Modern JavaScript Tips for Beginners in 2025, https://dev.to/ananiket/9-modern-javascript-tips-for-beginners-in-2025-3bkm

5. Modern JavaScript Features Every Developer Should Master in 2025, https://www.growin.com/blog/javascript-features-for-developers/

6. JavaScriptの最新仕様 ES2024/ES2025で入る新機能, https://qiita.com/rana_kualu/items/e82790fa50c05b167dcc

7. MDN Web Docs: 関数定義の基礎, https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

8. MDN Web Docs: JavaScript 関数リファレンス, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions

9. Pasona Media: JavaScript 引数・戻り値・クロージャ解説, https://x-tech.pasona.co.jp/media/detail.html?p=8438

10. 侍エンジニアブログ: JavaScript クロージャとコールバック, https://www.sejuku.net/blog/25026

11. Zenn: クロージャを用いた動的な関数の作成, https://zenn.dev/ryu0947/articles/109e6dd29bf7f2

12. MDN Web Docs: 関数式, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

13. MDN Web Docs: 関数スコープとクロージャ, https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

14. Qiita: 関数宣言と関数式の違い, https://qiita.com/NovaCat/items/f99eb1be57bb83a0eba1

15. Qiita: アロー関数のメリットとデメリット, https://qiita.com/kurumaebi65/items/03e83160299bdb8ced2f

16. MDN Web Docs: アロー関数式, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

17. Coding Everybody: アロー関数の制限と構文, https://codingeverybody.jp/javascript-arrow-functions/

18. MDN Web Docs: 再帰とアロー関数, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions

19. MDN Web Docs: デフォルト引数, https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters

20. MDN Web Docs: クロージャの詳細, https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures

21. MDN Web Docs: オブジェクトプロパティの列挙, https://developer.mozilla.org/ja/docs/Web/JavaScript

22. Zenn: クロージャの仕組みとメモリ管理, https://zenn.dev/mabo23/articles/4426d766901b12

23. Medium: Understanding Nested Functions and Closures, https://medium.com/@akxay/understanding-key-javascript-concepts-nested-functions-closures-and-more-90f9749c31ca

24. Dmitri Pavlutin: JavaScript Closures Visual Guide, https://dmitripavlutin.com/javascript-closure/

25. Rahman Hamim: A Beginner Friendly Tutorial on Closures, https://rahmanhamim.com/blog/understanding-javascript-closures-a-beginner-friendly-tutorial

26. freeCodeCamp: How Closures Work in JavaScript, https://www.freecodecamp.org/news/how-closures-work-in-javascript-a-handbook-for-developers/

27. Dev.to: Nested Function Scope in JavaScript, https://dev.to/richa/nested-function-scope-in-javascript-a-beginners-guide-22gk

28. MDN Web Docs: 実用的なクロージャの例, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

29. Lexical Scoping in JavaScript, https://lia.disi.unibo.it/materiale/JS/developer.mozilla.org/en-US/docs/Web/JavaScript/Closures.html

30. GreatFrontend: How to Create Private Variables with Closures, https://www.greatfrontend.com/questions/quiz/how-can-closures-be-used-to-create-private-variables

31. MDN Web Docs: Private Class Fields, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements

32. MDN Web Docs: var 文の挙動, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

33. Dev.to: JavaScript Visualized Scope Chain, https://dev.to/lydiahallie/javascript-visualized-scope-chain-13pd

34. Dasha AI: JavaScript Scope and Scope Chain, https://dasha.ai/blog/javascript-scope-and-scope-chain

35. StackOverflow: Scope Chain in JavaScript, https://stackoverflow.com/questions/1484143/scope-chain-in-javascript

36. Syncfusion: What's New in JavaScript ES2024, https://www.syncfusion.com/blogs/post/whats-new-javascript-ecmascript-2024

37. Wikipedia: ECMAScript Version History, https://en.wikipedia.org/wiki/ECMAScript_version_history

38. Saigon Technology: New Features in ECMAScript 2024, https://saigontechnology.com/blog/ecmascript/

39. NamasteDev: What's New in JavaScript ES2025, https://namastedev.com/blog/whats-new-in-javascript-es2025-3/

40. Qiita: Iterator Helpers の解説, https://qiita.com/rana_kualu/items/e82790fa50c05b167dcc

41. Web Dogear: JavaScript 命名規則とキャメルケース, https://web-dogear.com/blogs/knowledge-diary/202507142341

42. Qiita: JavaScriptの最適解 camelCase文化, https://qiita.com/honaki/items/059ab0dabf84fafaf459

43. Reddit: Do you prefer camelCase or snake_case?, https://www.reddit.com/r/ProgrammingLanguages/comments/10twqkt/do_you_prefer_camelcase_or_snake_case_for/

44. Qiita: 命名規則の由来まとめ, https://qiita.com/fasahina/items/b38e04d16859742f4400

45. MDN Web Docs: Adding Interactivity to your first website, https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity

46. Medium: If I Were Starting JavaScript in 2025, https://kuldeepsharma1.medium.com/if-i-were-starting-javascript-in-2025-a-no-nonsense-guide-332a6d5a41f8

47. Reddit: Introduction to JavaScript for Beginners, https://www.reddit.com/r/TeachingGrove/comments/1ixvlrl/coding_for_beginners_introduction_to_javascript/

48. JavaScript.info: The Modern JavaScript Tutorial, https://javascript.info/

49. Codecademy: Learn JavaScript, https://www.codecademy.com/learn/introduction-to-javascript

コメント

タイトルとURLをコピーしました