初心者でも分かる！JavaScriptにおける即時関数＆アロー関数の使い方10選 – Japanシーモア

初心者でも分かる！JavaScriptにおける即時関数＆アロー関数の使い方10選

JavaScript即時関数とアロー関数の使い方を解説するイメージJS
この記事は約9分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptの即時関数とアロー関数を使いこなせるようになります。

JavaScript初心者の方でも、サンプルコードを参考にしながら、使い方やカスタマイズ方法が理解できるでしょう。

●JavaScript即時関数とは

即時関数とは、関数定義と同時に実行される関数のことです。

これにより、プログラムの実行速度が向上したり、変数のスコープを制限することができます。

○即時関数の基本

即時関数は、下記のような形式で定義されます。

(function() {
  // 関数の処理
})();

この形式では、関数定義の直後に()が付けられており、定義と同時に関数が実行されます。

●JavaScriptアロー関数とは

アロー関数は、ES6(ES2015)で導入された、より短い構文で関数を記述できる機能です。

アロー関数では、thisの扱い方が通常の関数とは異なります。

○アロー関数の基本

アロー関数は、下記のような形式で定義されます。

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

この形式では、functionキーワードが省略され、アロー記号(=>)が使われています。

●JavaScriptにおける即時関数の使い方

JavaScriptでは、即時関数が非常に重要な役割を担っています。

この記事では、JavaScriptにおける即時関数の基本的な使い方を、わかりやすいサンプルコードとともにご紹介します。

○サンプルコード1：無名関数を即時実行する方法

JavaScriptの即時関数は、関数の定義と同時に実行される特徴があります。

下記のサンプルコードは、無名関数を使用して即時関数を実行する一例です。

(function() {
  console.log('即時関数が実行されました！');
})();

このコードでは、無名関数が定義されると同時に呼び出され、コンソールにメッセージが表示されます。

このように即時関数を用いることで、プログラムの初期化処理などに役立てることができます。

○サンプルコード2：変数のスコープを制限するテクニック

即時関数のもう一つの重要な使い方は、変数のスコープを制限することです。

下記のサンプルコードは、即時関数を使用して変数のスコープを制限する方法を表しています。

(function() {
  const localVar = 'スコープ内の変数';
  console.log(localVar);
})();
console.log(localVar); // ここではエラーが発生します

このコードでは、即時関数内で宣言されたlocalVarという変数は、関数外からはアクセスできないため、最後のconsole.log(localVar);でエラーが発生します。

これにより、グローバルスコープを汚染せずに、変数を管理することが可能になります。

●JavaScriptにおけるアロー関数の活用方法

JavaScriptのコーディングにおいて、即時関数とアロー関数は非常に重要な役割を果たします。

これらの関数を効果的に使う方法を、下記の例を通じて解説します。

○サンプルコード3：アロー関数による簡潔な関数定義

アロー関数は、より短い構文で関数を定義することを可能にします。

下記のコードは、アロー関数を使用して単純な挨拶機能を実装したものです。

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};
greet('John'); // 出力: Hello, John!

この例では、アロー関数を使って、名前を引数として受け取り、その人への挨拶をコンソールに表示するシンプルな関数が定義されています。

○サンプルコード4：thisの挙動を理解する

JavaScriptのアロー関数では、thisキーワードの挙動が従来の関数と異なります。

下記のコード例では、thisがどのように振る舞うかを表しています。

const person = {
  name: 'John',
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};
person.sayHello(); // 出力: Hello, John!

このコードでは、setTimeout内で使用されるアロー関数が、周囲のコンテキスト（この場合はpersonオブジェクト）のthisをそのまま引き継いでいます。

従来の関数だとthisの値が変わってしまうことが多いため、この挙動はアロー関数の大きな特徴の一つです。

●即時関数とアロー関数の応用例

JavaScriptにおける即時関数とアロー関数は、コードの簡潔性と機能性を向上させる重要な要素です。

即時関数はスコープの制御に役立ち、アロー関数はより簡潔な構文で関数を表現することができます。

ここでは、これらの関数を効果的に使用する具体的な例をいくつか紹介します。

