reactアプリ開発のロジック層でよく使うJavaScriptのメソッド集

はじめに

React アプリケーションの開発では、UI の動的な更新やデータの操作など、さまざまな場面で JavaScript のメソッドが活用されます。ここでは、特に使用頻度の高いメソッドに焦点を当て、その使用方法と React 特有の注意点を解説します。

React アプリ開発におけるレイヤー構造とその役割

javaScript のメソッド解説の前に react アプリのレイヤー構造・役割について紹介します。
React を用いたアプリケーション開発では、責務の分離（Separation of Concerns）を徹底し、効率的で保守性の高いコードを目指すために、以下の 4 つの主要なレイヤーに分割して開発が進められます。

react の開発は主に

・データ(API とのやり取り)

・ビュー(画面表示を行う)

・ロジック(API から取得したデータの加工を行い、ビューに流し込む)

・ストア(画面遷移時も保持したい値を保存する)

の 4 レイヤーに分けて行います。

JavaScript のメソッドを多く使用するのはこの中でロジックで、データやビューでの加工は最低限にする手法を取っています。

この記事ではロジックで使うことの多いメソッドを解説します。

紹介するメソッド一覧

・reduce
・map
・forEach
・filter
・slice
・split
・object.keys() object.values()
・find
・findIndex
・indexOf

コード例で使用する配列

日本人の花子さん、アメリカ人のマイクさん、韓国人のキムさんがいて、各々が所持金とそれぞれの国の挨拶を持っています。

const examples = [
  {
    name: "花子",
    money: 1000,
    greeting: () => console.log("こんにちは"),
    country: "Japan",
  },
  {
    name: "マイク",
    money: 5000,
    greeting: () => console.log("Hello"),
    country: "USA",
  },
  {
    name: "キム",
    money: 10000,
    greeting: () => console.log("하세요"),
    country: "Korea",
  },
];

reduce

配列の各要素を使用して値を蓄積し、1 つオブジェクトを生成するのに使います。
reduce メソッドを使用する時は reduce メソッドそのものを return して結果を取得した方が良いです。initial(初期値)に値が蓄積されていくので initial をリターンすることもできるですが、initial は意図しない値を返却することがあるため非推奨です。

メソッドで使用される値
累積値(accumulator):配列をループさせて蓄積させた値。
現在の値(current):ループ処理の中で現在使われている値。
初期値(initial):累積値の初期値。指定しない時は配列の 1 番目の値が使用されますが、後述するエラー原因となるので非推奨です。

コード例

全員の所持金の総額を計算する例です。
今回は initial を 0 とし、0 に各々の所持金を足していきます。

const totalMoney = examples.reduce(
  (accumulator, current) => accumulator + current.money,
  0
);
console.log(totalMoney);

出力：16000

⚠️ 初期値の注意点 ⚠️

初期値を設定しないと意図しない挙動を引き起こすことがあります。
配列の先頭の値を使用するため空配列が渡ってきた時にエラーになります。
また、意図しない初期値が設定されて型が違う値同士の計算が起きてしまうこともあります。

便利なメソッドである反面、全て reduce に任せて計算が複雑になり、後からソースコードを読み返した時に解読するの時間がかかったり、設計と異なる計算結果が返されてしまうことがあります。
配列を事前に filter や map で加工して使いやすい形にしてから reduce メソッドを使用することでソースコードの可読性が向上し、バグの発生を防ぐことができます。

map

配列をループ処理させてデータ表示をする時に使用します。
react で jsx 内でループ処理させて表示する時に多く使用します。
後述の filter メソッドと併用して特定条件の要素だけ抽出して表示するといった使い方もできます。
配列の長さが 0 だとエラーを起こすので、事前に array.length で長さが 1 以上であることを判定してから使用する、もしくは 1 以上と保証されているものを使用します。

コード例

全員の名前と所持金をjsxで表示します。

const ExampleList = () => {
  return (
    <>
      {examples.length > 0 && (
        <ul>
          {examples.map((example) => (
            <li key={example.name}>
              {example.name}: ¥{example.money}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};

結果

<ul>
  <li>花子: ¥1000</li>
  <li>マイク: ¥5000</li>
  <li>キム: ¥10000</li>
</ul>

forEach

配列そのものを使用してデータの加工や関数の実行をする時に使用します。

コード例

全員の挨拶の関数を実行します。

examples.forEach((example) => example.greeting());

出力：こんにちは Hello 하세요

⚠️map と forEach との違い
forEach は配列の各要素そのものを使ってループを行いますが、map は元の配列を使って別の配列を生成します。
使い分けとしては forEach は副作用がある時に使用します。
例えば配列の中に入った値を加工して表示する、配列内にある関数を実行する時に foeEach を使用します。

filter

配列の中の特定条件に合致する要素を抽出して配列を返却します。
検索条件を指定して配列を返却する、などの使い方ができます。
jsx 内部で map メソッドと組み合わせて、特定条件のデータを抽出して表示をするといった使い方は便利でよく学習本で紹介さていますが、view にロジックを混ぜることになるため、ロジック側で事前に reduce で加工をして表示は map に任せるということが実際は多いです。

コード例

examples
  .filter((example) => example.country === "Korea")
  .map((item) => item.greeting());

結果：하세요

slice

文字列や配列の一部を取り出して新しい配列を生成します。
文字列の一部を加工して取り出す時に使います。

コード例

const message= 'こんにちはHello하세요';
const newMessages = message.slice(0,4);
console.log(newMessages);

結果：こんにちは

split

文字列を分割して表示をする時に使用します。

コード例

const message= 'こんにちは Hello 하세요';
const newMessage = message.split(' ');
console.log(newMessage[0]);

結果：こんにちは

object.keys() object.values()

オブジェクトのキーや値を取り出すのに使えます。
map メソッドで表示を行う前に特定の値を抽出しておく使い方ができます。
例では関数であるものだけ取り出して実行します。

examples.forEach((example) => {
  const values = Object.values(example);
  values.forEach((value) => {
    if (typeof value === "function") {
      value();
    }
  });
});

結果：こんにちは Hello 하세요

その他のメソッド

find

配列内の特定条件に合致する要素を返却します。
文字列や数字の配列はもちろん、オブジェクトの場合でもコールバック関数を用いて検索可能です。
見つからない時は undefined が返るため、null 合体演算子(??)を用いて初期値を設定しておくとエラーが防げます。

コード例

国籍が日本の人を表示します。

const personInJapan = examples.find((example) => example.country === "Japan");
console.log(personInJapan.name);

結果：花子

findIndex

find 関数の返り値が配列内の要素の番号となっているメソッドです。
見つからない場合は-1 を返却します。
if 文の中に入れて要素の有無を調べて分岐を行う時に使うことが多いです。

コード例

所持金が 100000 より上の人を検索します。

const index = examples.findIndex((example) => example.money > 100000);
console.log(index);

結果：-1

indexOf

配列の何番目に要素があるか返却します。
find や findIndex と違いオブジェクトの入った配列を検索できないため使用頻度は低めです。

コード例

マイクさんが配列の何番目にいるか調べます。

const names = examples.map((example) => example.name);
const index = names.indexOf("マイク");

console.log(index);

結果：1

まとめ

react は javaScript で配列やオブジェクトを操作してビューにデータを回すので事前のロジック層での加工が重要になります。
これらのJavaScriptのメソッドを適切に理解し活用することで、Reactアプリケーションのロジックをより効率的かつ簡潔に記述し、複雑な処理をスマートに実装することが可能になります。