Hello! Uchii.code
バナー画像

【Javascript】未経験からフロントエンドエンジニアになる方法 #6

2023-09-02に公開

バナー画像

まえがき

今回の#6ではJavaScriptのアロー関数コールバック関数について学んでいきましょう。2つには同じ「関数」という名前がついていますが全く違う概念ですので今回は章ごとに分けて説明します。
2つの関数は、現代のWeb開発において非常に重要な要素です。これらの概念を理解することは、ウェブ開発者としてのスキルを向上させます。

アロー関数は、JavaScriptの関数の新しい記法です。通常の関数宣言よりもコンパクトで、コードの読みやすさを向上させます

一方、コールバック関数は非同期処理の中で頻繁に使用されます。特にイベント処理やデータの取得などで重要な役割を果たします。コールバック関数は、他の関数の引数として渡され、特定の条件が満たされたときに実行される仕組みを持っています。非同期処理については以下の記事で詳しく説明されております。

今回も、実践的な視点から、アロー関数とコールバック関数の具体的な使用例も提供します。実際のコーディングにおいて、どのようにこれらの関数を適用するかを示し、皆さんがスムーズに実践へ移行できるようサポートします。

1. アロー関数の基本

1-1. アロー関数の構文と使い方

JavaScriptにおけるアロー関数は、関数の定義方法の一つであり、その簡潔な構文と便利な特性から、現代のウェブ開発で幅広く活用されています。通常の関数宣言に比べてシンプルで読みやすい構文を提供します。以下は、アロー関数の基本的な構文です。

const add = (a, b) => {
  return a + b;
};

アロー関数は、=>を使って関数の本体を表し、引数として受け取る値を指定します。この構文の利点は、一行のコードで関数を定義できることです。また、引数が1つの場合、括弧を省略することもできます。

1-2. アロー関数の利点と注意点

アロー関数の利点は次のようにまとめることができます。

  • 簡潔さと可読性: アロー関数はコードを短縮し、可読性を向上させます。特に簡単な関数の定義に適しています。
  • thisの挙動: アロー関数はthisを固定化するため、関数内でthisの値が変わることがありません。

一方、注意点も存在します。

  • コンストラクタとしての利用不可: アロー関数はコンストラクタとして使用できないため、オブジェクトのインスタンスを生成する目的で使うべきではありません。
  • 関数名の省略不可: アロー関数は匿名関数として使われることが一般的で、関数名を省略できません。

2. コールバック関数の基本

2-1. コールバック関数の概要

コールバック関数は、他の関数に渡されて実行される関数のことです。これはJavaScriptの特性であり、非同期処理やイベントハンドリングなどの場面で特に重要です。コールバック関数は、関数の引数として渡され、特定の条件が満たされたときに呼び出されます。以下は、単純なコールバック関数の例です。

// コールバック関数を使用した非同期処理の例

// 非同期関数
function fetchData(callback) {
  setTimeout(function () {
    const data = { name: "John" };
    callback(data);
  },1000);
}

// コールバック関数
function processData(data) {
  console.log("データを処理中:", data);
}

// fetchData関数を呼び出し、コールバック関数を渡す
fetchData(processData);

この例では、まずコードを下から見て行った方が理解できます。fetchDataの引数として、processDataが渡っています。ではprocessDataとは何か、それはその1段上で定義されています。では本体の非同期関数ではどのような処理が行われているか。引数で受け取ったprocessDataをcallbackという名前で使用します。1秒かけて取得したデータの内容を引数として、callbackつまりprocessDataを実行しています。その結果としてprocessDataで定義されているようにconsole.logが実行されます。引数の名前が変わるので少しややこしいですが、自分でコードを書くようになると当たり前に使えるようになりますのでご安心ください。

ここで、コールバック関数の重要なポイントを説明します:

  • コールバック関数は、他の関数内で呼び出されます
  • コールバック関数は、非同期処理やイベント処理のように、ある特定の条件やタイミングで呼び出されます
  • コールバック関数は、他の関数に引数として渡されるため、関数の再利用性を高め、柔軟性を提供します。同じコールバック関数を異なる場所で使用することができます。

2-2. コールバック関数の一般的な使用例

コールバック関数は多くの場面で活用されます。以下は一般的な使用例の一部です。

  • 非同期処理の制御: ファイルの読み込み、HTTPリクエスト、タイマー処理など、非同期的な操作の完了時にコールバック関数を使用して結果を処理します。
  • イベントハンドリング: ユーザーの操作に応じて特定のコードを実行するために、イベントハンドラとしてコールバック関数を登録します。
  • 配列やリストの操作: 配列の各要素に対して同じ操作を実行する場合、コールバック関数を使用して効率的に処理します。

これらの使用例を理解し、コールバック関数を適切に利用することで、JavaScriptプログラムの柔軟性と拡張性を高めることができます

まとめ

今回の#6ではjavascriptのアロー関数とコールバック関数について触れました。javascriptの学習方法としては、Progateもしくはドットインストール→Youtube(しまぶーのIT大学)→Udemy講座【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)の順番が個人的にはおすすめです。次回の#7ではパッケージマネージャーについて紹介します。

プログラミング言語の人気オンラインコース

G e t i n T o u c h