○サンプルコード5：イベントリスナーでのアロー関数の活用

JavaScriptでイベント処理を行う際、アロー関数はその簡潔さから非常に役立ちます。

下記の例では、ボタンのクリックイベントにアロー関数を使用しています。

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('ボタンがクリックされました！');
});

このコードでは、ボタンがクリックされた時にコンソールにメッセージを表示する単純なイベントリスナーを設定しています。

アロー関数を用いることで、コードの可読性が高まり、より簡潔な表現が可能になります。

○サンプルコード6：プロミスのチェーンにアロー関数を使う

非同期処理はJavaScriptにおいて中核的な概念の一つです。

アロー関数を利用することで、プロミスを使った非同期処理のコードがよりシンプルになります。

const asyncFunc = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('プロミスの結果');
    }, 1000);
  });
};

asyncFunc()
  .then((result) => {
    console.log(result); // プロミスの結果
    return result + 'を加工';
  })
  .then((modifiedResult) => {
    console.log(modifiedResult); // プロミスの結果を加工
  });

このサンプルでは、アロー関数を用いたプロミスのチェーンが表されています。

これにより、非同期処理の結果を段階的に加工し、処理の流れが一目でわかるようになっています。

○サンプルコード7：アロー関数で配列操作を行う

JavaScriptでは、配列の操作も重要なテーマです。

アロー関数を使うことで、配列の各要素を簡単に操作できます。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

この例では、mapメソッドを使い、配列内の各要素を2倍にしています。

アロー関数のおかげで、この処理を一行で明確に記述できます。

●注意点

  1. 即時関数は、関数の外からアクセスできないため、外部からのデバッグが難しくなります。適切なコメントやconsole.logを活用しましょう。
  2. アロー関数では、thisが関数自身ではなく、定義されたオブジェクトを参照します。
    そのため、アロー関数を使わず通常の関数を使う場合があります。

●JavaScriptにおけるアロー関数のカスタマイズ方法

JavaScriptでのアロー関数の使用は、即時関数と共にコードの柔軟性と可読性を高める重要な側面です。

アロー関数は、パラメータのカスタマイズ、高階関数の実装、オブジェクトリテラルの生成など、多岐にわたる応用が可能です。

ここでは、これらの応用例を紹介し、JavaScriptでのアロー関数の使い方を探求します。

○サンプルコード8：アロー関数で引数をカスタマイズする

JavaScriptのアロー関数は引数の取り扱いにおいても柔軟です。

下記の例では、2つの引数を取り、それらを加算するシンプルなアロー関数を見てみましょう。

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

このコードでは、簡潔なアロー関数を使用して、2つの数字の加算を実行しています。

このような簡素化は、JavaScriptにおけるアロー関数の大きな利点の一つです。

○サンプルコード9：アロー関数をネストさせて高階関数を作る

アロー関数の真の力は、それらをネストさせることにより高階関数を容易に作れる点にあります。

下記の例を見てみましょう。

const multipleAdd = (a) => (b) => a + b;
const add5 = multipleAdd(5);
console.log(add5(3)); // 8

この例では、multipleAdd関数はアロー関数を返し、これを使って新しい関数add5が作成されます。

add5を別の値と組み合わせることで、柔軟に加算処理を行えます。

○サンプルコード10：アロー関数を用いたオブジェクトリテラルの生成

JavaScriptにおけるアロー関数のもう一つの応用は、オブジェクトリテラルの生成です。

const createPerson = (name, age) => ({
  name: name,
  age: age,
});

const person = createPerson('John', 30);
console.log(person); // { name: 'John', age: 30 }

このコードでは、アロー関数を使って、簡単にオブジェクトリテラルを作成しています。

波括弧を丸括弧で囲むことで、オブジェクトリテラルを明示的に返すことができます。

この方法で、JavaScriptのアロー関数を使って、効率的にオブジェクトを生成することができます。

まとめ

この記事を読めば、JavaScriptの即時関数とアロー関数を使いこなすことができるようになります。

即時関数とアロー関数を理解し、実践的なコードに活用することで、より効率的で簡潔なプログラムを作成することができます。

注意点やカスタマイズ方法も押さえておきましょう。