アロー関数とmapによるモダンな配列処理

ShiftBのWebアプリ開発コースの「第3章：JavaScript基礎」では、「アロー関数と配列操作メソッドを組み合わせた処理」が登場します。この配列処理はReact開発で頻繁に利用するものなのですが、1文のなかに複数の処理が内包され、さらに省略記法もあることから（慣れるまでの間は）読解や理解に苦しむところだと思います（経験者🤮）。

特に、C言語などのレガシーな手続き型スタイルでのプログラミング経験がある人ほど、戸惑いを感じるのではないかと思います。ここでは「レガシーな手続き型のスタイル」から「モダンな宣言型のスタイル」に書き換えるプロセスをステップバイステップで解説したいと思います。

例題として、次のようなものを考えます。

配列を引数として受け取り、各要素を「3倍」にした新しい配列を返す関数を作成して実行してください。ただし、for は使用せず「配列オブジェクトのmapメソッド」と「アロー関数」を利用して記述してください。【例】引数: [1, 2, 3], 返り値: [3, 6, 9]

第1形態

レガシーなスタイルで記述すると、次のようなプログラムになります。まずは、第02行目で「空」の配列tripledNumbersを用意して、forループを回しながら1個ずつ要素を追加しています。第04行目のpushメソッドは、配列の末尾に要素を追加するものになります（ただし、React 開発ではpushではなく、スプレッド構文というもので要素の追加をすることが基本となります）。

const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = [];
for (let i = 0; i < originalNumbers.length; i++) {
  tripledNumbers.push(originalNumbers[i] * 3);
}
console.log(originalNumbers);
console.log(tripledNumbers);

実際に上記プログラムを実行すると、期待するような出力が得られると思います。ただし、このプログラムを課題として提出すると再提出😇が不可避です。ここから、段階的にモダンスタイルの配列操作に変更していきましょう。

第2形態

forのループ変数を「配列のインデックスi」から「配列の要素そのものoriginalNumber」に変えました。第03行目と第04行目を書き換えていますが、実行結果は先ほどと同じく期待する出力を得ることができます。

const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = [];
for (let originalNumber of originalNumbers) {
  tripledNumbers.push(originalNumber * 3);
}
console.log(originalNumbers);
console.log(tripledNumbers);

なお、for(...of...) によってループ毎に変数originalNumberのなかには、1、2、3という値が格納されます。

もし、第01行目でconst originalNumbers = [9, 1, 5]としていれば、ループ変数であるoriginalNumberには、ループ毎に9、1、5という値が格納されてfor文の内部の処理が実行されます。

第3形態

functionキーワードを使って「3倍化」の処理をするための関数tripleを定義して、それを第07行目で呼び出すように書き換えました。

function triple(num) {
  return num * 3;
}
const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = [];
for (let originalNumber of originalNumbers) {
  tripledNumbers.push(triple(originalNumber));
}
console.log(originalNumbers);
console.log(tripledNumbers);

第4形態

関数tripleをアロー関数の形式に書き換えました。第01行目だけが書き換わっています。

const triple = (num) => {
  return num * 3;
};
const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = [];
for (let originalNumber of originalNumbers) {
  tripledNumbers.push(triple(originalNumber));
}
console.log(originalNumbers);
console.log(tripledNumbers);

第5形態

forを使って実行していた処理を、mapを使った処理に書き換えました。第4形態の第05行から第08行までの処理が、ここでは第05行の「1文だけ」でスッキリと記述できています。良いと思います👍

const triple = (num) => {
  return num * 3;
};
const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = originalNumbers.map(triple);
console.log(originalNumbers);
console.log(tripledNumbers);

なお、map() は元の配列を変更せず、配列の各要素にtriple を適用した「新しい配列」を作成して戻り値とします。これは、React開発で重要となってくる特性なので覚えておいてください。

第6形態

第5形態では、変数triple を経由してmapメソッドの引数に「3倍化の処理」を与えていました。それを、ここではアロー関数の形式で直接的に与えるように書き換えました。

const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = originalNumbers.map((num) => {
  return num * 3;
});
console.log(originalNumbers);
console.log(tripledNumbers);

ここでは、3倍化の処理をする関数に名前を与える必要がないこともうれしいですね（適切な名前を考えるのは面倒ですから…）。

第7形態（省略形）

アロー関数のなかの処理が return ...; の1文だけで構成できる場合は、以下のように「波括弧{}」と「return」を省略して書くことができます。

const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = originalNumbers.map((num) => num * 3);
console.log(originalNumbers);
console.log(tripledNumbers);

さらに、アロー関数が受けとる引数が1個だけの場合は、以下の第02行目のように引数部の丸括弧も省略可能です。

const originalNumbers = [1, 2, 3, 4, 5];
const tripledNumbers = originalNumbers.map(num => num * 3);
console.log(originalNumbers);
console.log(tripledNumbers);

もともとの第1形態と比べると、かなりスマートに処理を記述することができました。

以上でモダンスタイルに書き換え完了です、お疲れさまでした🦞