【JavaScript】functionだけでない関数定義の仕方

（最終更新月：2023年11月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じてお伝えすること

• JavaScriptの関数の基本
• JavaScriptの関数の書き方とその応用
• JavaScriptの関数を使った具体例

当記事では、JavaScriptの関数の基本から、個々の関数を作成したり活用する際の役立つテクニックまで、現実のコードを交えて詳細に解説いたします。

最後までお付き合いください。

JavaScriptと関数の概要

こちらでは、「JavaScriptと関数の基本的な概要」についてお伝えしていきます。

• JavaScriptとは
• 関数の定義と意義
• 関数活用のメリット

JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

ブラウザ内で実行され、ウェブページのインタラクティビティを向上させる役割を果たします。

関数の定義と意義

関数は、特定のタスクを実行するためのコードのまとまりです。

一度定義されると、何度でも呼び出すことができ、コードの再利用性を高められます。

関数活用のメリット

関数を活用することで、コードの冗長性を減少させ、読みやすく、保守しやすいプログラムを作成できます。

また、エラーの発生を減少させ、効率的なコーディングが可能です。

関数定義の方法

こちらでは、「JavaScriptでの関数の定義方法」について詳しく解説します。

• 関数宣言による定義
• 関数式による定義
• アロー関数式の定義

関数宣言による定義

関数宣言は、function キーワードを使用して関数を定義する方法です。

function greet() {
    console.log("Hello, World!");
}

関数式による定義

関数式は、関数を変数に代入する方法で関数を定義します。

const greet = function() {
    console.log("Hello, World!");
};

アロー関数式の定義

アロー関数は、=> を使用してコンパクトに関数を定義する方法です。

const greet = () => {
    console.log("Hello, World!");
};

関数の呼び出しとスコープ

こちらでは、「関数の呼び出し方と、関数のスコープについて」を解説します。

• 関数を呼び出すテクニック
• 関数スコープの理解

関数を呼び出すテクニック

関数を呼び出すには、関数名の後に () を付けて実行します。

greet();  // "Hello, World!" と表示される

関数スコープの理解

関数スコープは、関数内で定義された変数が関数の外部からアクセスできない領域を指します。

変数名の衝突を防げるのがメリットです。

function showScope() {
    let innerVar = "I'm inside the function";
}
console.log(innerVar);  // 関数内の変数は外から見れない

関数とスコープの深層

こちらでは、「関数とスコープのより深い部分」について解説します。

• 再帰とは？
• 入れ子の関数とクロージャ
• 変数の保護と名前の衝突

再帰とは？

再帰とは、関数が自分自身を呼び出すことです。

これにより、繰り返し処理や階層的なデータ構造の探索などが可能になります。

function factorial(n) {
    if (n === 0) return 1;
    return n * factorial(n - 1);
}

入れ子の関数とクロージャ

関数内部に別の関数を定義できます。

内部の関数は、外部の関数の変数にアクセスでき、これをクロージャと呼びます。

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('Outer Variable:', outerVariable);
        console.log('Inner Variable:', innerVariable);
    }
}
const newFunction = outerFunction('outside');
newFunction('inside');

変数の保護と名前の衝突

関数のスコープを利用することで、変数を保護し、ほかのスクリプトやライブラリとの名前の衝突を防げます。

これは特に大規模なプロジェクトや、複数のライブラリを使用する場合に有効です。

function protectVariable() {
    let protectedVar = "I am protected";
    console.log(protectedVar);
}
protectVariable();
// console.log(protectedVar);  // Error: protectedVar is not defined

クロージャとは？

クロージャは、関数とその関数が作成されたレキシカルスコープの組み合わせです。

関数外部からはアクセスできない変数に、関数内部からアクセスできます。

function createCounter() {
    let count = 0;
    return function() {
        return count++;
    };
}
const counter = createCounter();
console.log(counter());  // 0
console.log(counter());  // 1

関数の引数とアロー関数

こちらでは、「関数の引数の取り扱いやアロー関数の特性」について詳しく解説します。

• 引数の扱い
• デフォルト引数の利用
• 残余引数について
• アロー関数の特性と利用法

引数の扱い

関数は、引数を通じて外部からデータを受け取ることが可能です。

これにより、関数の再利用性が向上します。

function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("Alice");  // "Hello, Alice!"

デフォルト引数の利用

デフォルト引数を使用すると、引数が提供されない場合にデフォルトの値を設定できます。

function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}
greet();  // "Hello, Guest!"

残余引数について

残余引数を使用すると、複数の引数を配列として受け取れます。

function logArgs(...args) {
    console.log(args);
}
logArgs(1, 2, 3, 4);  // [1, 2, 3, 4]

アロー関数の特性と利用法

アロー関数は、短い関数を簡潔に書くための構文です。

また、this の振る舞いも通常の関数とは異なります。

const add = (a, b) => a + b;
console.log(add(2, 3));  // 5

JavaScriptのプリセット関数

JavaScriptには、文字列操作や数値計算など、さまざまなタスクをサポートするためのプリセット関数が用意されています。

let str = "Hello, World!";
console.log(str.toUpperCase());  // "HELLO, WORLD!"

まとめ

当記事では、JavaScriptの関数について学習してきました。

関数は、コードの再利用性や可読性を向上させるための強力なツールです。

さらなる学習のためには、公式ドキュメントや関連書籍を参照することをおすすめします。